# Tile Image Gallery and Popup

## Overview

![Gallery view (on page)](https://1483599141-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-MZZi041_lKEj9xdPZCO%2F-MZZiJg5SySyv8Zkdtvu%2Fimage.png?alt=media\&token=9a2da23f-bc78-4802-bc3f-7711c494b21a)

![Slideshow view (in popup)](https://1483599141-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-MZZi041_lKEj9xdPZCO%2F-MZZiR7nsTMv8CjY3fiC%2Fimage.png?alt=media\&token=244e6e96-a685-494b-b61b-b7123ae080bb)

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](https://docs.airdev.co/canvas-pages-and-modules/v/3.0.0/modules/title-group-with-button-and-filters).
    * **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)**

        &#x20;to view all photos in a popup. <br>
  * 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.