Display an Image Thumbnail using UI Component in the admin Grid in Adobe Commerce (Magento 2)

Here we learn that How To Display an Image Thumbnail in Adobe Commerce (Magento 2) admin Grid.

Overview of UI components

Adobe Commerce (Magento 2) UI components are used to represent distinct UI elements, such as tables, buttons, dialogs, and others. They are designed for simple and flexible user interface (UI) rendering.

Components are responsible for rendering the result page fragments and providing/supporting further interactions of JavaScript components and server. Using UI component we can display an Image thumbnail in grid also.

We should use UI components as much as possible and tend to do the same in Adobe Commerce (Magento 2) core.

1. Open the uiComponent File:
app/code/Webkul/Hello/view/adminhtml/ui_component/hello_index_listing.xml

2. Add an image column:

<column name="id">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="filter" xsi:type="string">textRange</item>
            <item name="sorting" xsi:type="string">asc</item>
            <item name="label" xsi:type="string" translate="true">ID</item>
        </item>
    </argument>
</column>
<!-- Image Column -->
<column name="filename" class="Webkul\Hello\Ui\Component\Listing\Columns\Thumbnail">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/thumbnail</item>
            <item name="sortable" xsi:type="boolean">false</item>
            <item name="altField" xsi:type="string">name</item>
            <item name="has_preview" xsi:type="string">1</item>
            <item name="label" xsi:type="string" translate="true">Image</item>
            <item name="sortOrder" xsi:type="number">20</item>
        </item>
    </argument>
</column>

3. Now we create Thumbnail Class:
app/code/Webkul/Hello/Ui/Component/Listing/Columns/Thumbnail.php

<?php
namespace Webkul\Blog\Ui\Component\Listing\Columns;

use Magento\Framework\View\Element\UiComponentFactory;
use Magento\Framework\View\Element\UiComponent\ContextInterface;

class Thumbnail extends \Magento\Ui\Component\Listing\Columns\Column
{
    const NAME = 'thumbnail';

    const ALT_FIELD = 'name';

    /**
     * @var \Webkul\Blog\Model\Hello\Image
     */
    protected $imageHelper;

    /**
     * @var \Magento\Framework\UrlInterface
     */
    protected $urlBuilder;

    /**
     * @param ContextInterface $context
     * @param UiComponentFactory $uiComponentFactory
     * @param \Webkul\Blog\Model\Image\Image $imageHelper
     * @param \Magento\Framework\UrlInterface $urlBuilder
     * @param array $components
     * @param array $data
     */
    public function __construct(
        ContextInterface $context,
        UiComponentFactory $uiComponentFactory,
        \Webkul\Blog\Model\Hello\Image $imageHelper,
        \Magento\Framework\UrlInterface $urlBuilder,
        array $components = [],
        array $data = [],
    ) {
        parent::__construct($context, $uiComponentFactory, $components, $data);
        $this->imageHelper = $imageHelper;
        $this->urlBuilder = $urlBuilder;
    }

    /**
     * Prepare Data Source
     *
     * @param array $dataSource
     * @return array
     */
    public function prepareDataSource(array $dataSource)
    {
        if (isset($dataSource['data']['items'])) {
            $fieldName = $this->getData('name');
            foreach ($dataSource['data']['items'] as & $item) {
                $filename = 'File-1672040965.png';
                $item[$fieldName . '_src'] = $this->imageHelper->getBaseUrl().$filename;
                $item[$fieldName . '_alt'] = $this->getAlt($item) ?: $filename;
                $item[$fieldName . '_orig_src'] = $this->imageHelper->getBaseUrl().$filename;
            }
        }

        return $dataSource;
    }

    /**
     * @param array $row
     *
     * @return null|string
     */
    protected function getAlt($row)
    {
        $altField = $this->getData('config/altField') ?: self::ALT_FIELD;
        return isset($row[$altField]) ? $row[$altField] : null;
    }
}

4. Now we create Image Class to get the image base path:
app/code/Webkul/Hello/Model/Hello/Image.php

<?php
namespace Webkul\Blog\Model\Hello;

use Magento\Framework\UrlInterface;
use Magento\Framework\Filesystem;

class Image
{
    /**
     * media sub folder
     * @var string
     */
    protected $subDir = 'webkul/image/'; //actual path is pub/media/webkul/image/
    
    /**
     * url builder
     *
     * @var \Magento\Framework\UrlInterface
     */
    protected $urlBuilder;

    /**
     * @var \Magento\Framework\Filesystem
     */
    protected $fileSystem;
    
    /**
     * @param UrlInterface $urlBuilder
     * @param Filesystem $fileSystem
     */
    public function __construct(
        UrlInterface $urlBuilder,
        Filesystem $fileSystem
    ) {
        $this->urlBuilder = $urlBuilder;
        $this->fileSystem = $fileSystem;
    }

    /**
     * get images base url
     *
     * @return string
     */
    public function getBaseUrl()
    {
        return $this->urlBuilder->getBaseUrl(['_type' => UrlInterface::URL_TYPE_MEDIA]).$this->subDir;
    }
}

Learn how to use UI components: click here

Adobe Commerce (Magento 2) UI components are used to represent distinct UI elements, such as tables, buttons, dialogs. Components are responsible for rendering the result page fragments and providing/supporting further interactions of JavaScript components and server.

UI components have different settings

Configuration settings (their list and names) are different among UI components; these settings contain constants, optional and required settings. Developers need to treat every UI component separately.

For any technical help, please reach out to us at support@webkul.com. Additionally, discover a variety of options to enhance your online store’s functionality by visiting the Adobe Commerce plugins section.

If you seek expert assistance or want to develop custom solutions, consider hiring Adobe Commerce Developers for your project.