Adding Thumbnail Image on "Related Products" on the Backend of Magento

When I add a new product at the backend, I am asked to choose the "related products", "Up-sells" and "Cross-sel开发者_运维问答ls". I would like to be able to see the thumbnail images here at the backend, so I can choose them quickly, rather than trying to choose them by name/sku.

---

Renderer image does not exist for adminhtml grid. You have to override this.

Edit file app/code/core/Mage/Adminhtml/Block/Catalog/Product/Edit/Tab/Related.php nearby line 140, under this code:

$this->addColumn('entity_id', array(
    'header'    => Mage::helper('catalog')->__('ID'),
    'sortable'  => true,
    'width'     => 60,
    'index'     => 'entity_id'
));

Paste this code:

$this->addColumn('image', array(
    'header'=> Mage::helper('catalog')->__('Image'),
    'type'  => 'image',
    'width' => '60px',
    'index' => 'image',
));

Edit file app/code/core/Mage/Adminhtml/Block/Widget/Grid/Column.php line 271, add this code to override the renderer:

case 'image':
    $rendererClass = 'adminhtml/widget_grid_column_renderer_image';
    break;

and nearby line 348 add (for the filter):

case 'image':
    $filterClass = 'adminhtml/widget_grid_column_filter_image';
    break;

Now you must create file app/code/core/Mage/Adminhtml/Block/Widget/Grid/Column/Renderer/Image.php (if not exists) with this content code:

<?php class Mage_Adminhtml_Block_Widget_Grid_Column_Renderer_Image extends 
    Mage_Adminhtml_Block_Widget_Grid_Column_Renderer_Abstract {
        protected static $showImagesUrl = null;
        protected static $showByDefault = null;
        protected static $width = null;
        protected static $height = null;

        public function __construct() {
            if(self::$showImagesUrl == null)
                self::$showImagesUrl = 1;
            if(self::$showByDefault == null)
                self::$showByDefault = 1;
            if(self::$width == null)
                self::$width = '60px';
            if(self::$height == null)
                self::$height = '60px';
        }

        /**
         * Renders grid column
         *
         * @param   Varien_Object $row
         * @return  string
         */
        public function render(Varien_Object $row) {
            return $this->_getValue($row);
        } 

        /*
        public function renderProperty(Varien_Object $row) {
            $val = $row->getData($this->getColumn()->getIndex());
            $val = Mage::helper('imagebyurl')->getImageUrl($val);
            $out = parent::renderProperty(). ' onclick="showImage('.$val.')" ';
            return $out;
        }    
        */

        protected function _getValue(Varien_Object $row) {
            //$row->getEntityId();
            $dored = false;

            if ($getter = $this->getColumn()->getGetter()) {
                $val = $row->$getter();
            }

            $val = $val2 = $row->getData($this->getColumn()->getIndex());
            $val = str_replace("no_selection", "", $val);
            $val2 = str_replace("no_selection", "", $val2);
            $url = Mage::helper('adminhtml')->getImageUrl($val);

            if(!Mage::helper('adminhtml')->getFileExists($val)) {
                $dored =true;
                $val .= "[!]";
            }

            if(strpos($val, "placeholder/")) {
                $dored = true;
            }

            $filename = substr($val2, strrpos($val2, "/")+1, 
                strlen($val2)-strrpos($val2, "/")-1);
            $_url = $url;
            //echo $_SERVER['SERVER_NAME'];


            if(!self::$showImagesUrl) $filename = '';
                if($dored) {
                    $val = "<span style=\"color:red\" id=\"img\">$filename</span>";
                } 

                else {
                    $val = "<span style=\"color:#888;\">". $filename ."</span>";
                }

                if(empty($val2) ) {
                    $out = "<center>" . $this->__("(no image)") . "</center>";
                } 

                else {
                    $out = $val. '<center><a href="'.$_url.'" target="_blank" 
                        id="imageurl">';
                }

                if(self::$showByDefault && !empty($val2) ) {
                    $out .= "<img src=". $url ." width='60px' ";
                    $out .=" />";
                }

                $out .= '</a></center>';

                return $out;

            }
        }

(You can replace width=60px by any width you want or add height)

Now you must create file app/code/core/Mage/Adminhtml/Block/Widget/Grid/Column/Filter/Image.php (if not exists) with this content code:

<?php class Mage_Adminhtml_Block_Widget_Grid_Column_Filter_Image extends Mage_Adminhtml_Block_Widget_Grid_Column_Filter_Text { }

Dont forget to refresh cache.

Now you must see an image column in the related grid.

You can do the same thing for app/code/core/Mage/Adminhtml/Block/Catalog/Product/Edit/Tab/Upsell.php and app/code/core/Mage/Adminhtml/Block/Catalog/Product/Edit/Tab/Crosssell.php

---

You could probably override a the grid controller that displays the products in that area of the admin with another field that shows you the image of the product.