How to Display More Than One Image in UI Grid Column Magento2?

Sometimes it is necessary to showcase multiple images in a UI grid column in Magento 2. Therefore, we’ve compiled here some simple steps to help you how to display more than one image in a UI grid column in Magento 2.

  1. First of all, you have to open ui_component xml file and put there the required code in your item tag in a column where you require to showcase more than one image.

 <item name=”bodyTmpl” xsi:type=”string”>ui/grid/cells/html</item>

  1. Now it is the time to put the code in renderer as shown below:

The above steps and examples illustrate how to display multiple images in UI grid column in Magento 2. So, this is dead easy and simple, let’s get started with these steps!

<column name=”image” class=”Envision\MultiTestExample\Ui\Component\Listing\Columns\MultiTest”>

    <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=”altField” xsi:type=”string”>name</item>

            <item name=”has_preview” xsi:type=”string”>0</item>

            <item name=”sortable” xsi:type=”boolean”>false</item>

            <item name=”bodyTmpl” xsi:type=”string”>ui/grid/cells/html</item>

            <item name=”label” xsi:type=”string” translate=”true”>Images</item>

            <item name=”sortOrder” xsi:type=”number”>1</item>




<column name=”image” class=”Envision\MultiTestExample\Ui\Component\Listing\Columns\MultiTest”>


namespace Envision\MultiTestExample\Ui\Component\Listing\Columns;

use Magento\Framework\View\Element\UiComponentFactory;

use Magento\Framework\View\Element\UiComponent\ContextInterface;

use Magento\Store\Model\StoreManagerInterface;

class MultiTests extends \Magento\Ui\Component\Listing\Columns\Column



     * object of store manger class

     * @var storemanager


    protected $_storeManager;


     * @param ContextInterface      $context

     * @param UiComponentFactory    $uiComponentFactory

     * @param StoreManagerInterface $storemanager

     * @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)


        $mediaDir = $this->_storeManager->getStore()->getBaseUrl(\Magento\Framework\UrlInterface::URL_TYPE_MEDIA);

        if (isset($dataSource[‘data’][‘items’])) {

            $fieldName = $this->getData(‘name’);

            foreach ($dataSource[‘data’][‘items’] as & $item) {


                        //multiArray contain images

                        $multiArray = array(








                        foreach ($multiArray as $_image) {

                            $_imageUrl = $mediaDir.$_image[‘image_url’];

                            $imageContainer = $imageContainer.”<img src=”. $_imageUrl .” width=’50px’ height=’50px’ style=’display:inline-block;margin:2px’/>”;





        return $dataSource;