{"id":2793,"date":"2024-12-31T20:26:31","date_gmt":"2024-12-31T20:26:31","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/how-to-add-image-thumbnail-column-in-magento-2-admin-ui-grid-the-complete-method\/"},"modified":"2025-03-17T05:57:02","modified_gmt":"2025-03-17T05:57:02","slug":"add-image-thumbnail-column-in-magento-2-admin-ui-grid","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/add-image-thumbnail-column-in-magento-2-admin-ui-grid\/","title":{"rendered":"How to Add Image Thumbnail Column in Magento 2 Admin UI Grid \u2013 The Complete Method"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Hey, Magento devs   Are you looking for a method to&nbsp;<em><strong>add image thumbnail column in Magento 2 admin UI grid<\/strong><\/em>? Here\u2019s the complete method to do that.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/business.adobe.com\/products\/magento\/magento-commerce.html\" target=\"_blank\" rel=\"noreferrer noopener\">Magento<\/a>&nbsp;is an e-commerce platform for businesses looking for customized selling solutions. The main reason is\u2014it 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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Let\u2019s say you\u2019ve 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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Earlier, we showed you a method to&nbsp;<a href=\"https:\/\/meetanshi.com\/blog\/add-image-field-and-preview-image-in-magento-2-admin-ui-component-form\/\" target=\"_blank\" rel=\"noreferrer noopener\">add image field and preview image in admin UI component<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In this Magento solution post, find the complete step-wise method to add image thumbnail column in Magento 2 admin UI grid.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to Add Image Thumbnail Column in Magento 2 Admin UI Grid?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">You can add image thumbnail column in Magento 2 admin UI grid by using the native&nbsp;<a href=\"https:\/\/developer.adobe.com\/commerce\/frontend-core\/ui-components\/components\/thumbnail-column\/\" target=\"_blank\" rel=\"noreferrer noopener\">ThumbnailColumn<\/a>&nbsp;component.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Simply, follow these steps:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Open the UI Component file:&nbsp;<em><strong>app\/code\/Vendor\/Extension\/view\/adminhtml\/ui_component\/{your_grid_file}.xml&nbsp;<\/strong><\/em>Add the following code inside the &lt;columns&gt; tag to create a column for the image thumbnail:<\/li>\n<\/ul>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;column name=\"image_filename\" class=\"Vendor\\Extension\\Ui\\Component\\Listing\\Column\\Thumbnail\">\n            &lt;argument name=\"data\" xsi:type=\"array\">\n                &lt;item name=\"config\" xsi:type=\"array\">\n                    &lt;item name=\"component\" xsi:type=\"string\">Magento_Ui\/js\/grid\/columns\/thumbnail&lt;\/item>\n                    &lt;item name=\"sortable\" xsi:type=\"boolean\">false&lt;\/item>\n                    &lt;item name=\"altField\" xsi:type=\"string\">name&lt;\/item>\n                    &lt;item name=\"has_preview\" xsi:type=\"string\">1&lt;\/item>\n                    &lt;item name=\"label\" xsi:type=\"string\" translate=\"true\">Image&lt;\/item>\n                    &lt;item name=\"sortOrder\" xsi:type=\"number\">20&lt;\/item>\n                &lt;\/item>\n            &lt;\/argument>\n        &lt;\/column><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Now,create&nbsp;<strong>Thumbnail.php<\/strong>&nbsp;at&nbsp;<em><strong>app\/code\/Vendor\/Extension\/Ui\/Component\/Listing\/Column\/<\/strong><\/em>&nbsp;directory and add the following code:<\/li>\n<\/ul>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;?php\n\nnamespace Vendor\\Extension\\Ui\\Component\\Listing\\Column;\n\nuse Magento\\Ui\\Component\\Listing\\Columns\\Column;\nuse Magento\\Framework\\View\\Element\\UiComponent\\ContextInterface;\nuse Magento\\Framework\\View\\Element\\UiComponentFactory;\nuse Magento\\Store\\Model\\StoreManagerInterface;\nuse Magento\\Framework\\UrlInterface;\n\nclass Thumbnail extends Column\n{\n\n    const NAME = 'thumbnail';\n\n    const ALT_FIELD = 'Image';\n\n    protected $storeManager;\n\n    public function __construct(\n        ContextInterface $context,\n        UiComponentFactory $uiComponentFactory,\n        StoreManagerInterface $storeManager,\n        array $components = [],\n        array $data = []\n    )\n    {\n        $this->storeManager = $storeManager;\n        parent::__construct($context, $uiComponentFactory, $components, $data);\n    }\n\n    public function prepareDataSource(array $dataSource)\n    {\n        if (isset($dataSource['data']['items'])) {\n            $fieldName = $this->getData('name');\n            foreach ($dataSource['data']['items'] as &amp; $item) {\n                $filename = $item[$fieldName];\n                $item[$fieldName . '_src'] = $this->getImage($filename);\n                $item[$fieldName . '_alt'] = $this->getAlt($item) ?: $filename;\n                $item[$fieldName . '_orig_src'] = $this->getImage($filename);\n            }\n        }\n\n        return $dataSource;\n    }\n\n    public function getImage($imagePath){\n        if($imagePath!=\"\"){\n            return $this->storeManager->getStore()->getBaseUrl(UrlInterface::URL_TYPE_MEDIA).'\/folder\/'.$imagePath;\n        }\n        return \"\";\n    }\n\n    protected function getAlt($row)\n    {\n        $altField = $this->getData('config\/altField') ?: self::ALT_FIELD;\n        return isset($row[$altField]) ? $row[$altField] : null;\n    }\n}<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Note:<\/strong>&nbsp;In the above codes, replace the Vendor, Module, Label, and Image Path as per your requirements.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The above solution extends a new Thumbnail class from the column class and uses the&nbsp;<code>getImage<\/code>&nbsp;function to generate a URL for the image.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">I hope the solution will help you to add image thumbnail column in Magento 2 admin UI grid.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Loved this solution? Give it five stars and share it with your dev friends.  <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Thank you for reading  <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hey, Magento devs Are you looking for a method to&nbsp;add image thumbnail column in Magento 2 admin UI grid? Here\u2019s the complete method to do&#8230;<\/p>\n","protected":false},"author":13,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[34],"tags":[],"class_list":["post-2793","post","type-post","status-publish","format-standard","hentry","category-magento"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/2793","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/comments?post=2793"}],"version-history":[{"count":3,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/2793\/revisions"}],"predecessor-version":[{"id":9348,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/2793\/revisions\/9348"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=2793"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=2793"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=2793"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}