Back to Top

Display an Image Thumbnail using UI Component in the admin Grid in Magento 2

Updated 23 February 2024

Here we learn in Magento2 – How To Display an Image Thumbnail in the admin Grid.


Overview of UI components

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

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

2. Add an image column:

Searching for an experienced
Magento 2 Company ?
Find out More
<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;
    }
}
Display an Image Thumbnail

Learn how to use UI components: click here

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

. . .

Leave a Comment

Your email address will not be published. Required fields are marked*


2 comments

  • Neil Carpenter
    • Webkul Support
  • Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home