# Gallery

## Overview

* The Gallery widget is a visual component that displays a collection of images as long as your data model has a column that contains an image URL.

<figure><img src="https://1608311007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSr8m3Ldc2W7Qqq1jsjgC%2Fuploads%2FYvn5037pE1jlSgwZLS3L%2Fimage.png?alt=media&#x26;token=628bff2b-26fc-4244-b759-71ef8c36afe6" alt=""><figcaption></figcaption></figure>

* First, click on any "+ Add widget" button to add a widget.

<figure><img src="https://1608311007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSr8m3Ldc2W7Qqq1jsjgC%2Fuploads%2F1QQJq606JGwqc0B5sakT%2Fimage.png?alt=media&#x26;token=b2fb4948-ffd5-4743-a84c-a342b358a1b0" alt=""><figcaption></figcaption></figure>

* Click on the Gallery option.
* Click on the Add widget button to proceed.

<figure><img src="https://1608311007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSr8m3Ldc2W7Qqq1jsjgC%2Fuploads%2FFL3zVbdgWgw1DGNSss5f%2Fimage.png?alt=media&#x26;token=114dbc4f-8666-4278-82af-41942c2b63ea" alt=""><figcaption></figcaption></figure>

* Choose the available Collection or Connection of the data model that has been added.

## Set up your Gallery

### Add Image

<figure><img src="https://1608311007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSr8m3Ldc2W7Qqq1jsjgC%2Fuploads%2F0NDD1lgRa2iLCMA1HLWf%2Fimage.png?alt=media&#x26;token=ecc14349-fc15-4fc6-9c90-d5aa3cda69a1" alt=""><figcaption></figcaption></figure>

* Click on the Image field then choose the column that has the image url to display the image.

{% hint style="info" %}
The image will only appear if there is an image url and the image url is not expired.
{% endhint %}

### Add Title

<figure><img src="https://1608311007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSr8m3Ldc2W7Qqq1jsjgC%2Fuploads%2FeLggnHmuTdbMYg2Lje7T%2Fimage.png?alt=media&#x26;token=aef9f82e-3381-4102-8e78-3ba9186e6f8b" alt=""><figcaption></figcaption></figure>

* Continue to the field that you would like to be the Title of the image.

### Add Values on card

<figure><img src="https://1608311007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSr8m3Ldc2W7Qqq1jsjgC%2Fuploads%2FhsLycVA4Mgdi91gqAWwX%2Fimage.png?alt=media&#x26;token=ee3ff95c-ec85-4abb-aad2-c1b824a4c225" alt=""><figcaption></figcaption></figure>

* The Galley widget needs to have a value to complete.
* Click on the button to display All fields pop up.

<figure><img src="https://1608311007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSr8m3Ldc2W7Qqq1jsjgC%2Fuploads%2Fd71kYZF0R80CJGiuQw4c%2Fimage.png?alt=media&#x26;token=52ac2266-5e08-417b-98df-c992c98c5b4c" alt="" width="563"><figcaption></figcaption></figure>

* The All fields pop-up will appear with all the available columns of the data model.
* Simply drag and drop one or many fields into the Values.
* Click the Done button and the X button to close the All fields pop-up.

<figure><img src="https://1608311007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSr8m3Ldc2W7Qqq1jsjgC%2Fuploads%2FREtOE4Xwr46ZJnAhV3FX%2Fimage.png?alt=media&#x26;token=6fb551b8-3e0f-47db-9c2d-457529fd430c" alt=""><figcaption></figcaption></figure>

