📢 Use this project, contribute to it or open issues to help evolve it using Store Discussion.

Store Image

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 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.

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 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`

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`
`width`	`string` / `number`	Image width (in `%` or `px`).	`100%`

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`

ℹ️ 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!

agnaldopsfilho/store-image