Show product thumbnail in grids

Show product thumbnail in grids

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.

You made it all the way down here so you must have enjoyed this post! You may also like:

How to add a custom columns to the Magento 2 products grid Ivan Matozan
, | 6

How to add a custom columns to the Magento 2 products grid

Large number of input variables in Magento Kresimir Banovic
, | 5

Large number of input variables in Magento

Custom category menu navigation in Magento Petar Sambolek
Petar Sambolek, | 16

Custom category menu navigation in Magento

14 comments

  1. Hey thanks so much for this.

    I had some issues with the renderer and errors where thrown when viewing the grid.
    So if anyone has the same issue (no images) and is on Magento 1.9.3.8, please use the code below:

    init($row, ‘thumbnail’);
    $imgSrc = “”;

    }
    catch(Exception $e) {
    $val = Mage::getDesign()->getSkinUrl(‘images/catalog/product/placeholder/image.jpg’,array(‘_area’=>’frontend’));
    $imgSrc = “”;
    }
    return $imgSrc;
    }
    }

  2. 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

  3. 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.

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

  5. 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>.

Tell us about your project

Drop us a line. We'd love to know more about your project.