This snippet will create a grid of thumbnail images that pop up into a scrollable gallery when a thumbnail is selected or a gallery of larger images that the user can scroll through that also pop up into a larger image. For the thumbnail option, only the pop-up image will display the title caption, but they will be displayed on the page for the gallery option.
- Using the Image Editor, crop the images.
- For the thumbnail option, crop the Square type and either the Banner, Card, or Vertical type. The image must be at least 800 pixels wide in order to have a pop-up.
- For the gallery option, crop a Banner, Card, or Vertical image type. The original image must be at least 800 pixels wide in order to have a pop-up.
- Select thumbnail or gallery from the dropdown menu to select the gallery display type. View the thumbnail option or the gallery option in the Style Guide.
- Insert the image in the Image field.
- For the thumbnail option, insert the square170 image.
- For the gallery option, insert the size that you want displayed on the page.
- Enter the title in the Title field to the right of the image, if desired. Linking this text will display a link on the pop-up image for the thumbnail option or both the page image or pop-up image for the gallery option.
- Enter the accompanying caption in the Caption field to the right of the title. Linking this text will display a link only on the page image for the gallery option. No links will appear in the pop-up images.
If you are including more than three images, press the Tab key to get more fields.
Watch a video about the Gallery option (video has no sound):
Watch a video about the Thumbnail option (video has no sound):