PHP Magento Tips

Add Product Image Column on Manage Products Grid in Magento Admin

Rate this posting:
{[['']]}

You can easilyeEnhance the Magento admin product grid by adding Image Column with Full control from admin to show/hide column and product image size from admin.

Step 1: add below code in app/etc/modules/Mycompany_Productimage.xml

<?xml version="1.0"?>
<config>
    <modules>
        <Mycompany_Productimage>
            <active>true</active>
            <codePool>local</codePool>
        </Mycompany_Productimage>
    </modules>
</config>

Now Create Main config.xml, system.xml and adminhtml.xml file as per below.

Step 2: Create app/code/local/Mycompany/Productimage/etc/config.xml file and below code:

<?xml version="1.0" encoding="UTF-8"?>
<config>
    <modules>
        <Mycompany_Productimage>
            <version>0.0.1</version>
        </Mycompany_Productimage>
    </modules>
    <global>
        <blocks>
            <productimage>
                <class>Mycompany_Productimage_Block</class>
            </productimage>
            <adminhtml>
                <rewrite>
                    <catalog_product_grid>Mycompany_Productimage_Block_Adminhtml_Product_Grid</catalog_product_grid>
                </rewrite>
            </adminhtml>
        </blocks>
        <helpers>
            <productimage>
                <class>Mycompany_Productimage_Helper</class>
            </productimage>
        </helpers>
    </global>
</config>


Here we rewrite catalog_product_grid and made our own block.

Create app/code/local/Mycompany/Productimage/etc/system.xml file and add below code in it.

<?xml version="1.0" encoding="UTF-8"?>
<config>
    <tabs>
        <productimages translate="label" module="productimage">
            <label>Product Image</label>
            <sort_order>302</sort_order>
        </productimages>
    </tabs>
    <sections>
        <productimage translate="label" module="productimage">
            <label>Product Image Grid</label>
            <tab>productimages</tab>
            <sort_order>130</sort_order>
            <show_in_default>1</show_in_default>
            <show_in_website>1</show_in_website>
            <show_in_store>1</show_in_store>
            <groups>
                <grid_config translate="label">
                    <label>Product Image Setting in Admin Grid</label>
                    <frontend_type>text</frontend_type>
                    <sort_order>10</sort_order>
                    <show_in_default>1</show_in_default>
                    <show_in_website>0</show_in_website>
                    <show_in_store>0</show_in_store>
                    <fields>
                        <base_image translate="label">
                            <label>Show Base Image</label>
                            <frontend_type>select</frontend_type>
                            <source_model>adminhtml/system_config_source_yesno</source_model>
                            <sort_order>1</sort_order>
                            <show_in_default>1</show_in_default>
                            <show_in_website>0</show_in_website>
                            <show_in_store>0</show_in_store>
                            <comment>If Yes- admin product grid will have Base image column, Otherwise it will be hidden</comment>
                        </base_image>
                        <thumbnail_image translate="label">
                            <label>Show Thumbnail Image</label>
                            <frontend_type>select</frontend_type>
                            <source_model>adminhtml/system_config_source_yesno</source_model>
                            <sort_order>2</sort_order>
                            <show_in_default>1</show_in_default>
                            <show_in_website>0</show_in_website>
                            <show_in_store>0</show_in_store>
                           <comment>If Yes- admin product grid will have Thumbnail image column, Otherwise it will be hidden</comment>

                        </thumbnail_image>
                        <small_image translate="label">
                            <label>Show Small Image</label>
                            <frontend_type>select</frontend_type>
                            <source_model>adminhtml/system_config_source_yesno</source_model>
                            <sort_order>3</sort_order>
                            <show_in_default>1</show_in_default>
                            <show_in_website>0</show_in_website>
                            <show_in_store>0</show_in_store>
                           <comment>If Yes- admin product grid will have small image column, Otherwise it will be hidden</comment>

                        </small_image>
                        <image_width translate="label">
                            <label>Image Width</label>
                            <frontend_type>text</frontend_type>
                            <sort_order>4</sort_order>
                            <show_in_default>1</show_in_default>
                            <show_in_website>0</show_in_website>
                            <show_in_store>0</show_in_store>
                            <comment>Not need to write "px" here, Just write figure here.</comment>

                        </image_width>
                        <image_height translate="label">
                            <label>Image Height</label>
                            <frontend_type>text</frontend_type>
                            <sort_order>5</sort_order>
                            <show_in_default>1</show_in_default>
                            <show_in_website>0</show_in_website>
                            <show_in_store>0</show_in_store>
                            <comment>Not need to write "px" here, Just write figure here.</comment>
                        </image_height>
                    </fields>
                </grid_config>
            </groups>
        </productimage>
    </sections>
    
</config>

Create app/code/local/Mycompany/Productimage/etc/adminhtml.xml file and add below code in it.

