Photo Gallery Component

Group images as a tiled grid or slideshow.

On this page:

  • Photo Galleries require Alt text.
  • Third Party content must be accessible.
  • SiteImprove known issues.

> Read more about making this component accessible.

Last reviewed: May 30, 2023


Display a collection of images as a grid or slideshow that is optimized for user experience, accessibility and page performance on all screen sizes, regardless of the number of assets. The gallery adjusts to look good in wide or narrow placements.

Using This Component

The gallery displays images from a specified Assets folder or SmugMug gallery*. These images can be loaded as a grid or slideshow. In either mode, when the viewer clicks an image, a dialog box loads with that image as part of a slideshow.

  • The order of the images depends on their order in the source folder. **
  • Slide captions are pulled from each image's properties.
  • Authors can preset the maximum number of images displayed, and have the display begin part way through the series.
  • In either mode, when an image is clicked, the collection switches to a dialog box slideshow, with navigation between single images.

* For SmugMug, an API is needed to pull in the desired gallery.
** For Assets order, see the Technical Restrictions below for more details.

When the page is published, be sure to check the published gallery or use View as Published to ensure performance is satisfactory.

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

Technical Restrictions

  • Publishing this component does not automatically activate the corresponding images in Assets
  • Your view of the image order in the parent folder in Assets may not be the true order used by this component. Often the parent folder shows a sorted view. To see the true order, go to the List view in the Assets Console 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 should then be the order that will appear in the gallery.

The UBCMS optimizes images for best display on the user's device, but we recommend:

  • Vertical images between 600 - 1800 px tall.
  • Horizontal images between 800 - 2800 px wide.
  • Hero images work well with a 1900 px width.
  • Large images display clearest in full screen mode.
  • Do not skimp. Images may be pixelated in large settings.
    (Retina displays can show images at 2656 x 1744 px.)

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 in four tabs: Layout, Text, Colors, and Image.

Source tab

  • Gallery Source - Choose from:
    • DAM (default)
    • SmugMug

You will then need to provide additional information.

If you choose Assets (DAM), you must already have a folder in Assets and reference its source here:  

  • DAM folder - Enter a reference path to an existing Assets folder that contains your images (/content/dam...).  Use the chooser to navigate.

If you choose SmugMug, you must already have a SmugMug album, and an associated API key, and reference both here:  

  • SmugMug API Key - Identify the image source. An account holder will need to provide this key so you can reference their SmugMug gallery (e.g. the main UB SmugMug collection key is nKprMcWv3Q3xJmPPQdJdtxdkMN8WSvqW ).
  • SmugMug Album ID - Identify the specific gallery in that source collection *. (This is likely a shorter alphanumeric; e.g. jbrCpt.)

* You may be able to find the Album ID by viewing the gallery, then opening its source code (Ctrl-U) and searching the results for 'AlbumKey'.

Slide captions (and Alt text) are pulled from each image's Properties.

Settings tab

Gallery Limit - Set the maximum number to display. Default is 0 (no limit).

Starting Offset - Skip an initial number of images. Default is 0 (starts at first image).   

Aggregate Gallery - When selected, the full screen mode will combine this gallery with other galleries on this page that have also been set as an Aggregate Gallery.  (Adding or removing aggregate galleries requires a page refresh in Author to update the full screen display.)

Combine Limit and Offset to display a subset of a larger collection (e.g. images 3-7) or to segment a collection (e.g. one gallery as 0-7 then a second as 8-13).

Styles tab

Start view - Choose from:

  • Grid (default) - Display images in a tiled grid, without captions. By default, this is four columns, but the tile layout can be refined further by clicking the setting. The pattern repeats gracefully for larger numbers of images.
  • Slideshow -  Display images in a single-frame carousel, with an adjacent area displaying any caption, slideshow navigation, a ShareThis tool and an option to switch to full-screen mode.

If you select Grid, you can also select:

  • Grid Options - Choose from the listed tiling (e.g. 'Masonry 1' or '3 Column Square Grid') which control the pattern of rows and columns as well as a larger feature image.
  • Gallery Size - Choose from:   
    • Standard (default) - Full width of center column of a page.
    • Wide - Displays wider than the main content area, 85% of the available screen, similar to Hero settings, that is maintained gracefully on smaller screen sizes. (Intended for single column layouts.)

If you select Slideshow, you can also select:

  • Color Theme - Choose from the listed UB-branded colors (e.g. dark blue, light blue, dark gray, light gray).

Captions (and Alt text)

Captions are displayed for each slide in Slideshow mode, and when an image is opened in the Grid mode. It is not possible to turn off the captions. For some browsers, they are also displayed as mouseover text.

For an Assets gallery, the UBCMS draws information from each asset's properties, following these rules:  

  • If a Description is provided, that is displayed as the Caption.
  • If no Description is provided, the Alt Text field is used for the Caption.
  • If neither Description or Alt Text are provided, the Title field is used.

For a SmugMug album, the UBCMS draws information from each image in the parent SmugMug album. (Be careful that the entire album has not been given the same description!) The caption will display the Description field, a blank line and then the Photographer's name (if provided).

For accessibility, captions are required, which are then read as Alt text by screen readers.

See an Example

Live Example: Slideshow Mode

See More Examples

Accessibility Concerns

SiteImprove may not be testing each of the slides individually, and may thus be missing any associated accessibility issues. We are working to mitigate this issue.

For accessibility, captions are required, which are then read as Alt text by screen readers.

Master Class Resources

Was This Information Helpful?

(so we can thank you or request more details)
( addresses only please)