Photo Thumbnail with Zoom

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)
Screenshot of a landing page with several widgets, including a Photo Thumbnail with Zoom widget, featuring a photo of fruits and vegetables in a grocery bag

Figure 2: Photo Thumbnail with Zoom widget (after opening the larger modal version)
Screenshot of Photo Thumbnail with Zoom modal, featuring a photo of produce in a grocery bag, with lorem ipsum text in the description and a sample photo credit

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
Screenshot of the widget selection screen, with Berkeley Components, Photo Thumbnail with Zoom, and Add options highlighted in red

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
Screenshot of Photo Thumbnail with Zoom editing screen, with the available fields highlighted

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.
  • Using stock photos (intended for Hero widgets) is not recommended.
  • For photo/image best practices, see Image Shapes and Sizes.

Topics