Monday, October 22, 2012

Adding thumbnail image for custom column in magento admin grid

Sometimes we  need to show thumbnail image for custom attribute in magento admin grid. As we might know it is little tricky to add thumbnail image in a grid in magento admin. Here we've discussed the way how we can add thumbnail image. 1.  Firstly we have to add the following code snippet in _prepareColumns() function, in Grid.php(path: code/local/Packagename/Modulename/Block/Adminhtml/Modulename/Grid.php). Here we use the local path you can use community.
$this->addColumn('modulenameimage', array(
    'header' => Mage::helper('modulename')->__('Image'),
    'align' => 'left',
    'index' => 'modulenameimage',
    'renderer' => 'modulename/adminhtml_modulename_renderer_image',
    'width' => '107'
Note: Here modulenameimage is the custom attribute. 2. Here we can see that a renderer block(adminhtml_modulename_renderer_image), so now our task is to create that block in Packagename_Modulename_Block_Adminhtml_Modulename_Renderer_Image file as below:

class Packagename_Modulename_Block_Adminhtml_Modulename_Renderer_Image extends Mage_Adminhtml_Block_Widget_Grid_Column_Renderer_Abstract {

    public function render(Varien_Object $row) {
        $html = 'getColumn()->getId() . '" ';
        $html .= 'width="' . $this->getColumn()->getWidth() . '" ';
        $html .= 'src="' . Mage::getBaseUrl("media") . 'images/' . $row->getData($this->getColumn()->getIndex()) . '"';
        $html .= 'class="grid-image ' . $this->getColumn()->getInlineCss() . '"/>';
        return $html;

These are all you need to do to show thumbnail image in grid view. Now you can the grid for that particular module and see the image there. You can change the custom column, image path, width, height as you desire.


  1. You have shared really such a nice information which is helped me so much and I think it will help to many other people.

    magento development

  2. In my case it was not enough to make it working as required. I have use extension Admin Prodoct Grid Images, where is also required to make overrite of adminhtml/catalog_product_grid and adminhtml/widget_grid_column in config.xml to 'Packagename/Modulename'.