Build Studio Site - Tile: Picture

Instructions

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

How to add a new picture tile

1. Click the green "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 blue "Save changes" button to save content as a draft, or press the arrow and select "Save and approve" to save and publish updates.

How to edit an existing Studio Site - Tile: Picture content type

1. Select the existing content type you'd like to edit. 
2. Make needed adjustments to the content elements described above. 
3. Click the blue "Save changes" button to save content as a draft, or press the arrow and select "Save and approve" to save and publish updates.

Additional resources

• Adding Images to T4 Media Library
• Image dimensions and resizing tips

You should now feel confident using the Studio Site - Tile: Picture content type to create visually engaging layouts with single, double, or triple-width tiles.

Three examples of Studio Site - Tile: Picture 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. Studio Site - Tile: Picture content types can also be used in a double or triple-width tile (not pictured).