Build Tile: Picture

Page Content

Tile: Picture

Use the Tile: Picture content type to add a single, double, or triple width tile containing an image.

How to add a picture tile to a page

Note: Prior to adding this content type, you should upload the image to the T4 Media Library. The Tile: Picture content type uses CDN PXL so you do not need to resize the image prior to uploading it to the T4 Media Library.

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

  1. Click the green Add content button.
  2. Select 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: Do not use.
    • 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:
      • Smallest image: Select a 512x512 px image from the Media Library (required).
      • Biggest image: Include a bigger image matching the specs of the tile for double width (1024x512) and triple width tiles (1440x480). 
    • 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 (only if adding a link).
    • Choose only one of the following (or leave blank): 
      • Link (internal): Use to link to a different section or content type within the college.mayo.edu website
      • Link (external): Paste URL to an external website (any website that does not include "college.mayo.edu" in the URL, including other Mayo Clinic websites).
  4. Click Save Changes button to save content as a draft. Preview your updates and ensure the content displays appropriately, follows MCCMS Styles and Standards, and is free of errors. If everything displays correctly in the preview, approve the updates to be published.

*The margins of the tile you select in the "Type of tile" field must match surrounding tile content types (ie. all tiles set to "full bleed").