Photo Gallery Component

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.

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.
  

• Displaying large numbers of images or very large images may result in slow page loading. As always, think quality over quantity.
  
• 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 wrench icon provides access to change all settings in four tabs: Layout, Text, Colors, and Image.

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

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

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