1

Note: I am not using UI component

I have a file Grid.php where I have a column image, in this column, image URL is populating

I want to show the image in this column instead of image URL

  • want to show thumbnail in grid??? – Asad Khan Apr 10 at 9:48
  • Yes, could be thumbnail. I have custom grid for a custom table where image url is appearing, I want image against URL in grid – Muhammad Anas Apr 10 at 9:55
3

I have figured out the solution of this:

In my Grid.php I have used 'frame_callback' function like this:

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

After this, I have added show_image function at the end of the file:

public function show_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 . "'/>";
}

After this, image is now appearing on my custom grid.

2

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;
    }
}
  • 1
    I have used frame_callback function and it is working fine for me. But it could also be done through renderer that you have mentioned. Thanks for the effort. +1 – Muhammad Anas Apr 10 at 11:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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