Build Gallery

Page Content

How to Add a Gallery

Use the photo galleries to display multiple photos and allow the user to open a lightbox to view enlarged versions with captions. In this module, you will learn how to add a photo gallery to a page.

Learning objectives

  • Understand how to use the gallery content type to display multiple images in an engaging and user-friendly format
  • Learn how to configure photo galleries with captions and lightbox functionality to enhance the user experience

Instructions

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

How to add a gallery content type

  1. Click the Add Content button.
  2. Select Gallery from the list of content types.
  3. Use the following content elements:
    • Heading: The heading is used to label the title of the photo gallery for screen readers and other assistive technology. Use this field instead of preceding the gallery with General Content.
    • Description: Add a descriptive caption that will be displayed above the gallery.
    • Select Image: Select the first image within the media folder that you want to appear in the gallery. Each folder needs a minimum of six images.
    • Show in Sidebar: Checkbox to show a 2x3 grid in the right sidebar.
  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

  • Resize all images to the same dimensions before uploading to ensure a uniform appearance and avoid layout issues
  • Select clear, visually appealing images that align with your page’s theme and resonate with your audience
  • Include concise and informative captions to provide context or enhance the user’s understanding of each image
  • Include alt text for every image to ensure accessibility for users with visual impairments
  • Ensure that the lightbox feature works properly across devices and browsers for a seamless user experience

Common issues and troubleshooting

  • Photo galleries cannot be previewed; they have to be published to see what they will look like
  • The message to "Load more images" always appears; it will be grayed out if there are no more images
  • The gallery won't load if quotation marks are included in the Description/Alt text field of any image
  • Showing in a sidebar does not include the "Load more images" button
  • Each gallery needs a minimum of six images

Additional resources

By now, you should feel confident using the gallery content type to showcase multiple images in an organized and engaging way.

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.

Photo Gallery photo gallery

About the gallery

Ready to enhance your content further?

Check out the next module.

Videos
menu
Close