Magento Forum

   
Add extra label on product image
 
manthankvora
Jr. Member
 
Total Posts:  6
Joined:  2012-04-01
 

I want to add an extra label for each and every media images same as default labels and sort orders. I have tried a lot to assign a value to every image by placing text box via code in app\design\adminhtml\default\default\template\catalog\product\helper\gallery.phtml but when I tried to save the data in product, it doesn’t get saved.

I have created a field in DB in catalog_product_entity_media_gallery_value table.

I have attached a screenshot for more description. Please guide me.

Image Attachments
extra.jpg
 
Magento Community Magento Community
Magento Community
Magento Community
 
Nitesh Lakhwani
Jr. Member
 
Total Posts:  1
Joined:  2010-06-29
 

Hi,

I have the similar requirement, my project requirement was to add a new column “image_type” in the product image gallery grid.

I was able to do it and below are the files that I modified to achieve the requirement:
Note: under the code sections below the code between “["b"]" & “["/b"]" is the code that is added or modified.

A) We have to override 3 methods of the core class “Mage_Catalog_Model_Product_Attribute_Backend_Media” located at “app\code\core\Mage\Catalog\Model\Product\Attribute\Backend”

Function 1) afterLoad($object)

if we navigate to the class “Mage_Catalog_Model_Product_Attribute_Backend_Media”, we will come across the function “afterLoad($object)”,
look for a array variable “$localAttributes”, in this array variable add an extra element ‘image_type’ i.e.

$localAttributes = array('label''position''disabled''image_type');

Function 2) afterSave($object)
if we navigate to the class “Mage_Catalog_Model_Product_Attribute_Backend_Media”, we will come across the function “afterSave($object)”, look for the comments “// Add per store labels, position, disabled”, under

$data['label']    $image['label'];
add one more additional code
$data['image_type']    $image['image_type'];

Function 3) beforeSave($object)

public function beforeSave($object)
    
