I have added a custom admin grid using ui component, now I want to add a thumbnail field in the grid. Please help me to do the same..

1 Answer 1


Add below column code in your ui_component

<column name="image" class="Vendor\Module\Ui\Component\Listing\Column\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="has_preview" xsi:type="string">1</item>                    
                    <item name="label" xsi:type="string" translate="true">Slider Image</item>

Thumbnail class add code at Vendor\Module\Ui\Component\Listing\Column\Thumbnail.php as below

 * Copyright © 2016 Magento. All rights reserved.
 * See COPYING.txt for license details.
namespace Vendor\Module\Ui\Component\Listing\Column;

use Magento\Framework\View\Element\UiComponentFactory;
use Magento\Framework\View\Element\UiComponent\ContextInterface;
use Magento\Store\Model\StoreManagerInterface;

class Thumbnail extends \Magento\Ui\Component\Listing\Columns\Column
    protected $storeManager;

     * @param ContextInterface $context
     * @param UiComponentFactory $uiComponentFactory
     * @param \Magento\Catalog\Helper\Image $imageHelper
     * @param \Magento\Framework\UrlInterface $urlBuilder
     * @param array $components
     * @param array $data
    public function __construct(
        ContextInterface $context,
        UiComponentFactory $uiComponentFactory,
        StoreManagerInterface $storeManager,
        array $components = [],
        array $data = []
    ) {
        parent::__construct($context, $uiComponentFactory, $components, $data);
        $this->storeManager = $storeManager;

     * Prepare Data Source
     * @param array $dataSource
     * @return array
    public function prepareDataSource(array $dataSource)
        if(isset($dataSource['data']['items'])) {
            $fieldName = $this->getData('name');
            $path = $this->storeManager->getStore()->getBaseUrl(
            foreach ($dataSource['data']['items'] as & $item) {               
                $item[$fieldName . '_src'] = $path.$item['image'];
                $item[$fieldName . '_alt'] = $item['slider_title'];
                $item[$fieldName . '_orig_src'] = $path.$item['image'];

        return $dataSource;

In above code change field name as per your field

  • Thanks @prashant .. I need two thumbnail fields in admin grid. For that what I need to do?
    – E.B
    Dec 19, 2016 at 9:46
  • 1
    You need to copy column code two time in ui_component file and you need to create two class file one for each Dec 19, 2016 at 9:48
  • The above thumnail.php is only used to display the image in admin grid Or Is this have any special purpose while saving a uploaded image @Prashant Valanda.
    – Jaisa
    Jan 31, 2018 at 7:13
  • No this have any special purpose that is only for display image preview on grid Jan 31, 2018 at 7:22
  • [(I too have this thumnail.php file in my module which handling for only a single image and saved in DB), But Now I have added multiple image fields(like small, medium, large,extralarge images). And having a issue that images are saved in pub/media/myfolder, But failed to save in DB. So am I need to handle this in thumnail.php
    – Jaisa
    Jan 31, 2018 at 7:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.