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

  • author-img Nidhi Arora
  • 5 years
  • 378 views
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;

    }

}

Download Blog

ENQUIRY

Ready to Get started

Communication is the key for us to understand each other. Allow us to understand
your requirements or queries. Present us with an opportunity to serve you.

Fill out the form and out team will get back to you
within 24 hours

    Head Office

    1250 Pittsford Victor Road Ste 310
    Pittsford, NY 14534

    Development Center

    Plot no. 10, Rajiv Gandhi
    Chandigarh Technology Park