# Gallery

Quickly build an image gallery utilizing Story's design language. The Gallery section is an easy-to-build section that includes many features to customize the layout. Use multiple gallery sections to combine different layout styles:

<figure><img src="https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2F1Tbel80t8ZWfLqQOe2I6%2Fgallery%20story%201.jpg?alt=media&#x26;token=e7a4a7a4-5226-485a-ba44-e480405ed18f" alt=""><figcaption><p><strong>Combination of two gallery sections: 3 images, 2 images</strong></p></figcaption></figure>

Create different layouts by choosing the number of images shown in each section:

<figure><img src="https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FgmWH8n1zFJWGwPumCYf5%2FStory%20gallery%202.jpg?alt=media&#x26;token=7c4f56c8-680d-4788-98cd-4327bfeb80a7" alt=""><figcaption><p><strong>Combination: 2 images, 1 image</strong></p></figcaption></figure>

## Section settings

* The "Scale images" option will evenly size images in the row:

<figure><img src="https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2F6IZFA4tRyC4e9GyFRMdr%2Fadjust%20row%20sizing.gif?alt=media&#x26;token=9b29bd1e-d973-4b7f-bdfe-dd773da0617c" alt=""><figcaption><p><strong>Scale images checkbox</strong></p></figcaption></figure>

* The "Space images" checkbox can be used to toggle spacing **between** images on the same row:

<figure><img src="https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2Fm7WsjUwnTtXzOdGc9jQM%2FStory%20gallery%20spacing%20option.jpg?alt=media&#x26;token=c5b5f9ba-0132-494a-904b-c68ebac51adf" alt=""><figcaption><p><strong>Space images checkbox</strong></p></figcaption></figure>

* Use section top and bottom padding to adjust the padding between sections.

## Block settings

The gallery images are interactive. When a shopper clicks on a gallery image, a fully zoomed version of the image can be displayed or alternatively, a YouTube or Vimeo video can be shown:

<figure><img src="https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FXxAX1tKOldxOBvnuP3gj%2Fdemo%20zoom.gif?alt=media&#x26;token=6c7d51b8-7b0e-44ad-bec8-30a0ed5e10ae" alt=""><figcaption><p><strong>Example of image zoom</strong></p></figcaption></figure>

### Zoom

* Keep the "Link" field blank to use the image zoom feature:

<figure><img src="https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2Fpv9e4djhaAN3xY3sQw9S%2Fzoom%20version%20gallery%20story.jpg?alt=media&#x26;token=3eec8abf-29f1-4db1-9f84-8bb5628fd184" alt=""><figcaption></figcaption></figure>

### Video

* To display a popup **YouTube or Vimeo video**, add the URL address for the video in the "Link" field:

<figure><img src="https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FnYmcjYnVktTy1FUX0DXJ%2Fyoutube%20link.jpg?alt=media&#x26;token=bcf8faf0-54b1-4911-885c-12fedd239ba4" alt=""><figcaption></figcaption></figure>