Build Studio Site - Tile: Picture

Page Content

How to Add a Studio Site - Tile: Picture

Use the Studio Site - Tile: Picture content type to add a single, double, or triple-width tile containing an image. Tiles can form a grid or a slider when used alongside other tile content. In this module, you will learn how to add a picture tile to a page.

Learning objectives

  • Understand the purpose of a picture tile
  • Understand how to use the picture tile content type to create engaging layouts
  • Explore how to organize tiles into grids or sliders to enhance visual appeal and usability

Instructions

From the T4 Site Structure, navigate to the page you are updating. 

How to add a new picture tile

  1. Click the Add Content button.
  2. Select Studio Site - Tile: Picture from the list of content types.
  3. Use the following content elements:
    • Name: Add descriptive name of content type to be used within T4 Site Structure.
    • Type of tile:
      • Full bleed: Stretches the tile to touch the surrounding content (or the edge of the page).
      • Not full bleed (w/ margin): Adds a white space margin between the edge of the tile and the surrounding content (or the edge of the page).
      • Not full bleed w/ slider (w/ margin): Adds a left and right arrow on the sides of the page to scroll through all of the tile content that has this option selected. Recommended to use with a minimum of four tiles (Also includes white space margin between the edge of the tile and the surrounding content).
    • Slider Autoplay: Select to have the page automatically scroll through a minimum of four tiles at timed intervals. Use sparingly.
    • Width of tile:
      • Double Width: 1024x512 rectangular tile
      • Round (Tile: Picture only): 512x512 round tile
      • Square: 512x512 square tile
      • Triple Width: 1440x480 rectangular tile
    • Image: The image doesn't need to be resized because this content type uses the CDN PXL, but you do need to select the same image from the T4 Media Library in both the "smallest image" and "bigger image" fields. 
      • Smallest image: Select an image from the Media Library (required). 
      • Biggest image: Select the same image from the Media Library (required).
    • White border on image: Check to add a white border to the image tile.
    • Heading: Optional, adds large text to the tile (over the image). 
    • Sub Heading: Optional, adds smaller text to the tile (over the image).
    • Open link in new tab: Select to have the link open in a new tab.
    • Link (internal): Use to link to a different section or content within your Studio Site.
    • Link (external): Paste URL to an external website (any website that does not include "education.mayo.edu" in the beginning of the URL). 
  4. Click the Save Changes button to save content as a draft, or press the arrow and select Save and Approve to save and publish updates.

Best practices

  • Use sharp, visually appealing images that align with the content and purpose of the page
  • When creating grids, ensure tiles have a cohesive style by using similar image types, dimensions, and visual themes
  • Consider using sliders when you need to display a large number of tiles without overwhelming the user
  • Take advantage of the built-in resizing tool to upload high-resolution images without manually adjusting their size beforehand
  • Use single, double, or triple-width tiles strategically to highlight important content and create a balanced visual hierarchy
  • Check how your tiles appear on various screen sizes to ensure responsiveness and maintain design integrity

Additional resources

You should now feel confident using the picture tile content type to create visually engaging layouts with single, double, or triple-width tiles.

Explore the possibilities: Content type examples

Browse through the examples below to see how the type can be used in different scenarios and design choices.

Three examples of picture tile content types are included below. The first tile shows an example of a square picture tile with heading and subheading text added. The second tile shows an example of a square picture tile without any added text. The final tile shows an example of a square picture tile with a white border. Picture tile content type can also be used in a double or triple-width tile (not pictured). 

Provider speaks with a patient at Mayo Clinic.
Sub Heading Text

Heading Text

Losing family members to liver disease motivated Essa Mohamed to get a Ph.D.
Alaa Koleilat, Ph.D.

Ready to enhance your content further?

Check out the next module.

Exploding picture tiles
menu
Close