<?xml version="1.0" encoding="UTF-8"?>

<config>
    <acl>
    <resources>
        <admin>
            <children>
                <system>
                    <children> 
                        <config>
                            <children>
                                <productimage translate="title">
                                    <title>Product Image Grid</title>
                                    <sort_order>61</sort_order>
                                </productimage>
                            </children>
                        </config>
                    </children>
                </system>
            </children>
        </admin>
    </resources>
</acl>
</config>

Step 3: Now create your own block grid file. create app/code/local/Mycompany/Productimage/Block/Adminhtml/Product/Grid.php file and add below code in it.

<?php

class Mycompany_Productimage_Block_Adminhtml_Product_Grid extends Mage_Adminhtml_Block_Catalog_Product_Grid {

    
    protected function _prepareColumns() {
        $this->addColumn('entity_id', array(
            'header' => Mage::helper('catalog')->__('ID'),
            'width' => '50px',
            'type' => 'number',
            'index' => 'entity_id',
        ));

        // Base Image
        if (Mage::getStoreConfig('productimage/grid_config/base_image')) {

            $this->addColumn('base_image', array(
                'header' => Mage::helper('catalog')->__('Base Image'),
                'width' => '30px',
                'index' => 'base_image',
                'type' => 'text',
                'renderer' => new Mycompany_Productimage_Block_Adminhtml_Product_Renderer_BaseImage()
            ));
        }  
  
        // Thumbnail image
        if (Mage::getStoreConfig('productimage/grid_config/thumbnail_image')) {
            $this->addColumn('thumbnail_image', array(
                'header' => Mage::helper('catalog')->__('Thumbnail Image'),
                'width' => '30px',
                'index' => 'thumbnail_image',
                'type' => 'text',
                'renderer' => new Mycompany_Productimage_Block_Adminhtml_Product_Renderer_ThumbnailImage()
            ));
        }

        // Small Image
        if (Mage::getStoreConfig('productimage/grid_config/small_image')) {

            $this->addColumn('small_image', array(
                'header' => Mage::helper('catalog')->__('Small Image'),
                'width' => '30px',
                'index' => 'small_image',
                'type' => 'text',
                'renderer' => new Mycompany_Productimage_Block_Adminhtml_Product_Renderer_SmallImage()
            ));
        }

        $this->addColumn('name', array(
            'header' => Mage::helper('catalog')->__('Name'),
            'index' => 'name',
        ));

        $store = $this->_getStore();
        if ($store->getId()) {
            $this->addColumn('custom_name', array(
                'header' => Mage::helper('catalog')->__('Name in %s', $store->getName()),
                'index' => 'custom_name',
            ));
        }

        $this->addColumn('type', array(
            'header' => Mage::helper('catalog')->__('Type'),
            'width' => '60px',
            'index' => 'type_id',
            'type' => 'options',
            'options' => Mage::getSingleton('catalog/product_type')->getOptionArray(),
        ));

        $sets = Mage::getResourceModel('eav/entity_attribute_set_collection')
                ->setEntityTypeFilter(Mage::getModel('catalog/product')->getResource()->getTypeId())
                ->load()
                ->toOptionHash();

        $this->addColumn('set_name', array(
            'header' => Mage::helper('catalog')->__('Attrib. Set Name'),
            'width' => '100px',
            'index' => 'attribute_set_id',
            'type' => 'options',
            'options' => $sets,
        ));

        $this->addColumn('sku', array(
            'header' => Mage::helper('catalog')->__('SKU'),
            'width' => '80px',
            'index' => 'sku',
        ));

        $store = $this->_getStore();
        $this->addColumn('price', array(
            'header' => Mage::helper('catalog')->__('Price'),
            'type' => 'price',
            'currency_code' => $store->getBaseCurrency()->getCode(),
            'index' => 'price',
        ));

        if (Mage::helper('catalog')->isModuleEnabled('Mage_CatalogInventory')) {
            $this->addColumn('qty', array(
                'header' => Mage::helper('catalog')->__('Qty'),
                'width' => '100px',
                'type' => 'number',
                'index' => 'qty',
            ));
        }

        $this->addColumn('visibility', array(
            'header' => Mage::helper('catalog')->__('Visibility'),
            'width' => '70px',
            'index' => 'visibility',
            'type' => 'options',
            'options' => Mage::getModel('catalog/product_visibility')->getOptionArray(),
        ));

        $this->addColumn('status', array(
            'header' => Mage::helper('catalog')->__('Status'),
            'width' => '70px',
            'index' => 'status',
            'type' => 'options',
            'options' => Mage::getSingleton('catalog/product_status')->getOptionArray(),
        ));


        if (!Mage::app()->isSingleStoreMode()) {
            $this->addColumn('websites', array(
                'header' => Mage::helper('catalog')->__('Websites'),
                'width' => '100px',
                'sortable' => false,
                'index' => 'websites',
                'type' => 'options',
                'options' => Mage::getModel('core/website')->getCollection()->toOptionHash(),
            ));
        }

        $this->addColumn('action', array(
            'header' => Mage::helper('catalog')->__('Action'),
            'width' => '50px',
            'type' => 'action',
            'getter' => 'getId',
            'actions' => array(
                array(
                    'caption' => Mage::helper('catalog')->__('Edit'),
                    'url' => array(
                        'base' => '*/*/edit',
                        'params' => array('store' => $this->getRequest()->getParam('store'))
                    ),
                    'field' => 'id'
                )
            ),
            'filter' => false,
            'sortable' => false,
            'index' => 'stores',
        ));

        if (Mage::helper('catalog')->isModuleEnabled('Mage_Rss')) {
            $this->addRssList('rss/catalog/notifystock', Mage::helper('catalog')->__('Notify Low Stock RSS'));
        }

        return parent::_prepareColumns();
    }

}

