2

I want to display an uploaded image in admin grid which is uploaded through a form

<column name="image"> 
<argument name="data" xsi:type="array"> 
    <item name="config" xsi:type="array">
    <item name="filter" xsi:type="string">image</item>
    <item name="label" translate="true" xsi:type="string">Image</item>
    <item name="editor" xsi:type="array">
        <item name="editorType" xsi:type="string">text</item>
            <item name="validation" xsi:type="array">
                <item name="required-entry" xsi:type="boolean">false</item>
            </item>
        </item>
    </item>
</argument>

any help will be appreciated thanks in advance

  • can you please add your grid code ? so I will guide you proper way – Aasim Goriya Feb 12 at 12:30
  • <column name="image"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="filter" xsi:type="string">image</item> <item name="label" translate="true" xsi:type="string">Image</item> <item name="editor" xsi:type="array"> <item name="editorType" xsi:type="string">text</item> <item name="validation" xsi:type="array"> <item name="required-entry" xsi:type="boolean">false</item> </item> </item> </item> </argument> </column> – Ashish Ramchandani Feb 12 at 12:46
2

Please add below code in your ui_component file

<!-- Image Column -->
        <column name="image" class="Module\Vendor\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="sortable" xsi:type="boolean">false</item>
                   <item name="altField" xsi:type="string">name</item>
                   <item name="has_preview" xsi:type="string">1</item>
                   <item name="label" xsi:type="string" translate="true">Image</item>
                   <item name="sortOrder" xsi:type="number">20</item>
                   <item name="resizeEnabled" xsi:type="boolean">true</item>
                   <item name="resizeDefaultWidth" xsi:type="string">300</item>
                </item>
            </argument>
        </column>

Now in your /app/code/Vendor/Module/Ui/Component/Listing/Column/Thumbnail.php add following code.

<?php
namespace Vendor\MOdule\Ui\Component\Listing\Column;

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

class Thumbnail extends \Magento\Ui\Component\Listing\Columns\Column
{
    const NAME = 'thumbnail';

    const ALT_FIELD = 'name';

    /**
     * @var string
     */
    private $editUrl;

    private $_objectManager = null;

    /**
     * @param ContextInterface $context
     * @param UiComponentFactory $uiComponentFactory
     * @param \Magento\Framework\UrlInterface $urlBuilder
     * @param array $components
     * @param array $data
     */
    public function __construct(
        ContextInterface $context,
        UiComponentFactory $uiComponentFactory,
        \Magento\Framework\UrlInterface $urlBuilder,
        \Magento\Framework\ObjectManagerInterface $objectManager,
        array $components = [],
        array $data = []
    ) {
        parent::__construct($context, $uiComponentFactory, $components, $data);
        $this->urlBuilder = $urlBuilder;
        $this->_objectManager = $objectManager;
    }

    /**
     * Prepare Data Source
     *
     * @param array $dataSource
     * @return array
     */
    public function prepareDataSource(array $dataSource)
    {
        if (isset($dataSource['data']['items'])) {
            $fieldName = $this->getData('name');
            foreach ($dataSource['data']['items'] as & $item) {
                $filename = 'pub/media/customizationimages/'.$item['customization_attachment'];
                $item[$fieldName . '_src'] = $this->urlBuilder->getBaseUrl().$filename;
                $item[$fieldName . '_alt'] = $this->getAlt($item) ?: $filename;
                $item[$fieldName . '_link'] = $this->urlBuilder->getUrl(
                    'adminhtml/module/edit',
                    ['id' => $item['id']]);
                $item[$fieldName . '_orig_src'] = $this->urlBuilder->getBaseUrl().$filename;
            }
        }

        return $dataSource;
    }

    /**
     * @param array $row
     *
     * @return null|string
     */
    protected function getAlt($row)
    {
        $altField = $this->getData('config/altField') ?: self::ALT_FIELD;
        return isset($row[$altField]) ? $row[$altField] : null;
    }
}
  • Notice: Undefined index: image come in thumbnail.php – Ashish Ramchandani Feb 12 at 13:20
  • can you add full error here ? – Aasim Goriya Feb 13 at 5:00
  • Notice: Undefined index: image in Thumbnail.php on line 51 – Ashish Ramchandani Feb 13 at 5:04
  • please debug your code before line no 51 and share me what you get in debug array? – Aasim Goriya Feb 13 at 5:06
  • i have debug whole code there is error in that line only – Ashish Ramchandani Feb 13 at 5:08
2

In admin grid, suppose you are calling your image and it is showing image url

Now all you have to do is call a callback function in it

$this->addColumn(
    'image',
    [
        'header' => __('Image'),
        'index' => 'image',
        'type' => 'image',
        'frame_callback' => array($this, 'callback_image'),
    ]
);

In your callback function return image frame

public function callback_image($value)
{
    if (empty($value)){
        return '';
    }
    $objectManager = \Magento\Framework\App\ObjectManager::getInstance();
    $mediaUrl = $objectManager->get('Magento\Store\Model\StoreManagerInterface')->getStore()->getBaseUrl(\Magento\Framework\UrlInterface::URL_TYPE_MEDIA);
    $width = 150;
    return "<img src='" . $mediaUrl . $value . "' width='" . $width . "'/>";
}

That would be all, I personally used this code before

  • in my admin grid image name is showing through that I want to display an image@Shoaib Munir – Ashish Ramchandani Feb 12 at 11:16
  • Before image name, you need to populate whole image URL in function callback_image – Shoaib Munir Feb 12 at 11:18
  • but i want to display particular image with image name in admin grid – Ashish Ramchandani Feb 12 at 11:19
  • Can you share screenshot of your grid? – Shoaib Munir Feb 12 at 11:20
  • there is no option available for screenshot upload – Ashish Ramchandani Feb 12 at 11:40

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.