> 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/basic/image.md).
# Image
The **Image** block puts a picture inside a section, with a separate file for phones so a wide desktop photo does not lose its subject on a narrow screen. It is added inside a section alongside the wording it belongs with, and it can be made clickable so the picture leads to the collection or product it shows. The ratio, width, and corner settings let the same picture behave as a full width banner in one section and as a small card in another.
### How to add it
{% hint style="success" %}
**Steps:**
1. Go to **Online Store > Themes > Customize**.
2. In the left sidebar, click the section you want to add the picture to.
3. Click **Add block** and choose **Image**.
4. Upload the picture, choose an **Aspect Ratio**, then set the width for desktop and mobile.
{% endhint %}
*Result:* the picture appears in the section, cropped to the ratio you chose and sized to the widths you set.
### General settings
| Setting | Description |
| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Image** | The picture shoppers see on computers and other large screens. This is the only required file, and it is used everywhere unless a mobile version is added. |
| **Mobile image** | A second file used on phones. Upload a tighter crop here when the desktop photo has its subject off to one side and would be cut badly on a narrow screen. |
| **Link** | Where a click on the picture takes shoppers, usually the product or collection the picture is about. |
| **Aspect Ratio** |
The shape the picture is cropped to, which is what keeps several images in a row looking even:
Adapt (Default, keeps the original image ratio)
Square
Portrait
Landscape.
|
### Size
These settings control the dimensions the image block occupies within the section.
| Setting | Applies To | Description |
| ----------------------- | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Width** | Desktop |
How much horizontal room the picture takes on a computer screen.
Fit: the picture stays at the size the file and ratio give it
Fill: the picture spans the space it is given, which is how banner style images are made
Custom: you set the share of the width yourself
|
| **Custom Width** | Desktop |
Only visible when Width is Custom.
The exact share of the available width the picture takes, from 0% to 100%. Useful for pairing two pictures at 50% each.
|
| **Mobile Width** | Mobile | The same choice on phones, where Fill is the default because a picture narrower than the screen tends to look lost. |
| **Custom Mobile Width** | Mobile |
Only visible when Mobile Width is Custom.
The exact share of the phone screen the picture takes, from 0% to 100%.
|
| **Height** | Both |
How tall the picture is allowed to be.
Fit (Default, the height follows the picture and its ratio)
Fill (the picture stretches down to match the tallest thing beside it, which keeps a row of cards level).
|
| **Corner Radius** | Both |
How rounded the corners of the picture look.
Inherit (Default, follows the rounding set in Theme settings so it matches the rest of the store),
None (square corners)
Custom (you set the rounding for this picture only).
|
| **Custom Radius** | Both | *Only visible when Corner Radius is Custom*. The exact rounding for this picture, from 0px to 100px. Higher values soften the shape, and a very high value on a square image reads as a circle. |
### What changes on the storefront
* Shoppers see the picture inside the section, cropped to the ratio you chose rather than to whatever shape the file happened to be.
* Phones load the mobile file when one is supplied, so the subject stays visible on a narrow screen.
* With a link set, the whole picture becomes clickable, which gives shoppers a larger target than a button alone.
### Related pages
* [Icon](/velare/customize-your-pages/basic/icon.md): for small marks measured in pixels rather than pictures that scale
* [Video](/velare/customize-your-pages/basic/video.md): when motion tells the story better than a still
* [Group](/velare/customize-your-pages/layout/group.md): the container for placing a picture and its wording side by side
---
# 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/basic/image.md?ask=&goal=
```
`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.