Show product thumbnail in grids

goldfish

Editing products and changing their position in categories can be quite a task. This is especially true when you have a large number of products to edit or arrange, and some of them are very similar.

Sure, you could differentiate them by SKU, ID, price, or something else. But wouldn’t it be great if you had a thumbnail of each product in grid?

Adding product thumbnail in grid isn’t very complicated. There are few ways to do this, but almost every one of them uses renderers to display product image.
That’s what we’ll do as well.

In this example, we’ll register our module, rewrite a block in Magento admin grid – specifically ‘Manage Categories‘ grid and add our code for displaying one additional column – Thumbnail.

Let’s get started!

Firstly, register your module.
app/etc/modules/Inchoo_Thumbnail.xml

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

Now configure your module and rewrite ‘catalog_category_tab_product‘ block with your own version.
app/code/local/Inchoo/Thumbnail/etc/config.xml

<?xml version="1.0"?>
<config>
    <modules>
        <Inchoo_Thumbnail>
            <version>1.0.0.2</version>
        </Inchoo_Thumbnail>
    </modules>
    <global>
        <blocks>
            <adminhtml>
                <rewrite>
                    <catalog_category_tab_product>Inchoo_Thumbnail_Block_Adminhtml_Catalog_Category_Tab_Product</catalog_category_tab_product>
                </rewrite>
            </adminhtml>
        </blocks>
    </global>
</config>

Copy app/code/core/Mage/Adminhtml/Block/Catalog/Category/Tab/Product.php to
app/code/local/Inchoo/Thumbnail/Block/Adminhtml/Catalog/Category/Tab/Product.php

<?php
class Inchoo_Thumbnail_Block_Adminhtml_Catalog_Category_Tab_Product extends Mage_Adminhtml_Block_Widget_Grid
{
    public function __construct()
    {
        parent::__construct();
        $this->setId('catalog_category_products');
        $this->setDefaultSort('entity_id');
        $this->setUseAjax(true);
    }
 
    public function getCategory()
    {
        return Mage::registry('category');
    }
 
    protected function _addColumnFilterToCollection($column)
    {
        // Set custom filter for in category flag
        if ($column->getId() == 'in_category') {
            $productIds = $this->_getSelectedProducts();
            if (empty($productIds)) {
                $productIds = 0;
            }
            if ($column->getFilter()->getValue()) {
                $this->getCollection()->addFieldToFilter('entity_id', array('in'=>$productIds));
            }
            elseif(!empty($productIds)) {
                $this->getCollection()->addFieldToFilter('entity_id', array('nin'=>$productIds));
            }
        }
        else {
            parent::_addColumnFilterToCollection($column);
        }
        return $this;
    }
 
    protected function _prepareCollection()
    {
        if ($this->getCategory()->getId()) {
            $this->setDefaultFilter(array('in_category'=>1));
        }
        $collection = Mage::getModel('catalog/product')->getCollection()
                          ->addAttributeToSelect('name')
                          ->addAttributeToSelect('sku')
                          ->addAttributeToSelect('price')
                          ->addAttributeToSelect('thumbnail')
                          ->addStoreFilter($this->getRequest()->getParam('store'))
                          ->joinField('position',
                                      'catalog/category_product',
                                      'position',
                                      'product_id=entity_id',
                                      'category_id='.(int) $this->getRequest()->getParam('id', 0),
                                      'left');
        $this->setCollection($collection);
 
        if ($this->getCategory()->getProductsReadonly()) {
            $productIds = $this->_getSelectedProducts();
            if (empty($productIds)) {
                $productIds = 0;
            }
            $this->getCollection()->addFieldToFilter('entity_id', array('in'=>$productIds));
        }
 
        return parent::_prepareCollection();
    }
 
