Display an image in the admin grid in magento 2
Your ui component xml should have this added:
<column name="image" class="Your\Modulename\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">title</item>
<item name="has_preview" xsi:type="string">1</item>
<item name="label" xsi:type="string" translate="true">Thumbnail</item>
</item>
</argument>
</column>
..and then in Your\Modulename\Ui\Component\Listing\Column\Thumbnail.php something similar to this:
<?php
namespace Your\Modulename\Ui\Component\Listing\Column;
use Magento\Catalog\Helper\Image;
use Magento\Framework\UrlInterface;
use Magento\Framework\View\Element\UiComponentFactory;
use Magento\Framework\View\Element\UiComponent\ContextInterface;
use Magento\Store\Model\StoreManagerInterface;
use Magento\Ui\Component\Listing\Columns\Column;
class Thumbnail extends Column
{
const ALT_FIELD = 'title';
/**
* @var \Magento\Store\Model\StoreManagerInterface
*/
protected $storeManager;
/**
* @param ContextInterface $context
* @param UiComponentFactory $uiComponentFactory
* @param Image $imageHelper
* @param UrlInterface $urlBuilder
* @param StoreManagerInterface $storeManager
* @param array $components
* @param array $data
*/
public function __construct(
ContextInterface $context,
UiComponentFactory $uiComponentFactory,
Image $imageHelper,
UrlInterface $urlBuilder,
StoreManagerInterface $storeManager,
array $components = [],
array $data = []
) {
$this->storeManager = $storeManager;
$this->imageHelper = $imageHelper;
$this->urlBuilder = $urlBuilder;
parent::__construct($context, $uiComponentFactory, $components, $data);
}
/**
* 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) {
$url = '';
if($item[$fieldName] != '') {
$url = $this->storeManager->getStore()->getBaseUrl(
\Magento\Framework\UrlInterface::URL_TYPE_MEDIA
).'pathtoyourimage/'.$item[$fieldName];
}
$item[$fieldName . '_src'] = $url;
$item[$fieldName . '_alt'] = $this->getAlt($item) ?: '';
$item[$fieldName . '_link'] = $this->urlBuilder->getUrl(
'your_module/yourentity/edit',
['yourentity_id' => $item['yourentity_id']]
);
$item[$fieldName . '_orig_src'] = $url;
}
}
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;
}
}
I hope that helps!
In your grid.php define like below
$this->addColumn(
'image',
array(
'header' => __('Image'),
'index' => 'image',
'renderer' => '\Vendorname\Modulename\Block\Adminhtml\Modulename\Grid\Renderer\Image',
)
);
Create Image.php
under
\Vendorname\Modulename\Block\Adminhtml\Modulename\Grid\Renderer\
and paste below code
namespace Vendorname\Modulename\Block\Adminhtml\Modulename\Grid\Renderer;
class Image extends \Magento\Backend\Block\Widget\Grid\Column\Renderer\AbstractRenderer
{
protected $_storeManager;
public function __construct(
\Magento\Backend\Block\Context $context,
\Magento\Store\Model\StoreManagerInterface $storeManager,
array $data = []
) {
parent::__construct($context, $data);
$this->_storeManager = $storeManager;
}
public function render(\Magento\Framework\DataObject $row)
{
$img;
$mediaDirectory = $this->_storeManager->getStore()->getBaseUrl(
\Magento\Framework\UrlInterface::URL_TYPE_MEDIA
);
if($this->_getValue($row)!=''):
$imageUrl = $mediaDirectory.$this->_getValue($row);
$img='<img src="'.$imageUrl.'" width="100" height="100"/>';
else:
$img='<img src="'.$mediaDirectory.'Modulename/no-img.jpg'.'" width="100" height="100"/>';
endif;
return $img;
}
}
Just add this tag in you ui_component
layout file
<column name="logo" class="NAMESPACE\MODULENAME\Ui\Component\Listing\Columns\Logo">
<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="add_field" xsi:type="boolean">true</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">Brand Logo</item>
</item>
</argument>
</column>
and create this new file which we have assign in our ui_component
column
<?php
namespace NAMESPACE\MODULENAME\Ui\Component\Listing\Columns;
use Magento\Framework\View\Element\UiComponentFactory;
use Magento\Framework\View\Element\UiComponent\ContextInterface;
class Logo extends \Magento\Ui\Component\Listing\Columns\Column
{
const NAME = 'logo';
const ALT_FIELD = 'name';
protected $_storeManager;
public function __construct(
ContextInterface $context,
UiComponentFactory $uiComponentFactory,
\Magento\Framework\UrlInterface $urlBuilder,
array $components = [],
array $data = [],
\Magento\Store\Model\StoreManagerInterface $storeManager
) {
parent::__construct($context, $uiComponentFactory, $components, $data);
$this->_storeManager = $storeManager;
$this->urlBuilder = $urlBuilder;
}
/**
* 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) {
$mediaRelativePath=$this->_storeManager->getStore()->getBaseUrl(\Magento\Framework\UrlInterface::URL_TYPE_MEDIA);
$logoPath=$mediaRelativePath.$item['logo'];
$item[$fieldName . '_src'] = $logoPath;
$item[$fieldName . '_alt'] = $this->getAlt($item);
$item[$fieldName . '_link'] = $this->urlBuilder->getUrl(
'brand/manage/edit',
['brand_id' => $item['brand_id'], 'store' => $this->context->getRequestParam('store')]
);
$item[$fieldName . '_orig_src'] = $logoPath;
}
}
return $dataSource;
}
/**
* @param array $row
*
* @return null|string
*/
protected function getAlt($row)
{
$altField = self::ALT_FIELD;
return isset($row[$altField]) ? $row[$altField] : null;
}
}
In prepareDataSource
function you will get each column object.
Hope this will help you.