{
        $attrCode 
$this->getAttribute()->getAttributeCode();
        
$value $object->getData($attrCode);
        if (!
is_array($value) || !isset($value['images'])) {
            
return;
        
}

        
if(!is_array($value['images']) && strlen($value['images']) > 0{
           $value[
'images'Mage::helper('core')->jsonDecode($value['images']);
        
}

        
if (!is_array($value['images'])) {
           $value[
'images'= array();
        
}

        $clearImages 
= array();
        
$newImages   = array();
        
$existImages = array();
        if (
$object->getIsDuplicate()!=true{
            
foreach ($value['images'as &$image{
                
if(!empty($image['removed'])) {
                    $clearImages[] 
$image['file'];
                
else if (!isset($image['value_id'])) {
                    
// code change done by Zeon
                    
$newFile                   $this->_moveImageFromTmp($image['file']);
                    
$image['new_file'$newFile;
                    
$newImages[$image['file']] $image;
                    
$this->_renamedImages[$image['file']] $newFile;
                    
$image['file']             $newFile;
                
else {
                    $existImages[$image[
'file']] $image;
                
}
            }
        } 
else {
            
// For duplicating we need copy original images.
            
$duplicate = array();
            foreach (
$value['images'as &$image{
                
if (!isset($image['value_id'])) {
                    
continue;
                
}
                $duplicate[$image[
'value_id']] $this->_copyImage($image['file']);
                
$newImages[$image['file']] $duplicate[$image['value_id']];
            
}

            $value[
'duplicate'$duplicate;
        
}

        
foreach ($object->getMediaAttributes() as $mediaAttribute{
            $mediaAttrCode 
$mediaAttribute->getAttributeCode();
            
$attrData $object->getData($mediaAttrCode);

            if (
in_array($attrData$clearImages)) {
                $object
->setData($mediaAttrCode'no_selection');
            
}

            
if (in_array($attrDataarray_keys($newImages))) {
                $object
->setData($mediaAttrCode$newImages[$attrData]['new_file']);
                
$object->setData($mediaAttrCode.'_label'$newImages[$attrData]['label']);
                
[b]$object->setData($mediaAttrCode.'_type'$newImages[$attrData]['image_type']);[/b]
            }

            
if (in_array($attrDataarray_keys($existImages))) {
                $object
->setData($mediaAttrCode.'_label'$existImages[$attrData]['label']);
                
[b]$object->setData($mediaAttrCode.'_type'$existImages[$attrData]['image_type']);[/b]
            }
        }

        Mage
::dispatchEvent('catalog_product_media_save_before', array('product' => $object'images' => $value));

        
$object->setData($attrCode$value);

        return 
$this;
    
}

B) Edit the phtml file “app/design/adminhtml/default/default/catalog/product/helper/gallery.phtml”

<?php
/**
 * Template for block Mage_Adminhtml_Block_Catalog_Product_Helper_Form_Gallery_Content
 */
?>
<?php
$_block 
$this;
/* @var $_block Mage_Adminhtml_Block_Catalog_Product_Helper_Form_Gallery_Content */
?>
<div id="<?php echo $_block->getHtmlId() ?>" >
<
ul class="messages">
    <
li class="notice-msg">
        <
ul>
            <
li>
            
<?php echo Mage::helper('catalog')->__('Image type and information need to be specified for each store view.'); ?>
            
</li>
        </
ul>
    </
li>
</
ul>
<
div class="grid">
<
table cellspacing="0" class="data border" id="<?php echo $_block->getHtmlId() ?>_grid" width="100%">
    <
col width="1" />
    <
col />
    <
col width="70" />
    
<?php foreach ($_block->getImageTypes() as $typeId=>$type): ?>
    
<col />
    
<?php endforeach; ?>
    
<col width="70" />
    <
col width="70" />
    <
thead>
        <
tr class="headings">
            <
th><?php echo Mage::helper('catalog')->__('Image'?></th>
            <
th><?php echo Mage::helper('catalog')->__('Label'?></th>
            <
th><?php echo Mage::helper('catalog')->__('Sort Order'?></th>
           
[b]<th><?php echo Mage::helper('catalog')->__('Image Type'?></th>[/b]
            <?php 
foreach ($_block->getImageTypes() as $typeId=>$type): ?>
            
<th><?php echo $type['label'] ?></th>
            
<?php endforeach; ?>
            
<th><?php echo Mage::helper('catalog')->__('Exclude'?></th>
            <
th class="last"><?php echo Mage::helper('catalog')->__('Remove'?></th>
        </
tr>
    </
thead>
    <
tbody id="<?php echo $_block->getHtmlId() ?>_list">
        <
tr id="<?php echo $_block->getHtmlId() ?>_template" class="template no-display">
                <
td class="cell-image"><div class="place-holder" onmouseover="<?php echo $_block->getJsObjectName(); ?>.loadImage('__file__')"><span><?php echo Mage::helper('catalog')->__('Roll Over for preview'?></span></div><img src="<?php echo $this->getSkinUrl('images/spacer.gif')?>" width="100" style="display:none;" alt="" /></td>
                <
td class="cell-label"><input type="text" <?php if($_block->getElement()->getReadonly()):?> disabled="disabled"<?php endif;?> class="input-text" onkeyup="<?php echo $_block->getJsObjectName(); ?>.updateImage('__file__')" onchange="<?php echo $_block->getJsObjectName(); ?>.updateImage('__file__')" /></td>
                <
td class="cell-position"><input type="text" <?php if($_block->getElement()->getReadonly()):?> disabled="disabled"<?php endif;?> class="input-text validate-number" onkeyup="<?php echo $_block->getJsObjectName(); ?>.updateImage('__file__')" onchange="<?php echo $_block->getJsObjectName(); ?>.updateImage('__file__')" /></td>
                
[b]<td class="cell-image-type"><input type="text" <?php if($_block->getElement()->getReadonly()):?> disabled="disabled"<?php endif;?> class="input-text" onkeyup="<?php echo $_block->getJsObjectName(); ?>.updateImage('__file__')" onchange="<?php echo $_block->getJsObjectName(); ?>.updateImage('__file__')" /></td>[/b]
                <?php 
foreach ($_block->getImageTypes() as $typeId=>$type): ?>
                
<td class="cell-<?php echo $typeId ?> a-center"><input <?php if($_block->getElement()->getAttributeReadonly($typeId)) :?> disabled="disabled" <?php endif;?> type="radio" name="<?php echo $type['field'] ?>" onclick="<?php echo $_block->getJsObjectName(); ?>.setProductImages('__file__')" value="__file__" /></td>
                
<?php endforeach; ?>
                
<td class="cell-disable a-center"><input type="checkbox" <?php if($_block->getElement()->getReadonly()):?> disabled="disabled"<?php endif;?> onclick="<?php echo $_block->getJsObjectName(); ?>.updateImage('__file__')" /></td>
                <
td class="cell-remove a-center last"><input type="checkbox" <?php if($_block->getElement()->getReadonly()):?> disabled="disabled"<?php endif;?> onclick="<?php echo $_block->getJsObjectName(); ?>.updateImage('__file__')" /></td>
        </
tr>
        
<?php if($_block->hasUseDefault()): ?>
        
<tr id="<?php echo $_block->getHtmlId() ?>_default">
                <
td><?php echo Mage::helper('catalog')->__('Use Default Value'?></td>
                <
td>&nbsp;</td>
                <
td>&nbsp;</td>
                <
td>&nbsp;</td>
                
<?php foreach ($_block->getMediaAttributes() as $_attribute): ?>
                
<td class="a-center">
                
<?php if($_block->getElement()->canDisplayUseDefault($_attribute)): ?>
                
<input class="default-checkbox" name="use_default[]" type="checkbox" <?php if($_block->getElement()->getAttributeReadonly($_attribute->getAttributeCode())):?> disabled="disabled" <?php endif;?>  onclick="<?php echo $_block->getJsObjectName(); ?>.updateUseDefault()"
<?php if($_block->getElement()->usedDefault($_attribute)): ?>checked<?php endif; ?> value="<?php echo $_attribute->getAttributeCode() ?>" />
                
<?php endif ?>
                
</td>
                
<?php endforeach; ?>
                
<td>&nbsp;</td>
                <
td class="last">&nbsp;</td>
        </
tr>
    
<?php endif ?>
        
<tr id="<?php echo $_block->getHtmlId() ?>-image-0">
                <
td class="cell-image"><?php echo Mage::helper('catalog')->__('No image'?></td>
                <
td class="cell-label"><input type="hidden" />&nbsp;</td>
                <
td class="cell-position"><input type="hidden" />&nbsp;</td>
                
[b]<td class="cell-image-type"><input type="hidden" />&nbsp;</td>[/b]
                <?php 
foreach ($_block->getImageTypes() as $typeId=>$type): ?>
                
<td class="cell-<?php echo $typeId ?> a-center"><input type="radio" <?php if($_block->getElement()->getAttributeReadonly($typeId)) :?> disabled="disabled" <?php endif;?> name="<?php echo $type['field'] ?>" onclick="<?php echo $_block->getJsObjectName(); ?>.setProductImages('no_selection')" value="no_selection" /></td>
                
<?php endforeach; ?>
                
<td class="cell-disable"><input type="hidden" />&nbsp;</td>
                <
td class="cell-remove last"><input type="hidden" />&nbsp;</td>
        </
tr>
    </
tbody>
<?php if (!$_block->getElement()->getReadonly()):?>
    
<tfoot>
        <
tr>
            <
td colspan="100" class="last" style="padding:8px">
                
<?php echo $_block->getUploaderHtml() ?>
            
</td>
        </
tr>
    </
tfoot>
<?php endif;?>
</table>
</
div>
</
div>
<
input type="hidden" id="<?php echo $_block->getHtmlId() ?>_save" name="<?php echo $_block->getElement()->getName() ?>[images]" value="<?php echo $_block->htmlEscape($_block->getImagesJson()) ?>" />
<
input type="hidden" id="<?php echo $_block->getHtmlId() ?>_save_image" name="<?php echo $_block->getElement()->getName() ?>[values]" value="<?php echo $_block->htmlEscape($_block->getImagesValuesJson()) ?>" />
<
script type="text/javascript">
//<![CDATA[
var <?php echo $_block->getJsObjectName(); ?> = new Product.Gallery('<?php echo $_block->getHtmlId() ?>'<?php if ($_block->getElement()->getReadonly()):?>null<?php else:?><?php echo $_block->getUploader()->getJsObjectName() ?><?php endif;?><?php echo $_block->getImageTypesJson() ?>);
//]]>
</script>

C) Edit the .js file “js/mage/adminhtml/product.js”
Navigate through the file and look for the function “updateImage()” and update the code as highlighted below:

updateImage : function(file{
        
var index this.getIndexByFile(file);
        
this.images[index].label this
                
.getFileElement(file'cell-label input').value;
        
[b]this.images[index].image_type this.getFileElement(file'cell-image-type input').value;[/b]
        this
.images[index].position this.getFileElement(file,
                
'cell-position input').value;
        
this.images[index].removed = (this.getFileElement(file,
                
'cell-remove input').checked 0);
        
this.images[index].disabled = (this.getFileElement(file,
                
'cell-disable input').checked 0);
        
this.getElement('save').value Object.toJSON(this.images);
        
this.updateState(file);
        
this.container.setHasChanges();
    
},

Now, look for the function “” and do the changes as highlighted below:

handleUploadComplete : function(files{
        files
.each( function(item{
            
if (!item.response.isJSON()) {
                
try {
                    console
.log(item.response);
                
catch (e2{
                    alert(item
.response);
                
}
                
return;
            
}
            
var response item.response.evalJSON();
            if (
response.error) {
                
return;
            
}
            
var newImage {};
            
newImage.url response.url;
            
newImage.file response.file;
            
[b]newImage.image_type'external';[/b]
            newImage
.label '';
            
newImage.position this.getNextPosition();
            
newImage.disabled 0;
            
newImage.removed 0;
            
this.images.push(newImage);
            
this.uploader.removeFile(item.id);
        
}.bind(this));
        
this.container.setHasChanges();
        
this.updateImages();
    
},

D) Override a function in the class “Mage_Catalog_Model_Resource_Product_Attribute_Backend_Media” located at “app/code/core/Mage/Catalog/Model/Resource/Product/Attribute/Backend/Media.php”, modify it as highlighted below:

public function loadGallery($product$object)
    {
        $adapter 
$this->_getReadAdapter();

        
$positionCheckSql $adapter->getCheckSql('value.position IS NULL''default_value.position''value.position');

        
// Select gallery images for product
        
$select $adapter->select()
            
->from(
                array(
'main'=>$this->getMainTable()),
                array(
'value_id''value AS file')
            )
            ->
joinLeft(
                array(
'value' => $this->getTable(self::GALLERY_VALUE_TABLE)),
                
$adapter->quoteInto('main.value_id = value.value_id AND value.store_id = ?', (int)$product->getStoreId()),
                
[b]array('label','position','disabled','image_type')[/b]
            
)
            ->
joinLeft// Joining default values
                
array('default_value' => $this->getTable(self::GALLERY_VALUE_TABLE)),
                
'main.value_id = default_value.value_id AND default_value.store_id = 0',
                array(
                    
'label_default' => 'label',
                    
'position_default' => 'position',
                    
'disabled_default' => 'disabled',
                  
[b]  'image_type_default' => 'image_type'[/b]
                
)
            )
            ->
where('main.attribute_id = ?'$object->getAttribute()->getId())
            ->
where('main.entity_id = ?'$product->getId())
            ->
order($positionCheckSql ' ' Varien_Db_Select::SQL_ASC);

        
$result $adapter->fetchAll($select);
        
$this->_removeDuplicates($result);
        return 
$result;
    
}

E) Create a column “image_type” in the database in the table “catalog_product_entity_media_gallery_value”

F) Add the 3 attributes same a the label attribute i.e. image_label, small_image_label, thumbnail_label, so in the above case we will create attribute as image_type, small_image_type, thumbnail_type (properties of the attributes should be same as of the label attributes) and assign the 3 attributes to the attribute set default and attribute group general.

G) To load the attributes in the product collection on frontend navigate to the app/code/core/Mage/Catalog/etc/config.xml and three nodes as in the code below:

<product>
            <
collection>
                <
attributes>
                    <
name/>
                    <
url_key/>
                    <
price/>
                    <
special_price/>
                    <
special_from_date/>
                    <
special_to_date/>
                    <
short_description/>
                    <
thumbnail/>
                    <
small_image/>
                    <
image_label/>
                    <
thumbnail_label/>
                    <
small_image_label/>
            
[b]<image_type/>[/b]
                    [b]
<thumbnail_type/>[/b]
                    [b]
<small_image_type/>[/b]
                    
<tax_class_id/>
                    <
status/>
                    <
news_from_date/>
                    <
news_to_date/>
                    <
created_at/>
                    <
updated_at/>
                </
attributes>
            </
collection>
        </
product>

I hope this will be helpful.
Note: under the code sections above the code between “["b"]" & “["/b"]" is the code that is added or modified.

 
Magento Community Magento Community
Magento Community
Magento Community
 
swekamtech
Jr. Member
 
Total Posts:  5
Joined:  2013-09-18
 

I tried this extension and it was more effective..!!

Advanced Product Labels

 
Magento Community Magento Community
Magento Community
Magento Community
 
Amasty
Mentor
 
Avatar
Total Posts:  3769
Joined:  2009-11-10
 

Hi there, you can also try this module http://amasty.com/product-labels.html as an alternative solution. This easy-to-use extension allows you to highlight ‘on sale’ products, products with special price, new products. You can also emphasize other important product information like ‘100% natural’, ‘environment-friendly’ and so on.

With the module you get a rich set of useful features:

- Highlighting products with colorful badges
- Displaying the labels based on category, price, status, etc
- Specifying time period for display of labels

You can also use variables for label messages and set priorities for label display.

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
    Back to top