### API Documentation for list-context.image-list Block Props Source: https://github.com/vtex-apps/store-image/blob/master/docs/README.md This section provides detailed API documentation for the properties available to the `list-context.image-list` block. It outlines each property's name, type, a brief description of its purpose, and its default value, enabling developers to customize image display behavior. ```APIDOC list-context.image-list props: images: Type: array Description: Array of objects that declares all the images to be rendered. Default: undefined height: Type: number Description: Image height for all images declared in the image object (in px). Default: undefined preload: Type: boolean Description: Preloads the first image in a list, prioritizing the image display over other assets. Default: false experimentalSetExplicitDimensions: Type: boolean Description: Sets explicit width and/or height attributes for an image, if width and/or height props are provided in px. Default: false ``` -------------------------------- ### Configure list-context.image-list Block with Slider Layout Source: https://github.com/vtex-apps/store-image/blob/master/docs/README.md This JSON configuration shows how to declare and configure the `list-context.image-list` block within a theme template. It includes `slider-layout` as a child block and defines properties such as `preload`, `height`, and an array of `images` with their respective `loading` behavior, `image` source, and `description`. ```json "list-context.image-list#demo": { "children": ["slider-layout#demo-images"], "props": { "preload": true, "height": 650, "images": [ { "loading": "eager", "image": "https://storecomponents.vteximg.com.br/arquivos/banner-infocard2.png", "description": "something something" }, { "loading": "lazy", "image": "https://storecomponents.vteximg.com.br/assets/vtex.file-manager-graphql/images/Group%207%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 } } ``` -------------------------------- ### Add Store Image App Dependency to manifest.json Source: https://github.com/vtex-apps/store-image/blob/master/docs/README.md This snippet demonstrates how to add the `vtex.store-image` app as a dependency in your theme's `manifest.json` file. This step is crucial for enabling the app's functionalities within your VTEX store theme. ```diff "dependencies ": { + "vtex.store-image": "0.x" } ``` -------------------------------- ### `link` Object Properties Source: https://github.com/vtex-apps/store-image/blob/master/docs/README.md Details the properties for the `link` object, which is nested within each image object in the `images` array. These properties define the URL and behavior when an image is clicked, including redirection, 'no-follow' attribute, and new tab opening. ```APIDOC link Object Properties: url: string - URL users will be redirected to when they click the image. (Default: undefined) noFollow: boolean - Whether the page owner endorses the linked URL the user was navigating on, i.e., if there is a business relationship between both pages (`true`) or (`false`). (Default: false) openNewTab: string - Whether a new tab will be opened on the browser (`true`) or (`false`). (Default: undefined) title: string - Text label used to identify the image in the Admin Site Editor. (Default: undefined) ``` -------------------------------- ### `image-list` Component Top-Level Properties Source: https://github.com/vtex-apps/store-image/blob/master/docs/README.md Defines the primary properties for the `image-list` component, controlling the overall image display and behavior, such as image array definition, global height, and layout shift prevention. ```APIDOC image-list Component Props: images: array - Array of objects that declares all the images to be rendered. (Default: undefined) height: number - Image height for all images declared in the `image` object (in `px`). (Default: undefined) experimentalPreventLayoutShift: boolean - Wraps the image in a `` tag with a preset `width` and/or `height` to minimize layout shift during page loading. (Default: undefined) ``` -------------------------------- ### `images` Array Object Properties Source: https://github.com/vtex-apps/store-image/blob/master/docs/README.md Describes the properties for individual image objects contained within the `images` array. These properties control specific image attributes like URLs, descriptions, dimensions, loading strategy, and associated analytics data. ```APIDOC images[] Object Properties: image: string - Image URL. (Default: undefined) mobileImage: string - Mobile image URL. (Default: undefined) description: string - Image description. (Default: undefined) link: object - Links a URL to the image being rendered. (Default: undefined) width: string / number - Image width (in `%` or `px`). (Default: 100%) loading: string - Loading strategy, either when the page loads (`'eager'`) or when closer to the viewport (`'lazy'`). (Default: 'eager') fetchpriority: string - The fetch priority hint (`'high'`, `'low'`, or `'auto'`). (Default: 'auto') analyticsProperties: string - Whether analytics props should be set (`'provided'`) or not (`'none'`). (Default: 'none') promotionId: string - The ID of the promotion associated with the event. (Default: undefined) promotionName: string - The name of the promotion associated with the event. (Default: undefined) promotionPosition: string - The name of the promotional creative slot associated with the event. (Default: undefined) promotionProductId: string - The ID of the product associated with the event. (Default: undefined) promotionProductName: string - The name of the product associated with the event. (Default: undefined) ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.