* You can click on the 🖊 icon to [customize](https://endash-guidance-docs.gitbook.io/docs/dashboard/custom-column-configuration) the column.

### Set up formulas

* In [Grouping](https://endash-guidance-docs.gitbook.io/docs/dashboard/widget-types/gallery/gallery-grouping) mode, the Formula box will appear to access on the selected column.

<figure><img src="https://1608311007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSr8m3Ldc2W7Qqq1jsjgC%2Fuploads%2FAGMc8ymkb6xrWQ4cepic%2Fimage.png?alt=media&#x26;token=2cf7740c-538c-41d7-8b4e-d7f08cdf4b7f" alt=""><figcaption></figcaption></figure>

* Click on the field, the [Formula](https://endash-guidance-docs.gitbook.io/docs/dashboard/footer-formula) popup will appear and you can choose from the available options.
* The Sum formula will be auto-selected.

### Choose your Image container&#x20;

<figure><img src="https://1608311007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSr8m3Ldc2W7Qqq1jsjgC%2Fuploads%2FkT3ZXixpTCxhrHDicYDd%2Fimage.png?alt=media&#x26;token=df816249-a944-4979-9f7f-6d3f59c8cbba" alt=""><figcaption></figcaption></figure>

* The Fit option is the default option. This option helps display the full image.

<figure><img src="https://1608311007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSr8m3Ldc2W7Qqq1jsjgC%2Fuploads%2FYMcuFhncfTgzV2FGKeNj%2Fimage.png?alt=media&#x26;token=5e4704f9-9350-4bfc-ac5e-7a64df67a090" alt=""><figcaption></figcaption></figure>

* You can switch to the Fill option to fill the whole image container.

### Add Description

<figure><img src="https://1608311007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSr8m3Ldc2W7Qqq1jsjgC%2Fuploads%2Fr8FmCULDr76azFFKxxQK%2Fimage.png?alt=media&#x26;token=cb6cf96a-cc8f-4fcb-ac22-02c65126f5c4" alt=""><figcaption></figcaption></figure>

* Continue to the field that you would like to be the Description of the image.

### Add Link

<figure><img src="https://1608311007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSr8m3Ldc2W7Qqq1jsjgC%2Fuploads%2FawBlxU1OQVh40o78rTJb%2Fimage.png?alt=media&#x26;token=8df0fd49-d55c-4faf-89ab-3faed72d4af6" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1608311007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSr8m3Ldc2W7Qqq1jsjgC%2Fuploads%2F2Ece2mVRdKEFKE6LqMyv%2Fimage.png?alt=media&#x26;token=1f81ef75-f779-4924-8668-d590bf0df42e" alt=""><figcaption></figcaption></figure>

* Fields that contain any Link can also be added.

<figure><img src="https://1608311007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSr8m3Ldc2W7Qqq1jsjgC%2Fuploads%2FlsrHYKzMWR4LNQlbQGa5%2Fimage.png?alt=media&#x26;token=feb57772-a236-45f8-9b07-7ee7934424ed" alt=""><figcaption></figcaption></figure>

* You can also add additional text.

### Add Other values

<figure><img src="https://1608311007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSr8m3Ldc2W7Qqq1jsjgC%2Fuploads%2F41eIdR0Jg4zE4iTrDj3m%2Fimage.png?alt=media&#x26;token=1497ac88-80b3-4545-83b8-f6147ac2bff2" alt=""><figcaption></figcaption></figure>

* With the Other Values option,  the columns can be viewed in [Gallery details](https://app.gitbook.com/o/cYcNMspJTmyfByvJ8hY7/s/Sr8m3Ldc2W7Qqq1jsjgC/~/changes/95/dashboard/widget-types/gallery/gallery-details).

## Clean fields

<figure><img src="https://1608311007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSr8m3Ldc2W7Qqq1jsjgC%2Fuploads%2Fnmc12mMv99QZDUnqvsa7%2Fimage.png?alt=media&#x26;token=1c975774-a9ac-4dac-8866-7dbb413db4d2" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1608311007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSr8m3Ldc2W7Qqq1jsjgC%2Fuploads%2FiVYvDrGMBPQaH1VwIBsy%2Fimage.png?alt=media&#x26;token=6f3cd746-eedb-4e79-a12d-482f89dd9f6f" alt=""><figcaption></figcaption></figure>

* To clean any field, simply click on the X icon next to it.

<figure><img src="https://1608311007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSr8m3Ldc2W7Qqq1jsjgC%2Fuploads%2F5yQJVjkEbLtYwIe9Io8K%2Fimage.png?alt=media&#x26;token=82d9d213-3e67-4c96-9ce8-18290f37c3a6" alt=""><figcaption></figcaption></figure>

* For the Values section, you can click the Clear all button to quickly clean them all.

## Change to the Gallery type from another widget

<figure><img src="https://1608311007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSr8m3Ldc2W7Qqq1jsjgC%2Fuploads%2FvTeGHAL5w3qBJHhUlGVT%2Fimage.png?alt=media&#x26;token=83917e0e-97d9-4122-8209-46c731cd6a52" alt=""><figcaption></figcaption></figure>

* The Gallery chart option can be selected by opening the Settings slider and then clicking on the Properties option.

<figure><img src="https://1608311007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSr8m3Ldc2W7Qqq1jsjgC%2Fuploads%2FQ2c68VgDJM1wA8SE3shS%2Fimage.png?alt=media&#x26;token=330523dd-2251-4906-a7de-6714be1e34a5" alt=""><figcaption></figcaption></figure>

* Click on the View type dropdown and choose the Gallery chart icon to begin configuring your data model to the Gallery chart.

***

{% hint style="info" %}
You can use our [AI Visualization](https://endash-guidance-docs.gitbook.io/docs/dashboard/ai-visualization) to quickly create a Gallery. For example: *Create for me a Gallery with image\_url, filter image\_url that contains https, from March to May this year, sort it increasing, group by image\_url and title*
{% endhint %}