How to Show a Thumbnail Image in the Admin Grid Using UI Component?

0

In my last blog, we have learned “Magento 2 How to create Image Upload field in the custom module using UI Component”.
Now we will continue to “How to show a thumbnail image in the admin grid using UI Component.”

This component file contains all grid elements that will be handled by XML file with many default build-in components of Magento like search, filter, export, button, mass action.

We will modify a “brand_image” column which shows the image thumbnail.

Let’s take the example of brand module as we have used previously.

Step 1: Update Grid UI Component file.

Open yournamespace_brand_branddetails_listing.xml in following path: app/code/Yournamespace/Brand/view/adminhtml/ui_component

This component file contains all grid elements that will be handled by XML file with many default build-in components of Magento like search, filter, export, button, mass action.

We will modify a “brand_image” column which shows the image thumbnail.

  <column name="brand_image" class="Yournamespace\Brand\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="resizeEnabled" xsi:type="boolean">true</item>
			<item name="resizeDefaultWidth" xsi:type="string">200</item>
			<item name="altField" xsi:type="string">title</item>
			<item name="has_preview" xsi:type="string">1</item>
			<item name="sortable" xsi:type="boolean">false</item>
			<item name="label" xsi:type="string" translate="true">Brand Image</item>
			<item name="sortOrder" xsi:type="number">10</item>
		</item>
	</argument>
</column>

Step 2: Now we create thumbnail Class

Create Thumbnail.php in following path Yournamespace\Brand\Ui\Component\Listing\Column

<?php
namespace Yournamespace\Brand\Ui\Component\Listing\Column;
use Magento\Catalog\Helper\Image;
use Magento\Framework\UrlInterface;
use Magento\Framework\View\Element\UiComponentFactory;
use Magento\Framework\View\Element\UiComponent\ContextInterface;
use Magento\Store\Model\StoreManagerInterface;
use Magento\Ui\Component\Listing\Columns\Column;

class Thumbnail extends Column
{   
	protected $storeManager;

	public function __construct(
		ContextInterface $context,
		UiComponentFactory $uiComponentFactory,
		StoreManagerInterface $storemanager,
		\Magento\Framework\UrlInterface $urlBuilder,
		array $components = [],
		array $data = []
	) {
		parent::__construct($context, $uiComponentFactory, $components, $data);
		$this->_storeManager = $storemanager;
		$this->urlBuilder = $urlBuilder;
	}

	public function prepareDataSource(array $dataSource)
	{
		$mediaDirectory = $this->_storeManager->getStore()->getBaseUrl(\Magento\Framework\UrlInterface::URL_TYPE_MEDIA);
		if (isset($dataSource['data']['items'])) {  
			$fieldName = 'brand_image';
			foreach ($dataSource['data']['items'] as & $item) {
				$imageUrl = $item['brand_image_url'];
				$item['brand_image'] = $imageUrl;								
				$item[$fieldName . '_src'] = $imageUrl;
				$item[$fieldName . '_alt'] = $item['title'];
				$item[$fieldName . '_link'] = $this->urlBuilder->getUrl(
					'brand/branddetails/editbrand',
					['entity_id' => $item['entity_id'], 'store' => $this->context->getRequestParam('store')]
				);                
				$item[$fieldName . '_orig_src'] = $imageUrl;
			}
		}
		return $dataSource;
	}
}

Above all are very easy steps to show a thumbnail image on the grid.

Just read all things carefully and implement it on your custom module to achieve this functionality.

Thank you for reading this post.

About the author

I’m Magento Certified Developer having quite 5 years of commercial development expertise in Magento as well as in Shopify. I’ve worked primarily with the Magento and Shopify e-commerce platform, managing the complexities concerned in building e-commerce solutions tailored to a client’s specific desires.

Related Posts

Leave a Reply