Oh snap! You are using an old version of browser. Update your browser to get new awesome features. Click for more details.

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