Krishna Sunuwar

As I said in my last post, Magento Code is awesome. Awesome that drive to hell if you don’t know, awesome like honey once you start knowing. Today I am going to write how to show images in grid by overriding Mage Core Grid Column Class. If you do not know about extension development go here, these guys covered pretty much about extension development. I have copied idea from them .

Make sure you have following file structure. Only portion inside red-rectangle is applicable for images. This is to override Mage Core Grid Column Class.

I assume ‘krish’ as namespace and ‘timg’ as extension (module) name

We also need to add option in config.xml (located at krish/timg/etc), which is as follows:

Krish_Timg_Block_Widget_Grid_Column

Showing above is part of code, which means that we are going to override Widget_Grid_Column class. Full config.xml looks like below:

 



0.2.0





Krish_Timg_Model
timg_mysql4


Krish_Timg_Model_Mysql4


timg







Krish_Timg_Block



Krish_Timg_Helper




Krish_Timg_Block_Widget_Grid_Column






Krish_Timg


core_setup




core_write




core_read








101
timg/admin







standard

Krish_Timg
timg

Now, let’s see how we override Widget_Grid_Column. We have to keep those files inside Block folder (located at krish/timg/block). See Folder structure above, inside red rectangle.

Add Column.php file in krish/timg/block/widget/grid, which looks below:

class Krish_Timg_Block_Widget_Grid_Column extends Mage_Adminhtml_Block_Widget_Grid_Column
{
protected function _getRendererByType()
{
switch (strtolower($this->getType())) {
case 'image':
$rendererClass = 'timg/widget_grid_column_renderer_image';
break;
default:
$rendererClass = parent::_getRendererByType();
break;
}
return $rendererClass;
}
protected function _getFilterByType()
{
switch (strtolower($this->getType())) {
case 'image':
$filterClass = 'timg/widget_grid_column_filter_image';
break;
default:
$filterClass = parent::_getFilterByType();
break;
}
return $filterClass;
}
}

If column type is image, it call local class (not Core) from our renderer. Let’s define local renderers. Add Image.php file in krish/timg/block/widget/grid/column/renderer:

class Krish_Timg_Block_Widget_Grid_Column_Renderer_Image extends Mage_Adminhtml_Block_Widget_Grid_Column_Renderer_Abstract
{
public function __construct() {
}
public function render(Varien_Object $row)
{
return $this->_getValue($row);
}
protected function _getValue(Varien_Object $row)
{
$dored = false;
if ($getter = $this->getColumn()->getGetter()) {
$val = $row->$getter();
}
$val = $val2 = $row->getData($this->getColumn()->getIndex());
$url = Mage::helper('timg')->getImageUrl($val);
$size = Mage::helper('timg')->getImageThumbSize($val);
$file_extis = Mage::helper('timg')->getFileExists($val);
if($file_extis)
$out = " ";
return $out;
}
}

With help of krish_timg helper, it will display image. Let’s define action, this is also located at krish/timg/block/widget/grid/column/renderer. It is really not used so far, I’ll come to it later:

 class Krish_Timg_Block_Widget_Grid_Column_Renderer_Action extends Mage_Adminhtml_Block_Widget_Grid_Column_Renderer_Action
{
protected function _transformActionData(&$action, &$actionCaption, Varien_Object $row)
{
foreach ( $action as $attibute => $value ) {
if(isset($action[$attibute]) && !is_array($action[$attibute])) {
$this->getColumn()->setFormat($action[$attibute]);
$action[$attibute] = parent::render($row);
} else {
$this->getColumn()->setFormat(null);
}
switch ($attibute) {
case 'caption':
$actionCaption = $action['caption'];
unset($action['caption']);
break;
case 'url':
if(is_array($action['url'])) {
$params = array($action['field']=>$this->_getValue($row));
if(isset($action['url']['params'])) {
$params = array_merge($action['url']['params'], $params);
}
$action['href'] = $this->getUrl($action['url']['base'], $params);
unset($action['field']);
} else {
$action['href'] = $action['url'];
}
unset($action['url']);
break;
case 'popup':
$action['onclick'] = 'popWin(this.href, \'windth=800,height=700,resizable=1,scrollbars=1\');return false;';
break;
}
}
return $this;
}
}

Now, let’s define filter which is located at krish/timg/block/widget/grid/column/filter. We just need to inherit it:

 class Krish_Timg_Block_Widget_Grid_Column_Filter_Image extends Mage_Adminhtml_Block_Widget_Grid_Column_Filter_Text
{
}

Now, we have to write couple of function in helper which is located at krish/timg/helper:

class Krish_Timg_Helper_Data extends Mage_Core_Helper_Abstract
{
protected static $timgImgDir = null;
protected static $timgImgURL = null;
protected static $timgImgThumb = null;
protected static $timgImgThumbWidth = null;
protected $_allowedExtensions = Array();
public function KrishTimg_Helper_Data()
{
self::$timgImgDir = Mage::getBaseDir('media') .'/krish/timg/';
self::$timgImgURL = Mage::getBaseUrl('media').'/krish/timg/';
self::$timgImgThumb = "thumb/";
self::$timgImgThumbWidth = 100;
}
public function getImageUrl($image_file)
{
$url = false;
if(file_exists(self::$timgImgDir . self::$timgImgThumb . $image_file))
$url = self::$timgImgURL . self::$timgImgThumb . $image_file;
else
$url = self::$timgImgURL . $image_file;
return $url;
}
public function getFileExists($image_file)
{
$file_exists = false;
$file_exists = file_exists(self::$timgImgDir . $image_file);
return $file_exists;
}
public function getImageThumbSize($image_file)
{
$img_file = self::$timgImgDir . $image_file;
if(!file_exists($img_file)) return false;
list($width, $height, $type, $attr) = getimagesize($img_file);
$a_height = (int) ((self::$timgImgThumbWidth / $width) * $height);
return Array('width'=>self::$timgImgThumbWidth, 'height'=>$a_height);
}
function deleteFiles($image_file)
{
$pass = true;
if(!unlink(self::$timgImgDir . $image_file))
$pass = false;
if(!unlink(self::$timgImgDir . self::$timgImgThumb . $image_file))
$pass = false;
return $pass;
}
}

When ever you want to show image, you have to write following code in Grid.php (or wherever if grid code is located)

 $this->addColumn('file_name', array(
'header'        => Mage::helper('timg')->__('Name'),
'align'         => 'left',
'index'         => 'file_name',
'type'         => 'image',
'escape'        => true,
'sortable'  => false
));

That’s all, now you should be able to display image in grid.

Assumptions:

1. Krish is namespace
2. timg is module name (sometime I called it extension)
3. /media/krish/timg is image location and media/krish/timg/thumb is thumbnail location.

Sorry folks for messy code. I try to find better Code Escape plugin for WordPress. I tried with codeautoescape but it doesn’t work proper way. If you know better one, suggest me. Also some of code must have been modified by WordPress editor. I’ll provide full download in next post, including front-end part.