Applies to: This article is for customers using CMS Module. If your organization uses the Content Legacy Module, refer to the corresponding article for that module.
What the Photo Gallery Element Does
The Photo Gallery element displays a collection of images in a grid or other layout style. It supports captions, image links, hover effects, buttons, and Instagram integration. Most customer use cases are to replace their gallery/image rotator from the legacy content editor or for Sponsor logos.
Adding a Photo Gallery to a Page
- Click the Add icon (+) in the left sidebar to open the Elements panel.
- Search for "gallery" or scroll to find Photo Gallery.
- Drag the Photo Gallery element onto a column, or click it to insert it into the selected column.
Managing Photos (Content)
Click the gallery on the canvas, then click Manage Photos in the element toolbar. The Photo Gallery Content panel opens:
- + Add image — Upload photos directly from your device
- Connect Instagram — Link an Instagram account; the gallery will auto-populate with Instagram posts
- Delete All Images — Removes all images at once (use with caution — cannot be undone)
- Each image thumbnail has an X button to remove it individually
Per-Image Settings
Click any image thumbnail to open Image Settings on the right:
- Caption — Text shown as an overlay or below the image (depends on layout)
- Position — Allows you to adjust the focal point of the image if it needs to be realigned
- Button — Add a call-to-action button label on the image
- Image alt text — Describe the image for screen readers and SEO
Enable links on gallery images toggle (bottom of panel) — When on, each image can be linked to a URL.
Designing the Gallery (Edit Design)
Click the gallery on the canvas, then click Edit Design in the element toolbar. Here you can choose from different layout options for the gallery itself.
Image Settings
| Setting | What It Controls |
|---|---|
| Image height | Height of each image tile in pixels |
| Space between images | Gap/gutter between image tiles |
| Corner radius | Rounds image corners (0 = perfectly square) |
| Display full image | Shows complete image without cropping |
| Shadow | Adds a drop shadow around each image |
| Don't optimize image | Disables automatic file compression |
| Image hover effect | Visual effect when cursor hovers over an image |
| Image animation | Entrance/scroll animation for images as they load |
| Number of columns & Visible Rows | Adjusts how many images and rows to show |
Device-Specific Display
- Content display for desktop only toggle — hides the gallery on non-desktop devices
- Content display for tablet only toggle — hides the gallery on non-tablet devices