B-219 Sec-55 Noida, India

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 = ‘<img ‘;
$html .= ‘id=”‘ . $this->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.

(Visited 358 times, 1 visits today)

Leave a reply

You must be logged in to post a comment.