# Image gallery

<figure><img src="https://4207195275-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fp5czJlcYNU7vFLQkGMwL%2Fuploads%2FR7ZBVKHNx8Hka0k9j3Hp%2Fimage.png?alt=media&#x26;token=354f26b7-5226-4ae3-80e2-976ae39c1672" alt=""><figcaption></figcaption></figure>

The main purpose of this section is providing the merchants the ability to easily list images in a single gallery with different options for layout, image ratios, etc.

The main settings in the section are the ones listed [here](https://bigstart.gitbook.io/marble-documentation/content-sections/common-settings) with some additional ones listed below.

* Images heigh -  defining the images ratio
* Full width - checkbox defining the width of the section
* Side margins - checkbox enabling spacing on the screen sides
* Items per row/slide - Desktop
* Items per row/slide - Mobile

### Slider settings

* Enable slider - turning on the slider functionality
* Enable slider arrows - show/hide arrows over the main slider
* Enable slider thumbs - will show a list of small thumbs beneath the slider for easy navigation through the main slider
* Enable slider paging - adding a pagination actions below the main slider
* Enable zoom - clicking an image will show the image in a zoom-able popup

### Section blocks

Each image is added as a separate block where the image is mandatory field. The additional URL field can be set in case you need to link the image to a separate page or external site.

### Usage examples

Here are some usage examples:

<figure><img src="https://4207195275-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fp5czJlcYNU7vFLQkGMwL%2Fuploads%2F3NvQHHTgwNG88QqnUNKk%2Fimage.png?alt=media&#x26;token=c5f46fc3-4048-47be-9c88-7e15f9e99aa5" alt=""><figcaption><p>With enabled slider and pagination</p></figcaption></figure>

<figure><img src="https://4207195275-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fp5czJlcYNU7vFLQkGMwL%2Fuploads%2FAMvkPnQmjn2lZLYebzqh%2Fimage.png?alt=media&#x26;token=bc21c9f8-fd8c-4bf9-8401-1c6e0b8d3d2d" alt=""><figcaption><p>Enabled slider with 3 items per slide, enabled thumbs</p></figcaption></figure>

<figure><img src="https://4207195275-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fp5czJlcYNU7vFLQkGMwL%2Fuploads%2FmGCdt1Vc7N1qRbzonyfx%2Fimage.png?alt=media&#x26;token=eb384cc4-5664-463e-9bd7-fcd9e213fd56" alt=""><figcaption><p>Disabled sliders</p></figcaption></figure>
