The Store Image app exports the list-context.image-list block, which is responsible for working with image content in the store's theme.
Configuration
- Add the
store-imageapp to your theme's dependencies in themanifest.json, for example:
"dependencies ": {
+ "vtex.store-image": "0.x"
}
You are now able to use the list-context.image-list block, exported by the Store Image app. The block allows you to display images in your store with a higher degree of composability, since you can use it along with other list-context blocks to create a more flexible and customizable image slider.
- In any desired theme template, add the
list-context.image-listblock, declaring theslider-layoutblock as child. For example:
"list-context.image-list#demo": {
"children": ["slider-layout#demo-images"],
"props": {
"preload": true,
"height": 650,
"images": [
{
"image": "https://storecomponents.vteximg.com.br/arquivos/banner-infocard2.png",
"description": "something something"
},
{
"image": "https://storecomponents.vteximg.com.br/assets/vtex.file-manager-graphql/images/Group%207%20(1)%20(1)%20(1)%20(1)%20(1)___c6b3ed853fb16a08b265753b50e0c57a.png",
"description": "something something"
}
]
}
},
"slider-layout#demo-images": {
"props": {
"itemsPerPage": {
"desktop": 1,
"tablet": 1,
"phone": 1
},
"infinite": true
}
},
Note that the slider-layout block, exported from the Slider Layout app, is given as a child of list-context.image-list. It is responsible for defining which images will be displayed, as well as their behavior once rendered.
list-context.image-list props
| Prop name | Type | Description | Default value |
|---|---|---|---|
images | array | Array of objects declaring all desired images to be rendered. | undefined |
height | number | Image height for all images declared in the image object (in px). | undefined |
preload | boolean | Preloads the first image in a list, which helps prioritizing the display of images over other assets | false |
image-list props
| Prop name | Type | Description | Default value |
|---|---|---|---|
images | array | Array of objects declaring all desired images to be rendered. | undefined |
height | number | Image height for all images declared in the image object (in px). | undefined |
imagesarray:
| Prop name | Type | Description | Default value |
|---|---|---|---|
image | string | Image URL. | undefined |
mobileImage | string | Mobile image URL. | undefined |
description | string | Image description. | undefined |
link | object | Links an URL to the image being rendered. | undefined |
width | string / number | Image width (in % or px). | 100% |
linkobject:
| Prop name | Type | Description | Default value |
|---|---|---|---|
url | string | URL users will be redirected to when clicking on the image. | undefined |
noFollow | boolean | Whether the linked URL is endorsed by the owner of the page the user was navigating on i.e. if there is a commercial relationship between both pages (true) or not (false). | false |
openNewTab | string | Whether a new tab on browser will be opened (true) or not (false) . | undefined |
title | string | Text label used to identify the image in the admin's Site Editor. | undefined |
Use the admin's Site Editor to manage all images declared in the
list-context.image-listblock.
Customization
The block still doesn't have CSS Handles for its specific customization.
All CSS Handles available for the Image block are the ones available for the slider-layout block. Take a look at the Customization section in the Slider Layout documentation.
Note that the image-slider uses our vtex.slider-layout app, so all the CSS namespaces defined by it are also available for image-slider. Take a look at Slider-Layout.