Adobe Commerce 2.3 reached end of support in September 2022.

ImagePreview Component

The ImagePreview component implements an inline preview of an image, which is typically used in conjunction with a grid of image search results. Users can expand a more detailed preview of an image in-line with other image search results, and they have the ability to click on “next” or “previous” arrows to navigate to another image’s detailed preview.

Dependencies

The ImagePreview component has dependencies on the following components:

  • Column: app/code/Magento/Ui/view/base/web/js/grid/columns/column.js

Configuration options

Option Description Type Default Value
previewImageSelector The selector of the HTML element used for the image preview. String [data-image-preview]
visibleRecord Currently visible image. Int null
height Height of Image Preview. Int 0
displayedRecord Currently previewed image. Object {}
lastOpenedImage Previously opened image. Int null
statefull Defines a list of component properties whose values are automatically saved in the configured storage if they change. key is the property’s name and the value defines whether its saved. Object {sorting: true, lastOpenedImage: true}
template Path to the component’s .html template. String ui/grid/columns/image-preview

Examples

1
2
3
4
5
6
7
<column name="image-preview" component="Magento_Ui/js/grid/columns/image-preview">
    <settings>
        <label translate="true">Image Preview</label>
        <visible>true</visible>
        <sortable>false</sortable>
    </settings>
</column>

Source files

Extends Column:

Result

ImagePreview Component