Build Exploding Picture Tile

Page Content

How to Add an Exploding Picture Tile

Use the Exploding Picture Tiles content type to add a set of images that viewers can hover over to get expanded views of the images and an optional description. The primary use is for highlighting multiple options to users and giving them a short preview of the content they'll find on the page if they choose to click on the image to read more. Each set can contain between three and six images/links.

Learning objectives

  • Understand the purpose of an exploding picture tile
  • Learn to configure tiles with images, descriptions, and links to guide users to additional content
  • Explore how to effectively group and organize images to provide clear navigation and highlight key options

Instructions

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

How to add an Exploding Picture Tile content type

  1. Click the "Add content" button.
  2. Select "Exploding Picture Tiles" 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.
    • Main heading: Optional, used to add a main H3 heading above the Exploding Picture Tiles. 
    • Main description: Optional, used to add a main description (sentence or paragraph) above the Exploding Picture Tiles. 
    • Fill out the remaining content elements depending on the number of tiles you need:

      A. Tile 1 Image: Click "Select media" to navigate to the image in the T4 Media Library appropriately resized according to the dimensions needed for the number of photos you are including in the content type.

      B. Choose only one of the following (or leave blank):
      - Link (internal): Use to link to a different section or content type within your site.
      - Link (external): Paste URL to an external website (any website that does not include "education.mayo.edu" in the beginning of the URL).

      C. Tile 1 Sub Title: Optional, used to add smaller subheading text to the image.

      D. Tile 1 Title: Required, used to add bold heading text to the image.

      E. Tile 1 Description: Optional, used to add a 1-2 sentence description to the image.

    • Repeat steps A-E as necessary for a minimum of three tiles to a maximum of six tiles. 

  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

  • Select visually appealing images that align with the linked content and resonate with the target audience
  • Ensure hover descriptions are brief, informative, and entice users to click through to explore more
  • Stick to the recommended 3–6 tiles to maintain a clean, balanced, and user-friendly layout
  • Use images with a similar style, orientation, or color palette for a cohesive look across all tiles

Common issues and troubleshooting

  • Exploding Picture Tile content types must include a minimum of three photos and a maximum of six photos
  • Include a link associated with each photo because the content type appears clickable and it can be confusing to page viewers if they click on a picture and are not taken to a different page with additional information
  • To get tiles 4-6 to appear, each additional tile needs text in the Title field (This is already required for 1-3, but can't be required for the additional images)
  • On mobile devices, the text is always visible (as touchscreens cannot hover)

Additional resources

By now, you should feel confident using the Exploding Picture Tiles content type to create dynamic and interactive image sets that highlight key options for your users.

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.

Main heading text can go here

Main description text can go here. This is an example of an Exploding Picture Tile displaying 4 images with links. The images in this example link to the Campus and Community pages on college.mayo.edu for example purposes only.

Tile Heading Optional tile description text goes here.
Arizona Since its opening in 1987, Mayo Clinic in Arizona continues to transform healthcare through excellent patient care, innovative research, and unparalleled education for the next generation of medical leaders.
Florida Opened in 1986, Mayo Clinic's campus in Jacksonville, Florida, was the first campus expansion beyond Rochester, Minnesota.
Rochester For more than 150 years, Rochester has been a destination for patients facing the most serious and complex medical challenges.

Ready to enhance your content further?

Check out the next module.

Gallery
menu
Close