Photo Gallery Component
Group images as a tiled grid or slideshow.
On this page:
Last reviewed: May 23, 2022
Using This Component
This component has only one tab.
The gallery displays images from a specified folder in Assets, which can be loaded in grid or gallery mode, and users can be allowed to switch back and forth as desired, or limited to the pre-set mode.
The order of the images displayed in the Photo Gallery depends on their order in the source folder in Assets.
Beware, your view of the image order in the Assets Console may not be the true order. Often the Assets Console shows a sorted view, not the true order that is used for the gallery. And this sorted order is also mirrored in the Content Tree. To see the true order, go to the List view, and make sure none of the column headings has any up or down arrows next to them. Click the arrows if present one or two times until they go away. This is the natural order.
When all is ready and the page is published, be sure to check the published gallery.
Publishing a page that contains a Photo Gallery of images from Assets does not publish the assets. There is no warning if any of them as not published, and only published images will show in the live site.
If the order of images is not what you desired, and the source folder is set as 'orderable', you can manually reorder the images. Be sure to republish any images that you move during this process.
Please be thoughtful in your image selection.
- They should strengthen your messages and reinforce our brand. See these guidelines for photography and videography.
- Your photos should be sized to fit your needs. Help your pages render faster with these SmugMug resolution tips.
For original image sizes, we recommend starting with at least 800px x 536px for landscape or 536px x 800px for portraits (aspect ratio 1.5:1). Larger images are encouraged up a maximum of 2500px.
Technical Restrictions
- Activating this component does not automatically activate the corresponding images in the DAM.
- Images in a Photo Gallery must have 'alt text' to be accessible.
> Read more about setting alt text in the DAM. - Loading many images or very large images may result in slow loading.
Too many images or large images (over 1 MB each) may cause this component to load slowly or not at all. > Known Issue: Photo Galleries Do Not Load or Load Very Slowly
Sometimes the image order on a live page may not match what is shown in Author or the parent Assets folder. > Known Issue: Images Are Out of Order
Configure - Main Settings
The wrench icon provides access to change all settings.
Photo Gallery Tab
The component opened for editing.
Source folder: Choose where in the DAM your images will be drawn from; e.g. /content/dam/www/news/.
Start view: Choose from
- grid (default) - Display images as tiles in a simple grid, without captions.
- slideshow - Display images in a single-frame carousel, including captions.
Disable alternate view: Optionally turn off the button that allows viewers to toggle between grid and slideshow.
ShareThis.com ID: Optionally used for tracking purposes if you have a account with ShareThis.com.
The component loaded as a Grid, showing the button to change to the 'Slideshow' view.
The component loaded as a Slideshow. Note the three buttons for grid view, ShareThis and full-screen. A mouse-over tool tip is labeled 'flip to gallery view' - it refers to the grid.
Accessibility Concerns
Photo Galleries Require Alt Text
Alternative text ('Alt text') is a best practice for all your UBCMS images and is often required for accessibility so screen readers can tell visually disabled users what they are not seeing.
Images displayed in a Photo Gallery always require Alt text, which must be manually provided in Assets for each image.
Best practice, Alt text should be added whenever an image is uploaded into Assets.
Known Issues
Additional Reference:
To be accessible, Photo Gallery images use 'alt text' set in the DAM. > Read more about setting alt text in the DAM.