> For the complete documentation index, see [llms.txt](https://nextsky.gitbook.io/purity-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://nextsky.gitbook.io/purity-theme/group-sections/storytelling/gallery-image.md).

# Gallery image

**Gallery image** on a website captures attention, highlights promotions, delivers breaking news, optimizes space, engages users, enhances aesthetics, and facilitates rapid information dissemination.

### Section settings

#### General settings

<table data-full-width="false"><thead><tr><th>Setting</th><th>Description</th></tr></thead><tbody><tr><td>Section width</td><td><p>3 options for container</p><ul><li>Stretch width: span the section width regardless of screen size.</li><li>Fixed width: depends on your page content width in <strong>Theme settings</strong> <strong>-></strong> <strong>Layout</strong>.</li><li>Expand full width: takes up the entire space on the page and it usually resizes itself to fit the size of the screen.</li></ul></td></tr><tr><td>Color scheme</td><td>Select colors from <strong>Theme settings -> Colors</strong></td></tr><tr><td>Image ratio</td><td><p>The image ratio for the featured images of the blog posts:</p><ul><li><strong>Adapt to image</strong> - Uses the aspect ratio of the images. This prevents the images from being cropped.</li><li><strong>Portrait</strong> - Crops the images to use a 3:4 ratio.</li><li><strong>Square</strong> - Crops the images to use a 1:1 ratio</li><li><strong>Landscape</strong> - Crops the images to use a 4:3 ratio</li></ul></td></tr><tr><td>Image ratio</td><td>Customize the ratio of the image</td></tr><tr><td>Type</td><td><p>2 options for Type</p><ul><li><strong>Carousel</strong></li><li><strong>Marquee</strong></li></ul></td></tr><tr><td>Show blurred background</td><td>Enable a blurred background</td></tr><tr><td>Show Instagram icon on hover</td><td>Enable an Instagram icon on hover</td></tr></tbody></table>

#### Header settings

<table><thead><tr><th width="215">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Subheading</strong></td><td>The subheading of the section</td></tr><tr><td><strong>Heading</strong></td><td>The title of the section</td></tr><tr><td><strong>Enable heading underline animation</strong></td><td>Turn on an animated underline effect for headings. Switch off to keep a static look.</td></tr><tr><td><strong>Underline style</strong></td><td><p>Choose the underline’s look. Include:</p><ul><li><strong>Include</strong>: Simple underline – Clean straight line beneath the text.</li><li><strong>Curve stroke:</strong> Soft, hand-drawn curved stroke for a casual feel.</li><li><strong>Squiggle underline:</strong> Wavy line for a lively, attention-grabbing look.</li></ul><p><em>* Note: Only appears when</em> <strong>Enable heading underline animation</strong> <em>is enabled</em></p></td></tr><tr><td><strong>Underline color</strong></td><td>Pick the color used for the underline.<br><em>* Note: Only appears when</em> <strong>Enable heading underline animation</strong> <em>is enabled</em></td></tr><tr><td><strong>Description</strong></td><td>The description of the section</td></tr><tr><td><strong>Alignment</strong></td><td><p>The position of the heading and description.</p><ul><li><strong>Left</strong></li><li><strong>Center</strong></li><li><strong>Right</strong></li></ul></td></tr></tbody></table>

#### Carousel settings <a href="#settings-for-carousel" id="settings-for-carousel"></a>

| Setting                      | Description                                         |
| ---------------------------- | --------------------------------------------------- |
| **Show navigation**          | Display the next and back controls for the carousel |
| **Show pagination**          | Display the pagination for the carousel             |
| **Column gap**               | Define the spacing between 2 items                  |
| **Items per row on desktop** | Number of columns to display on desktop devices.    |
| **Items per row on mobile**  | Number of columns to display on mobile devices.     |

#### Section padding <a href="#section-padding" id="section-padding"></a>

| Setting | Description                                |
| ------- | ------------------------------------------ |
| Top     | Customize the top margin of the section    |
| Bottom  | Customize the bottom margin of the section |

#### Section divider

Show divider: Enable a divider

### Block settings

#### Image

| Settings | Description                                            |
| -------- | ------------------------------------------------------ |
| Image    | Upload desired image ***(303px x 303px recommended)*** |
| Link     | The link URL you want to add                           |