> 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/featured-review-slider/group-block-media/block-image.md).

# Block - Image

**Image** supplies the photograph on a slide of the [Featured review slider](/velare/customize-your-pages/storytelling/featured-review-slider.md), with a separate version for phones so the subject is not cropped out on a narrow screen. You can also point the picture at a product, which turns the review into a way into the catalogue: a shopper convinced by the quote can reach the item in one click instead of going back to search for it.

<figure><img src="/files/CoMSVzWK77ObRNaASIi0" 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 **Featured review slider** section.
3. Open the **Media** block for the slide you are building.
4. Click **Add block**, choose **Image**, then upload the picture and pick the product it relates to.
   {% endhint %}

*Result:* the picture fills the media half of the slide, cropped to the image ratio set on the section.

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

| Setting          | Description                                                                                                                                                                |
| ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Image**        | The picture desktop shoppers see on this slide, usually the customer or the product they are reviewing.                                                                    |
| **Mobile image** | A second version used on phones. Choose a tighter crop here, because the wide desktop shot loses its subject on a narrow screen.                                           |
| **Product**      | Makes the picture clickable and sends shoppers to that product page. Set it whenever the review is about something you sell, so a convinced shopper can act straight away. |

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

* Leaving **Mobile image** empty means phone shoppers see the desktop picture, cropped to fit the narrower slide.
* With no **Product** chosen, the picture is not clickable, and shoppers have to find the item themselves.
* The crop comes from the **Image ratio** set on the section, not from this block, so all slides stay consistent.

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

* [Group Block - Media](/velare/customize-your-pages/storytelling/featured-review-slider/group-block-media.md): the block this one lives inside
* [Featured review slider](/velare/customize-your-pages/storytelling/featured-review-slider.md): the section it appears in, and where the image ratio is set
* [Block - Quote](/velare/customize-your-pages/storytelling/featured-review-slider/group-block-content/block-quote.md): the review shown beside the picture


---

# 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/featured-review-slider/group-block-media/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.