0

I need to display product image in admin grid view. I tried below code.

class Image extends \Magento\Backend\Block\Widget\Grid\Column\Renderer\AbstractRenderer
{ 

public function render(\Magento\Framework\DataObject $row) {


        //$this->helper('Magento\Catalog\Helper\Product')->getImageUrl($product);
        //$helper = $this->helper('Magento\Catalog\Helper\Image')->init($product,'cart_page_product_thumbnail') ->constrainOnly(true)->keepAspectRatio(true)->keepFrame(false)->setImageFile($product->getImage())->getUrl();

       $id=$row->getId();
       $objectManager = \Magento\Framework\App\ObjectManager::getInstance();
       $store = $objectManager->get('Magento\Store\Model\StoreManagerInterface')->getStore();
       $product       = $objectManager->get('Magento\Catalog\Model\Product')->load($id);


        $imageHelper  = $objectManager->get('\Magento\Catalog\Helper\Image');
        $image_url = $imageHelper->init($product, 'product_thumbnail_image')->setImageFile($product->getFile())->resize(100, 100)->getUrl();
        $prod_name = $product->getName();
       //$product->getDefaultPlaceholderUrl('small_image');
       if($image_url){
        $html='<img class="admin__control-thumbnail" data-bind="attr: {src: $col.getSrc($row()), alt: $col.getAlt($row())}" src="'.$image_url.'" alt="'.$prod_name.'">';
       }
       else{

        $placeholderImageUrl = $imageHelper->getDefaultPlaceholderUrl('thumbnail');
        $html = '<img class="admin__control-thumbnail" data-bind="attr: {src: $col.getSrc($row()), alt: $col.getAlt($row())}" src="'.$placeholderImageUrl.'" alt="'.$prod_name.'">';

       }

        return $html;
    }

}

I am rending this image to grid as follows.

 protected function _prepareColumns()
    {
        $this->addColumn(
            'entity_id',
            [
                'header' => __('ID'),
                'type' => 'number',
                'index' => 'entity_id',
                'header_css_class' => 'col-id',
                'column_css_class' => 'col-id'
            ]
        );
        $this->addColumn('image',
           [
                'header' => __('Image'),
                'type' => 'text',
                'align' => 'center',
                'filter' => false,
                'sortable' => false,
                'renderer' => 'My\Module\Block\Adminhtml\mproducts\Renderer\Image',
            ]);
        $this->addColumn(
            'name',
            [
                'header' => __('Name'),
                'index' => 'name',
            ]
        );
}

I am getting same image for all the products. Whats wrong in my code?

  • I tried to print $product->getFile(); it is printing same for all the products. – Dinesh Mar 27 at 12:26
  • 'index' => 'image', define in grid.php – Rk Rathod Mar 27 at 12:32
1

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;
    }
}
  • Thanks, Its worked perfectly. – Dinesh Mar 27 at 12:48

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.