How to Add Image Thumbnail Column in Magento 2 Admin UI Grid – The Complete Method

Hey, Magento devs 👋 Are you looking for a method to add image thumbnail column in Magento 2 admin UI grid? Here’s the complete method to do that.

Magento is an e-commerce platform for businesses looking for customized selling solutions. The main reason is—it is open-source and can be customized as per the needs. One such custom requirement can be to add thumbnail column to admin UI grid in Magento 2, just like the product grid.

Let’s say you’ve created a custom form in Magento 2, which requires the customers to upload an image file of their ID proof for verification. This image file is stored in the Magento 2 database, along with other information and you want to display its thumbnail in a separate column in admin UI grid.

Earlier, we showed you a method to add image field and preview image in admin UI component.

In this Magento solution post, find the complete step-wise method to add image thumbnail column in Magento 2 admin UI grid.

How to Add Image Thumbnail Column in Magento 2 Admin UI Grid?

You can add image thumbnail column in Magento 2 admin UI grid by using the native ThumbnailColumn component.

Simply, follow these steps:

• Open the UI Component file: app/code/Vendor/Extension/view/adminhtml/ui_component/{your_grid_file}.xml Add the following code inside the <columns> tag to create a column for the image thumbnail:
  
  <column name="image_filename" class="Vendor\Extension\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="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>

  1 2 3 4 5 6 7 8 9 10 11 12

  <column name="image_filename" class="Vendor\Extension\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="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>

• Now, create Thumbnail.php at app\code\Vendor\Extension\Ui\Component\Listing\Column directory and add the following code:
  
  <?php namespace Vendor\Extension\Ui\Component\Listing\Column; use Magento\Ui\Component\Listing\Columns\Column; use Magento\Framework\View\Element\UiComponent\ContextInterface; use Magento\Framework\View\Element\UiComponentFactory; use Magento\Store\Model\StoreManagerInterface; use Magento\Framework\UrlInterface; class Thumbnail extends Column { const NAME = 'thumbnail'; const ALT_FIELD = 'Image'; protected $storeManager; public function __construct( ContextInterface $context, UiComponentFactory $uiComponentFactory, StoreManagerInterface $storeManager, array $components = [], array $data = [] ) { $this->storeManager = $storeManager; parent::__construct($context, $uiComponentFactory, $components, $data); } public function prepareDataSource(array $dataSource) { if (isset($dataSource['data']['items'])) { $fieldName = $this->getData('name'); foreach ($dataSource['data']['items'] as & $item) { $filename = $item[$fieldName]; $item[$fieldName . '_src'] = $this->getImage($filename); $item[$fieldName . '_alt'] = $this->getAlt($item) ?: $filename; $item[$fieldName . '_orig_src'] = $this->getImage($filename); } } return $dataSource; } public function getImage($imagePath){ if($imagePath!=""){ return $this->storeManager->getStore()->getBaseUrl(UrlInterface::URL_TYPE_MEDIA).'/folder/'.$imagePath; } return ""; } protected function getAlt($row) { $altField = $this->getData('config/altField') ?: self::ALT_FIELD; return isset($row[$altField]) ? $row[$altField] : null; } }

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59

  <?php   namespace Vendor\Extension\Ui\Component\Listing\Column;   use Magento\Ui\Component\Listing\Columns\Column; use Magento\Framework\View\Element\UiComponent\ContextInterface; use Magento\Framework\View\Element\UiComponentFactory; use Magento\Store\Model\StoreManagerInterface; use Magento\Framework\UrlInterface;   class Thumbnail extends Column {       const NAME = 'thumbnail';       const ALT_FIELD = 'Image';       protected $storeManager;       public function __construct(         ContextInterface $context,         UiComponentFactory $uiComponentFactory,         StoreManagerInterface $storeManager,         array $components = [],         array $data = []     )     {         $this->storeManager = $storeManager;         parent::__construct($context, $uiComponentFactory, $components, $data);     }       public function prepareDataSource(array $dataSource)     {         if (isset($dataSource['data']['items'])) {             $fieldName = $this->getData('name');             foreach ($dataSource['data']['items'] as & $item) {                 $filename = $item[$fieldName];                 $item[$fieldName . '_src'] = $this->getImage($filename);                 $item[$fieldName . '_alt'] = $this->getAlt($item) ?: $filename;                 $item[$fieldName . '_orig_src'] = $this->getImage($filename);             }         }           return $dataSource;     }       public function getImage($imagePath){         if($imagePath!=""){             return $this->storeManager->getStore()->getBaseUrl(UrlInterface::URL_TYPE_MEDIA).'/folder/'.$imagePath;         }         return "";     }       protected function getAlt($row)     {         $altField = $this->getData('config/altField') ?: self::ALT_FIELD;         return isset($row[$altField]) ? $row[$altField] : null;     } }

Note: In the above codes, replace the Vendor, Module, Label, and Image Path as per your requirements.

The above solution extends a new Thumbnail class from the column class and uses the getImage function to generate a URL for the image.

I hope the solution will help you to add image thumbnail column in Magento 2 admin UI grid.

Loved this solution? Give it five stars and share it with your dev friends. 😃

Thank you for reading 🍀