# Tile Image Gallery and Popup

## Overview

![Gallery view (on page)](/files/-MZZiJg5SySyv8Zkdtvu)

![Slideshow view (in popup)](/files/-MZZiR7nsTMv8CjY3fiC)

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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.airdev.co/canvas-pages-and-modules/modules/tile-image-gallery-and-popup.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.