Photo Gallery Component

Group images as a tiled grid or slideshow.

Classic Flex UI

On this page:

Last reviewed: June 17, 2021

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.

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

Add the component to the page. There is only one tab.

The gallery 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 assets in the Photo Gallery depend on the order of assets in the Assets folder just like the order of pages in site navigation depends on their order in the sites list/tree.

Be sure to check the published gallery. Publishing a page that contains a slideshow of photos from the DAM does NOT activate the the photos themselves. There is no warning they are not activated, and any that are not activated will simply not show in the published version.

The component opened for editing.

The component opened for editing.

Photo Gallery Tab

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

See An Example

Was This Information Helpful?

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