Magento : adding thumbnail image to magento admin grid column

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

1
2
3
4
5
6
$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:

1
2
3
4
5
6
7
8
9
10
11
12
<?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

1
2
3
4
5
6
7
$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

1
$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.

1
2
3
4
5
6
7
8
9
10
11
12
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;
    }
}
Advertisements