Adding Thumbnail Images To Magento Admin Grid

By Manish Prakash in Magento, Tips and Snippets 4 Comments
In this blog post, we will see how to add custom column type to our magento admin grid.

Specifically, we will see how to add a thumbnail image column to our grid. Before reading the post, i assume your familiar with Admin Grid and Forms, and already have module setup with the Grid Working.
Now lets start with how to add a custom column, in this blog i will assume the name of my module to be Excellence_Employee. I will be showing an example on how to add an image to a grid column.

Adding Image to Grid

Open your Grid.php file and add the code in the _prepareColumns() function 

$this->addColumn('image', array(
          'header'    => Mage::helper('employee')->__('Employee Image'),
          'align'     =>'left',
          'index'     => 'image',
          'renderer'  => 'employee/adminhtml_employee_renderer_image'
      ));

Here as you can see we have specified an renderer block type as ’employee/adminhtml_employee_renderer_image’. Now we need to create this Block. The code inside this block is as follows:

<?php
class Excellence_Employee_Block_Adminhtml_Employee_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="' . $row->getData($this->getColumn()->getIndex()) . '"';
        $html .= 'class="grid-image ' . $this->getColumn()->getInlineCss() . '"/>';
        return $html;
	}
}

This is all that is needed, if you open your grid you show see an image there. You have to adjust path/src of the image to make it show correctly. Here the $this->getColumn() function is the important function, you can access the array you pass in the Grid.php file in the getColumn() function. For example, if we write in Grid.php file

$this->addColumn('image', array(
          'header'    => Mage::helper('employee')->__('Employee Image'),
          'align'     =>'left',
          'index'     => 'image',
          'renderer'  => 'employee/adminhtml_employee_renderer_image',
          'attr1'     => 'value1'
      ));

then in our renderer we can use

$this->getColumn()->getAttr1()

You can also access the data of the current row using the $row variable passed in the render function, for example the below code will show the path of image as well.

class Excellence_Employee_Block_Adminhtml_Employee_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="' . $row->getData($this->getColumn()->getIndex()) . '"';
        $html .= 'class="grid-image ' . $this->getColumn()->getInlineCss() . '"/>';
        $html .= '<br/><p>'.$row->getData($this->getColumn()->getIndex()).'</p>';
        return $html;
	}
}

Related Articles.