This page is about version 0.4.3 of the app, which is not the most recent version. The latest stable version is 0.21.0.
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-image
app to your theme's dependencies in themanifest.json
, for example:
_10 "dependencies ": {_10+ "vtex.store-image": "0.x"_10 }
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-list
block, declaring theslider-layout
block as child. For example:
_27 "list-context.image-list#demo": {_27 "children": ["slider-layout#demo-images"],_27 "props": {_27 "height": 650,_27 "images": [_27 {_27 "image": "https://storecomponents.vteximg.com.br/arquivos/banner-infocard2.png",_27 "description": "something something"_27 },_27 {_27 "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",_27 "description": "something something"_27 }_27 ]_27 }_27 },_27_27 "slider-layout#demo-images": {_27 "props": {_27 "itemsPerPage": {_27 "desktop": 1,_27 "tablet": 1,_27 "phone": 1_27 },_27 "infinite": true_27 }_27 },
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. | undefined |
images
array:
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 |
link
object:
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 |
:information_source: Use the admin's Site Editor to manage all images declared in the list-context.image-list
block.
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.