Photo Gallery Component

Group images as a tiled grid or slideshow.

Overview

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.

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.

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

The component opened for editing showing the default 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

The component opened for editing showing the 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

Screenshot of the component opened for editing showing the Styles tab and Grid options.

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

Screenshot of the component opened for editing showing the Styles tab and Slideshow settings.

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

Live Example: Gallery Mode

See More Examples

Accessibility Concerns

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.

For photo galleries, the image captions also serve as Alt text, which must be manually provided at the source for each image.

Please provide either the Alt Text, or the Description, or both, because the two can be applied differently in some photo components. For the Gallery:

If a Description is provided, that is used as Alt Text.
If no Description is provided, the Alt Text is used as Alt Text.
If no Description or Alt Text, no Alt Text is provided. (The Title field is not used for Alt Text.)

Best practice, always provide Alt text whenever an image is uploaded into Assets.

Known Issues

6/3/22 Photo Gallery image with valid Alt text falsely flagged as accessibility error

Additional Reference:

Authors are responsible for any third party content that is hosted or linked from their UBCMS pages.

This includes applications such as Formstack forms and Google Maps, that are displayed using their own component, as well as entries from UB's Calendar of Events, and external content hosted using HTML Snippet or External Embed.

Best practice: for Formstack forms, avoid using the date picker and the 'other' option in dropdowns.

Best practice: for the HTML Snippet and External Embed, always run an accessibility test (e.g. using a browser extension), check its behavior in mobile, and consider how it may impact page performance in general.

Best practice: if your code relies on a 'div' or iframe to house its content on your page, it must have an identifying label, often coded as a 'aria-label' or sometimes a 'title', that assistive technology can see. Formstack produces a title automatically, although it is poorly worded, but other applications tend to skip this requirement so it must be added manually on your end.

If you have concerns that external vendor content is not accessible, please contact UB's Web Accessibility officer.

Additional Reference:

UB Accessibility website: electronic accessibility and procurement

Issue: SiteImprove warns about an empty unordered list (missing the <li> list items) for the slides. But the slides are all there and are coded correctly.
Resolution: This error is not accurate and can be ignored.
Further Implications: This issue may also indicate that SiteImprove is not testing each of the slides individually, and may thus be missing any associated accessibility issues.

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.

Learn more about the UBCMS and accessibility

Photo Gallery Component

On this page:

Overview

Using This Component

Technical Restrictions