    protected function _prepareColumns()
    {
        if (!$this->getCategory()->getProductsReadonly()) {
            $this->addColumn('in_category', array(
                'header_css_class' => 'a-center',
                'type'      => 'checkbox',
                'name'      => 'in_category',
                'values'    => $this->_getSelectedProducts(),
                'align'     => 'center',
                'index'     => 'entity_id'
            ));
        }
        $this->addColumn('entity_id', array(
            'header'    => Mage::helper('catalog')->__('ID'),
            'sortable'  => true,
            'width'     => '60',
            'index'     => 'entity_id'
        ));
        $this->addColumn('name', array(
            'header'    => Mage::helper('catalog')->__('Name'),
            'index'     => 'name'
        ));
        $this->addColumn('image', array(
            'header' => Mage::helper('catalog')->__('Image'),
            'align' => 'left',
            'index' => 'image',
            'width'     => '97',
            'renderer' => 'Inchoo_Thumbnail_Block_Adminhtml_Template_Grid_Renderer_Image'
        ));
        $this->addColumn('sku', array(
            'header'    => Mage::helper('catalog')->__('SKU'),
            'width'     => '80',
            'index'     => 'sku'
        ));
        $this->addColumn('price', array(
            'header'    => Mage::helper('catalog')->__('Price'),
            'type'  => 'currency',
            'width'     => '1',
            'currency_code' => (string) Mage::getStoreConfig(Mage_Directory_Model_Currency::XML_PATH_CURRENCY_BASE),
            'index'     => 'price'
        ));
        $this->addColumn('position', array(
            'header'    => Mage::helper('catalog')->__('Position'),
            'width'     => '1',
            'type'      => 'number',
            'index'     => 'position',
            'editable'  => !$this->getCategory()->getProductsReadonly()
            //'renderer'  => 'adminhtml/widget_grid_column_renderer_input'
        ));
 
        return parent::_prepareColumns();
    }
 
    public function getGridUrl()
    {
        return $this->getUrl('*/*/grid', array('_current'=>true));
    }
 
    protected function _getSelectedProducts()
    {
        $products = $this->getRequest()->getPost('selected_products');
        if (is_null($products)) {
            $products = $this->getCategory()->getProductsPosition();
            return array_keys($products);
        }
        return $products;
    }
 
}

Now insert the code that’s highlighted above. This will select one additional attribute of a product – ‘thumbnail‘, and create a column named ‘Image‘. Note that you can do this to any grid that contains products, you’ll just need to rewrite a different block.

Lastly, we will create our renderer we called on line 89.

'renderer' => 'Inchoo_Thumbnail_Block_Adminhtml_Template_Grid_Renderer_Image'

app/code/local/Inchoo/Thumbnail/Block/Adminhtml/Template/Grid/Renderer/Image.php

<?php
class Inchoo_Thumbnail_Block_Adminhtml_Template_Grid_Renderer_Image extends Mage_Adminhtml_Block_Widget_Grid_Column_Renderer_Abstract
{
    public function render(Varien_Object $row)
    {
        $val = Mage::helper('catalog/image')->init($row, 'thumbnail')->resize(97);
        $out = "<img src=". $val ." width='97px'/>";
        return $out;
    }
}

This renderer takes a row object as a parameter. It’s calling image helper to initialize the image with a ‘thumbnail’ size, and resizes it to 97px (you can change this value to anything you like). After that, it’s returning image tag, which appears in your grid.

We also need to cover a case when no image is assigned to a product.

The quickest way is to just copy product placeholder image. I copied the default Magento placeholder from skin\adminhtml\default\default\images\placeholder\thumbnail.jpg
to
skin\adminhtml\default\default\images\catalog\product\placeholder\thumbnail.jpg

Download zipped source or view this module on GitHub.


10 comments

  1. hi.it helped me but i had some changes in it..i add editable price column instead of image(in this tutorial), but i cannot override this file

  2. works, except in products assigned to a father category and child category at same time.

    example:
    product x
    – assigned for category a
    – and assigned too for subcategory ab

    in this case, when you click in category or subcategory, don’t show the products.

    and , sometimes, returns a magento error screen.

  3. “Invalid block type: Inchoo_Thumbnail_Block_Adminhtml_Catalog_Category_Tab_Product”
    Please help!

  4. Thank you for sharing this code.
    Does it work with CE 1.9.0.1 ?
    Have followed the above steps exactly but no extra column appears in admin grid.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <blockquote cite=""> <code> <del datetime=""> <em> <s> <strike> <strong>. You may use following syntax for source code: <pre><code>$current = "Inchoo";</code></pre>.