Magento how to display image in grid


If you want to add an image to the grid of a custom module you have to do 2 things: first modify the grid file of the module and then add a new block to get the HTML code of the image. The second will be called from the column configuration through render.

Step : 1
Go to the grid file of the module app/code/local/Website/CustomModule/Block/Adminhtml/CustomModule/Grid.php and add a new column for the image:
Add this code

$this->addColumn('image', array(
            'header'    => Mage::helper('YourCustomModuleName')->__('Image'),
            'index'     => 'image',
            'renderer'  => 'contact/adminhtml_contact_renderer_image',
            'width' => '50px'
        ));

Step :2

Then add in app/code/local/Website/CustomModule/Block/Adminhtml/CustomModule/Renderer/Image.php the following code
(customize it to get the path to your image if the path isn't media).

<?php
class Website_CustomModule_Block_Adminhtml_CustomModule_Renderer_Image extends Mage_Adminhtml_Block_Widget_Grid_Column_Renderer_Abstract{

   public function render(Varien_Object $row)
   {
       $html = '<img ';
       $html .= 'id="' . $this->getColumn()->getId() . '" ';
       $html .= 'src="'.Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_MEDIA)."Your FolderName/" . $row->getData($this->getColumn()->getIndex()) . '"';
       $html .= 'style="width:100px ' . $this->getColumn()->getInlineCss() . '"/>';
       return $html;
   }
}

0 comments: