> For the complete documentation index, see [llms.txt](https://uxsmart.gitbook.io/velare/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://uxsmart.gitbook.io/velare/customize-your-pages/storytelling/multi-content/theme-block-image.md).

# Group block - Image

**Image** is the block that puts a single picture into a [Multi-content](/velare/customize-your-pages/storytelling/multi-content.md) row. It is the plainest of the four blocks: no heading, no button, just a photograph that can be cropped to a set shape and pointed at a page. Use it when the picture is the message, for example a fabric close up beside a paragraph about how the garment is made, or a lifestyle shot that gives a row of text something to look at.

<figure><img src="/files/uq9Vk2GWRIURFe0ycg6P" alt=""><figcaption></figcaption></figure>

### Where to find it <a href="#where-to-find-it" id="where-to-find-it"></a>

{% hint style="success" %}
**Steps:**

1. Go to **Online Store > Themes > Customize**.
2. In the left sidebar, click the **Multi-content** section.
3. Click **Add block** and choose **Image**.
4. Upload the picture, choose its ratio, and add a link if it should be clickable.
   {% endhint %}

*Result:* the picture takes its place in the row, at the width and vertical position you set below.

### Settings <a href="#settings" id="settings"></a>

#### General <a href="#general" id="general"></a>

<figure><img src="/files/Tn2UNuRBxpRtm2weSamu" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="215">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Image</strong></td><td>The photograph shoppers see in this column of the row.</td></tr><tr><td><strong>Image ratio</strong></td><td><p>The shape the picture is cropped to, which is how you keep several blocks looking deliberate rather than mismatched.</p><ul><li><strong>Adapt to image</strong>: no cropping, the picture keeps its own shape.</li><li><strong>Square (1:1)</strong>: neutral, easy to pair with other blocks.</li><li><strong>Portrait (3:4)</strong>: taller, gives the row more height.</li><li><strong>Landscape (4:3)</strong>: wider, suits scenes rather than single objects.</li><li><strong>Product (4:5)</strong>: matches the crop used on product cards.</li><li><strong>Golden (1.618:1)</strong>: the widest option, closest to a banner strip.</li></ul></td></tr><tr><td><strong>Link</strong></td><td>Where a click on the picture leads, usually the product or collection it shows. Leave it blank and the picture is decorative only.</td></tr></tbody></table>

#### Block settings <a href="#block-settings" id="block-settings"></a>

<figure><img src="/files/aagblpVFtFjuPBY4a3hL" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="215">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Vertical alignment</strong></td><td><p>Where this picture sits against the taller blocks beside it.</p><ul><li><strong>Top</strong>: lines its top edge up with its neighbours.</li><li><strong>Middle</strong>: centres it, the safest choice when block heights differ.</li><li><strong>Bottom</strong>: drops it so the bottom edges match.</li></ul></td></tr><tr><td><strong>Width</strong></td><td>How much of the row this picture claims. Give the picture more when it carries the message, less when it only supports the text beside it.</td></tr></tbody></table>

### What changes on the storefront <a href="#what-changes" id="what-changes"></a>

* The block holds no wording, so a row made only of image blocks says nothing on its own. Pair it with a text block.
* **Vertical alignment** only shows an effect once the blocks in the row are different heights.
* Widths are set per block, so adding a block to an existing row usually means revisiting the widths of the others.

### Related pages <a href="#related-pages" id="related-pages"></a>

* [Multi-content](/velare/customize-your-pages/storytelling/multi-content.md): the section this block belongs to
* [Group block - Text](/velare/customize-your-pages/storytelling/multi-content/theme-block-text.md): the wording block usually placed beside it
* [Group block - Media with text](/velare/customize-your-pages/storytelling/multi-content/theme-block-media-with-text.md): use this instead when the picture needs a heading or button of its own


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://uxsmart.gitbook.io/velare/customize-your-pages/storytelling/multi-content/theme-block-image.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.