VTEX Developer Portal

All ContributorsAll Contributors

The Store Image app exports the list-context.image-list block, which is responsible for working with image content in the store's theme.

store-imagestore-image

Configuration

  1. Add the store-image app to your theme's dependencies in the manifest.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.

  1. In any desired theme template, add the list-context.image-list block, declaring the slider-layout block 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 nameTypeDescriptionDefault value
imagesarrayArray of objects declaring all desired images to be rendered.undefined
heightnumberImage height for all images declared in the image object (in px).undefined
preloadbooleanPreloads the first image in a list, which helps prioritizing the display of images over other assetsfalse

image-list props

Prop nameTypeDescriptionDefault value
imagesarrayArray of objects declaring all desired images to be rendered.undefined
heightnumberImage height for all images declared in the image object (in px).undefined
  • images array:
Prop nameTypeDescriptionDefault value
imagestringImage URL.undefined
mobileImagestringMobile image URL.undefined
descriptionstringImage description.undefined
linkobjectLinks an URL to the image being rendered.undefined
widthstring / numberImage width (in % or px).100%
  • link object:
Prop nameTypeDescriptionDefault value
urlstringURL users will be redirected to when clicking on the image.undefined
noFollowbooleanWhether 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
openNewTabstringWhether a new tab on browser will be opened (true) or not (false) .undefined
titlestringText 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.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!

Updated about a month ago


Store Image


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.