Photo Gallery Component

Group images as a tiled grid or slideshow.

Flex UI Classic

This feature works comparably in both the Classic and Flex UI versions of the UBCMS. In the future, screenshots and language will be updated to reflect Flex UI.

On this page:

Accessibility
  • Photo Galleries require Alt text.

> Read more.

Last reviewed: September 21, 2021

Accessibility Concerns

State and federal rules require most images to be ADA compliant, with meaningful 'alt text.' 

> read more on accessible images

> read more about setting alt text in the DAM

Using This Component

The wrench 'Configure' icon provides access to add/clear the image and adjust settings in the other tabs.

  • 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.

Configure - Main Settings

The wrench icon provides access to change all settings.

screenshot of the component opened for editing.

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 Grid, showing the button to change to the 'Slideshow' view.

The component loaded as a Slideshow, showing a tip to 'flip to gallery 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.

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.

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.

To be accessible, Photo Gallery images use 'alt text' set in the DAM. > Read more about setting alt text in the DAM.

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

Accessibility Concerns

See An Example

Was This Information Helpful?

(Required)
(Required)
(so we can thank you or request more details)
(Required)
(buffalo.edu addresses only please)