Here in _prepareColumns function we added Base Image, Thumbnail image and Small Image with addColumn method and its renderer path inside it.

Step 4: Now create a renderer file. Before that we will create one Abstract class file and in that we write our logic for getting product image and then extended that Abstract class in each renderer file.

create app/code/local/Mycompany/Productimage/Block/Adminhtml/Product/Renderer/Abstract.php file and add below code in it:

<?php

Abstract class Mycompany_Productimage_Block_Adminhtml_Product_Renderer_Abstract extends Mage_Adminhtml_Block_Widget_Grid_Column_Renderer_Abstract {

    public function render(Varien_Object $row) {
        $product = $row->load($row->getId());
        $proimage ='';
        if ($this->getMediaImage($product) != "no_selection" && $this->getMediaImage($product) != "" ) {
            $proimage = Mage::getModel('catalog/product_media_config')->getMediaUrl($this->getMediaImage($product));
            } else if ($this->getPlaceholder()) {
            $proimage = Mage::getSingleton('catalog/product_media_config')->getBaseMediaUrl() . '/placeholder/' . $this->getPlaceholder();
            }
        $width = filter_var(Mage::getStoreConfig('productimage/grid_config/image_width'), FILTER_SANITIZE_NUMBER_INT);
        $height = filter_var(Mage::getStoreConfig('productimage/grid_config/image_height'), FILTER_SANITIZE_NUMBER_INT);
        if ($proimage != '') {
            echo "<image src='" . $proimage . "' width='" . $width . "' height='" . $height . "'/>";
        }
        return parent::_toHtml();
    }
    

    abstract public function getMediaImage($product);
    abstract public function getPlaceholder();
}

Create app/code/local/Mycompany/Productimage/Block/Adminhtml/Product/Renderer/BaseImage.php file and add below code in it.

<?php
class Mycompany_Productimage_Block_Adminhtml_Product_Renderer_BaseImage extends Mycompany_Productimage_Block_Adminhtml_Product_Renderer_Abstract
{
      
    public function getMediaImage($product){
         return $product->getImage();
    }
    public function getPlaceholder(){
        return Mage::getStoreConfig("catalog/placeholder/image_placeholder");
    }
}

create app/code/local/Mycompany/Productimage/Block/Adminhtml/Product/Renderer/SmallImage.php file and add below code in it.

<?php
class Mycompany_Productimage_Block_Adminhtml_Product_Renderer_SmallImage extends Mycompany_Productimage_Block_Adminhtml_Product_Renderer_Abstract
{
     public function getMediaImage($product){
         return $product->getSmallImage();
    }
    
     public function getPlaceholder(){
        return Mage::getStoreConfig("catalog/placeholder/small_image_placeholder");
    }
}

Create app/code/local/Mycompany/Productimage/Block/Adminhtml/Product/Renderer/ThumbnailImage.php file and add below code in it.

<?php
class Mycompany_Productimage_Block_Adminhtml_Product_Renderer_ThumbnailImage extends Mycompany_Productimage_Block_Adminhtml_Product_Renderer_Abstract
{
    
    public function getMediaImage($product){
         return $product->getThumbnail();
    }
    
     public function getPlaceholder(){
        return Mage::getStoreConfig("catalog/placeholder/thumbnail_placeholder");
    }
}


Step 5: At last create app/code/local/Mycompany/Productimage/Helper/Data.php file and add below code in it:

<?php

class Mycompany_Productimage_Helper_Data extends Mage_Core_Helper_Abstract{
    
}

Now in backend go to system >> configuration >> PRODUCT IMAGE >> Product Image Grid and set your image setting from there.

After go your Mage Products grid you will find Base Image, Thumbnail Image and Small Image there.


Download Whole Module From Github: https://github.com/vijayrami/Productimage_Grid_Abstract
Tag : Magento
0 Comments On "Add Product Image Column on Manage Products Grid in Magento Admin"

Back To Top