> For the complete documentation index, see [llms.txt](https://en-ascent.webvista.studio/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://en-ascent.webvista.studio/sections/image-gallery.md).
# Image gallery
The image gallery section allows merchants to display multiple images on the page with customizable layout options for each image. By setting the width and height columns of the images, you can create a visually impactful display. This section is suitable for promoting product images, showcasing brand stories, or enhancing the visual atmosphere of the page.
### Key Features
1. **Customizable Image Columns**: Each image can have its own width and height column settings, providing flexible layouts. On desktop, up to **4 width columns** and **2 height columns** are supported, while on mobile, up to **2 width columns** and **4 height columns** are available.
2. **Responsive Design**: The image layout automatically adjusts based on the device (desktop or mobile), ensuring consistent display quality across all screen sizes.
3. **Multiple Image Display**: Upload multiple images to showcase products, brand stories, or other visual elements, creating a rich and engaging media wall.
4. **Image Scaling and Ratio Control**: Control the size and proportions of images by adjusting the column settings, allowing for regular or irregular grid effects.
### Image size recommendations
#### PC
The minimum unit size for PC is recommended to be **400 x 300px .jpg** (width 1/4, height 1/2). Other unit sizes can be calculated based on width and height ratios, such as a unit with a width of 2/4 and height of 2/2, which is recommended to be **800 x 600px .jpg**.
### Mobile
The minimum unit size for mobile is recommended to be **320 x 240px .jpg** (width 1/2, height 1/4). Other unit sizes can be calculated proportionally, such as a unit with a width of 2/2 and height of 2/4, which is recommended to be **640 x 480px .jpg**.
### Usage Suggestions
1. **Use High-Quality, Cohesive Images**: To maintain visual consistency and enhance the overall aesthetic, upload high-quality images with a unified style.
2. **Strategic Column Settings**: By controlling the width and height columns of each image, you can allocate more space to important images or create a visually appealing contrast with varied image sizes.
3. **Brand Storytelling**: Beyond product images, use the media wall to tell your brand’s story, showcase event highlights, or promote new products, increasing brand awareness and engagement.
4. **Optimize for Mobile**: Test the media wall on mobile devices to ensure it looks great. Adjust the column settings for each image to provide the best user experience on all devices.
The Image gallery section provides a dynamic and customizable way to display a wide array of images, enhancing both the visual appeal and the storytelling potential of your site.
### Section settings
| Setting | Type | Description | Default |
| --------------------- | --------- | ------------------- | --------------- |
| **Header** | | | |
| `show_section_header` | Checkbox | Show section header | `true` |
| `heading` | Text | Heading | `Photo gallery` |
| `description` | Rich text | Description | |
| `water_text` | Text | Watermark text | |
| `decorative_icon` | Select | Decorative icon | `none` |
| **Margin** | | | |
| `margin_top` | Range | Top margin | `0px` |
| `margin_bottom` | Range | Bottom margin | `80px` |
### Blocks
The image gallery section uses **Image** blocks to display individual images. You can add up to 8 image blocks.
#### Image
The Image block allows you to add an image with customizable layout, link, and optional title, border, and button.
| Setting | Type | Description | Default |
| ---------------------- | ---------------- | ---------------------- | ------------------------------------------------------------------------------------ |
| **Desktop layout** | | | |
| `columns` | Select | Desktop width columns | `1/4` |
| `rows` | Select | Desktop height columns | `1/2` |
| **Image** | | | |
| `image` | Image picker | Image | |
| `link` | URL | Link | |
| **Border** | | | |
| `show_border` | Checkbox | Show border | `false` |
| `border_color` | Color background | Border color | `linear-gradient(90deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.4) 100%)` |
| **Title** | | | |
| `heading` | Text | Heading | |
| `heading_size` | Select | Heading size | `medium` |
| `heading_color` | Color | Heading color | `#FFFFFF` |
| `heading_position` | Select | Heading position | `top-left` |
| `show_button` | Checkbox | Show button | `true` |
| **Mobile layout** | | | |
| `mobile_columns` | Select | Mobile width columns | `1/2` |
| `mobile_rows` | Select | Mobile height columns | `1/4` |
| `image_mobile` | Image picker | Mobile image | |
| `heading_size_mobile` | Select | Mobile heading size | `medium` |
| `heading_color_mobile` | Color | Mobile heading color | `#FFFFFF` |
---
# 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:
```
GET https://en-ascent.webvista.studio/sections/image-gallery.md?ask=
```
The question should be specific, self-contained, and written in natural language.
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.