# Main Image with Thumbnails

## Overview

![](https://1483599141-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-MW7zKJjU7aR4EEt7-M7%2F-MW7ze286SSL3VPx5RI8%2Fimage.png?alt=media\&token=130fd6cc-16ec-49c0-8da6-0dcbb30f7789)

This fully-responsive block includes a main image and a list of thumbnail images. Clicking on a thumbnail image will change the main image to that thumbnail's image.

## Structure

* When this block is added to a page, it is placed within a group called **Blocks container 860 (do not rename)** on the page. This group contains the responsive settings for all blocks.
* This block (**Group imageWithThumbnails**) contains a reusable element called **new\_imagethumbnails**. The reusable element will come with five main elements:
  * **Group Main next image**  - Clicking on this group will scroll to the next image in the thumbnail images list
  * **Group Main image** - This group contains the main image and is displayed as the group's background image
  * **Group PLACEHOLDER 1** and **Group PLACEHOLDER 2** - These are placeholder groups in the block. If you add more elements to the group, please resize these groups and ensure they are not overlapping with any other elements.
  * Clicking on **Group Inner list image** will change the main image to the thumbnail's image
  * All thumbnail images are displayed in **RepeatingGroup Dummy**
    * This repeating group also has two states
      * `Current thing` of data type Dummy (you should update the data type)
      * `Order` of type number

## How to set up

Since this block is in a reusable element, you can only pass data to it from the page with two methods:

1. Update the reusable element data source to the data type you want to pass. \
   For example, you may want to pass a Product or Listing data type that has fields for main image and a list of images. On the page that you have the reusable element instance, make sure you pass the data type.<br>
2. Add states to the reusable element. \
   You would set the states of the reusable element on the page and pass the data from the page to the reusable element.

* Update the data source of **Group Main image**
* Update **RepeatingGroup Dummy's** data source and the data type of its `Current thing` state. You can view the states on the element by clicking on the info icon.
* Modify the workflows in the workflow tab and select the appropriate data to pass to the custom workflows.