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


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 '16 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 – Prashant Valanda Dec 19 '16 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 '18 at 7:13
  • No this have any special purpose that is only for display image preview on grid – Prashant Valanda Jan 31 '18 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 '18 at 7:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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