The Photo Thumbnail with Gallery widget is similar to the Photo Thumbnail with Zoom widget, but with the additional option to showcase multiple photos in one widget (like a photo gallery).
About the Photo Thumbnail with Gallery Widget
The Photo Thumbnail with Gallery allows Site Builders to display the first photo in the gallery in a widget on a page. When a site visitor selects the photo in the widget, a larger modal version of the photo gallery pops up; from there, the site visitor may use the arrow buttons and/or individual slide buttons to check out the rest of the photos in the gallery.
The Photo Thumbnail with Gallery features a title to accompany each photo with options to include a photo credit and/or description (the description field uses the limited WYSIWYG editing toolbar). See Figures 1 and 2, below, for examples of the Photo Thumbnail with Gallery widget.
Figure 1: Photo Thumbnail with Gallery widget (when displayed on the page)
Figure 2: Photo Thumbnail with Gallery widget (after opening the larger modal version)
How to Add and Configure the Photo Thumbnail with Gallery Widget
To add a Photo Thumbnail with Gallery, select the "Customize this page" button at the bottom of the page, select the "plus" icon from one of the page regions, then select "Berkeley Components." In this section, there will be a widget called "Photo Thumbnail with Gallery"; select this widget, then select "Add." See Figure 3, below.
Figure 3: Select Photo Thumbnail with Gallery
Start by adding the main title text of the gallery widget (required). After this, add each individual gallery photo item by configuring the following fields:
- Photo: Upload a new photo or choose an existing photo from your library (required).
- Image Title: Add the main title text of the individual photo (required).
- Image Description: Add a description (optional; this field uses the limited WYSIWYG editing toolbar).
- Image Credit: Add photo credit (optional).
After adding each gallery photo item, select the "Add another item" button to keep adding gallery items. The first gallery item will be the photo that displays on the page (the main photo of the widget). Drag and drop the photo items to change the order of the photos in the gallery, and select the "Remove" button to remove photo items. Select the "Save" button when you are finished. See Figure 4, below.
Figure 4: Configure Photo Thumbnail with Gallery
Notes
- This feature aligns with the Berkeley Brand guidelines.
- Large (high resolution) images may cause performance issues and could possibly cause other site errors. If you are uploading your own photos to use for Photo Thumbnails, try to only upload photos that have a file size of 1MB or smaller.
- Photos should be at least 768px wide by 512px high.
- For photo/image best practices, see Image Shapes and Sizes.