Display Multiple Images In UI Grid Column Magento2 – sometime we need that we have to display more than one image in a UI grid column. so its a pretty easy just you have to follow some simple steps to achieve this.<\/p>\n
1 => Just open your ui_component xml file and write the necessary code inside your item tag in a column where you want to display multiple images.<\/p>\n
<item name=\"bodyTmpl\" xsi:type=\"string\">ui\/grid\/cells\/html<\/item><\/pre>\nlets make it little bit easy with an example.
\nhere i have created a column, where i want to display more than one image.<\/p>\n<column name=\"image\" class=\"Webkul\\MultiImageExample\\Ui\\Component\\Listing\\Columns\\MultipleImages\">\r\n <argument name=\"data\" xsi:type=\"array\">\r\n <item name=\"config\" xsi:type=\"array\">\r\n <item name=\"component\" xsi:type=\"string\">Magento_Ui\/js\/grid\/columns\/thumbnail<\/item>\r\n <item name=\"altField\" xsi:type=\"string\">name<\/item>\r\n <item name=\"has_preview\" xsi:type=\"string\">0<\/item>\r\n <item name=\"sortable\" xsi:type=\"boolean\">false<\/item>\r\n <item name=\"bodyTmpl\" xsi:type=\"string\">ui\/grid\/cells\/html<\/item>\r\n <item name=\"label\" xsi:type=\"string\" translate=\"true\">Images<\/item>\r\n <item name=\"sortOrder\" xsi:type=\"number\">1<\/item>\r\n <\/item>\r\n <\/argument>\r\n<\/column><\/pre>\nyou have to also define a renderer and here renderer is<\/p>\n
<column name=\"image\" class=\"Webkul\\MultiImageExample\\Ui\\Component\\Listing\\Columns\\MultipleImages\">\r\n<\/pre>\n2 => Now you have to write the code in renderer.
\nhere my code is<\/p>\n<?php\r\n\r\nnamespace Webkul\\MultiImageExample\\Ui\\Component\\Listing\\Columns;\r\n\r\nuse Magento\\Framework\\View\\Element\\UiComponentFactory;\r\nuse Magento\\Framework\\View\\Element\\UiComponent\\ContextInterface;\r\nuse Magento\\Store\\Model\\StoreManagerInterface;\r\n\r\nclass MultipleImages extends \\Magento\\Ui\\Component\\Listing\\Columns\\Column\r\n{\r\n \/**\r\n * object of store manger class\r\n * @var storemanager\r\n *\/\r\n protected $_storeManager;\r\n\r\n \/**\r\n * @param ContextInterface $context\r\n * @param UiComponentFactory $uiComponentFactory\r\n * @param StoreManagerInterface $storemanager\r\n * @param array $components\r\n * @param array $data\r\n *\/\r\n public function __construct(\r\n ContextInterface $context,\r\n UiComponentFactory $uiComponentFactory,\r\n StoreManagerInterface $storemanager,\r\n array $components = [],\r\n array $data = []\r\n ) {\r\n parent::__construct($context, $uiComponentFactory, $components, $data);\r\n $this->_storeManager = $storemanager;\r\n }\r\n\r\n \/**\r\n * Prepare Data Source\r\n *\r\n * @param array $dataSource\r\n * @return array\r\n *\/\r\n public function prepareDataSource(array $dataSource)\r\n {\r\n $mediaDirectory = $this->_storeManager->getStore()->getBaseUrl(\\Magento\\Framework\\UrlInterface::URL_TYPE_MEDIA);\r\n if (isset($dataSource['data']['items'])) { \r\n $fieldName = $this->getData('name');\r\n foreach ($dataSource['data']['items'] as & $item) {\r\n $badgeArray=array();\r\n $imagesContainer='';\r\n \/\/imagesArray contain images\r\n $imagesArray = array(\r\n [\r\n 'image_url'=>'url1'\r\n ],\r\n [\r\n 'image_url'=>'url2'\r\n ]\r\n );\r\n foreach ($imagesArray as $image) {\r\n $imageUrl = $mediaDirectory.$image['image_url'];\r\n $imagesContainer = $imagesContainer.\"<img src=\". $imageUrl .\" width='50px' height='50px' style='display:inline-block;margin:2px'\/>\";\r\n }\r\n $item[$fieldName]=$imagesContainer;\r\n\r\n }\r\n }\r\n return $dataSource;\r\n }\r\n}<\/pre>\nNow the images will be display at your grid column.
\nhope so it will help you.<\/p>\n","protected":false},"excerpt":{"rendered":"