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

  • Posted by Envision Ecommerce
  • /
  • July 15, 2016
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>

        </item>

    </argument>

</column>

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

<?php

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) {

                    $imageContainer=”;

                        //multiArray contain images

                        $multiArray = array(

                            [

                                ‘image_url’=>’testurl1’

                            ],

                            [

                                ‘image_url’=>’testurl2’

                            ]

                            );

                        foreach ($multiArray as $_image) {

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

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

                        }

                    $item[$fieldName]=$imageContainer;

            }

        }

        return $dataSource;

    }

}