Thanks for taking the time to read this.

I am attempting to show the image label for the alternative product images (colours).

The issue is that

title="<?php echo $_product->getProduct();?>"

Will return the configurable product label, e.g. Lemming Shoes.


title="<?php echo $_product->getImageLabel();?>"

Returns only the FIRST product label, e.g. Lemming Shoes - Black.

So, when I get the mouseover on the second image I get the "Lemming Shoes - Black" even though I'm hovering over the image for the Grey Lemming Shoes.

How do I call the right Image Label?!

Magento ver. Debian 7

I'm working on media.phtml.

Here's a dump of it:


 * Product media data template
 * @see Mage_Catalog_Block_Product_View_Media
<script type="text/javascript" src="<?php echo $this->getSkinUrl('cloud-zoom/cloud-zoom.1.0.2.min.js');?>"></script>
<link rel="stylesheet" type="text/css" href="<?php echo $this->getSkinUrl('cloud-zoom/cloud-zoom.css');?>" media="screen" />

<script type="text/javascript" src="<?php echo $this->getSkinUrl('fancybox/jquery.fancybox-1.3.4.pack.js');?>"></script>
<link rel="stylesheet" type="text/css" href="<?php echo $this->getSkinUrl('fancybox/jquery.fancybox-1.3.4.css');?>" media="screen" />
<script type="text/javascript" src="<?php echo $this->getSkinUrl('fancybox/fancybox.setting.js');?>"></script>

    $_product = $this->getProduct();
    $_helper = $this->helper('catalog/output');
<?php if ($_product->getImage() != 'no_selection' && $_product->getImage()): ?>
<p class="product-image product-image-zoom">
        $_img = '<a href="'.$this->helper('catalog/image')->init($_product, 'image').'" id="zoom1" class="cloud-zoom" rel="position: \'right\'" title="'.$this->htmlEscape($this->getImageLabel()).'" ><img id="image" src="'.$this->helper('catalog/image')->init($_product, 'image')->resize(590,590).'" alt="'.$this->htmlEscape($this->getImageLabel()).'" title="'.$this->htmlEscape($this->getImageLabel()).'" /></a>';

        echo $_helper->productAttribute($_product, $_img, 'image');
<div class="img-shadow">&nbsp;</div>
<?php /*?><p class="zoom-notice" id="track_hint"><?php echo $this->__('Double click on above image to view full picture') ?></p>
<div class="zoom">
    <img id="zoom_out" src="<?php echo $this->getSkinUrl('images/slider_btn_zoom_out.gif') ?>" alt="<?php echo $this->__('Zoom Out') ?>" title="<?php echo $this->__('Zoom Out') ?>" class="btn-zoom-out" />
    <div id="track">
        <div id="handle"></div>
    <img id="zoom_in" src="<?php echo $this->getSkinUrl('images/slider_btn_zoom_in.gif') ?>" alt="<?php echo $this->__('Zoom In') ?>" title="<?php echo $this->__('Zoom In') ?>" class="btn-zoom-in" />
<script type="text/javascript">
    Event.observe(window, 'load', function() {
        product_zoom = new Product.Zoom('image', 'track', 'handle', 'zoom_in', 'zoom_out', 'track_hint');
</script><?php */?>
<?php else: ?>
<p class="product-image">
        $_img = '<img src="'.$this->helper('catalog/image')->init($_product, 'image')->resize(590,590).'" id="zoom1" class="cloud-zoom" title="'.$this->htmlEscape($this->getImageLabel()).'" />';
        echo $_helper->productAttribute($_product, $_img, 'image');
<?php endif; ?>
<?php if (count($this->getGalleryImages()) > 0): ?>
<div class="more-views">
    <?php /*?><h2><?php echo $this->__('More Views') ?></h2><?php */?>
    <ul id="more">
    <?php foreach ($this->getGalleryImages() as $_image): ?>

        <li><a href="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile()); ?>"  rel="image_gallery" title="<?php echo $_product->getProduct();?>"><img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(55,55); ?>"  alt=""/></a></li>

    <?php endforeach; ?>
<?php endif; ?>
<script type="text/javascript" src="<?php echo $this->getSkinUrl('js/jquery.jcarousel.min.js');?>"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
        wrap: 'circular',
  • 1
    Can you please update your question with what file you're working from (I'm guessing Media) and some extra code like for example the for loop you're using to get all the images?
    – Sander Mangel
    Oct 21 '13 at 13:05
  • Sure thing: I'll add above. Oct 22 '13 at 10:21

I think what you can do is pass in the desired child product to the call to get the image label.

<?php echo $_product->getImageLabel($_childProduct);?>

As the getImageLabel code uses the a product passed in to get the attribute, or it will load it from a getProduct call if there is not one passed in.

Though you may find this is heavy on the resources and it might be a better idea to load the product attribute from the id without the full product.

$_resource = $this->getProduct()->getResource();
$labelValue = $_resource->getAttributeRawValue($_childProduct, 'image_label', Mage::app()->getStore());

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.