Tile Image Gallery and Popup

Overview

Gallery view (on page)

Slideshow view (in popup)

This image gallery block is useful to add a collection of photos to any page template. Potential use cases include:

• a gallery of images related to a product or service

• a gallery to display customer review photos (similar to Amazon)

• multiple gallery elements to display the first five photos in multiple albums (e.g., showing a list of designers' portfolio previews, similar to Dribbble)

Structure

When this block is added to your app, the extension will place it within the Blocks container 860 (do not rename) group on the page. This group contains the responsive settings for all blocks.

• Group Tile Image Gallery and Popup This group contains the reusable element tileimagegalleryandpopup, which has all of the UI elements for the gallery widget and the popup gallery element.

  • tileimagegalleryandpopup This reusable element contains three main groups:

    • Group Title Group with Button and Filters This is a customizable section that includes a title, dropdown, toggle tabs, description text, sort dropdown, filters, and a new button. For more information, please read the instructions here.
    • Group Main desktop images

      • This group contains five image elements and the Button View photos (desktop) to view all photos in a popup. These elements are shown on desktop, laptop, and tablet devices.

    • Group Main mobile images

      • This group shows the first image in a gallery and the Button View photos (mobile)

        to view all photos in a popup.

  • All data is displayed in var - gallery images (list of images) hidden variable, within the Popup Hidden Variables element in the tileimagegalleryandpopup reusable.

How to set up

• Update the data source of var - gallery images (list of images) to any list of images. The other hidden variables that relate to the slideshow do not need to be changed.