The Photo Thumbnail with Zoom allows Site Builders to display a photo in a widget, and when a site visitor selects the photo, a larger "zoom" (modal) version of the photo pops up.
About the Photo Thumbnail with Zoom Widget
The Photo Thumbnail with Zoom features a title to accompany the 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 Zoom widget.
Figure 1: Photo Thumbnail with Zoom widget (when displayed on the page)
Figure 2: Photo Thumbnail with Zoom widget (after opening the larger modal version)
How to Add and Configure the Photo Thumbnail with Zoom Widget
To add a Photo Thumbnail with Zoom, 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 Zoom"; select this widget, then select "Add." See Figure 3, below.
Figure 3: Select Photo Thumbnail with Zoom
The following settings are available on the Photo Thumbnail with Zoom widget configuration screen:
- Title: Add the main title text of the widget (required).
- Photo: Upload a new photo or choose an existing photo from your library (required).
- Image Credit: Add photo credit (optional).
- Photo Description: Add a photo description (optional; this field uses the limited WYSIWYG editing toolbar).
Select the "Save" button when you are finished. See Figure 4, below.
Figure 4: Configure Photo Thumbnail with Zoom
- 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.
- Using stock photos (intended for Hero widgets) is not recommended.
- For photo/image best practices, see Image Shapes and Sizes.