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.
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; } }