# Tile Image Gallery and Popup ## Overview 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)** 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.