Magento 1.7.0.2 List.phtml图像悬停

Question

My questions is how do I assign a custom attribute as an image for the hover image in the list.phtml file.

I have done my research and got the site to do what I want by using this code to call the image in the grid view on list.phtml

<a href="<?php echo $_product->getProductUrl() ?>"
   title="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>"
   class="product-image"><img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->constrainOnly(FALSE)->keepAspectRatio(TRUE)->keepFrame(FALSE)->resize(135); ?>"
   width="135" height="135" 
   alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>"
   onmouseover="this.src='<?php echo $this->helper('catalog/image')->init($_product, 'thumbnail')->constrainOnly(FALSE)->keepAspectRatio(TRUE)->keepFrame(FALSE)->resize(135) ?>';"
   onmouseout="this.src='<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->constrainOnly(FALSE)->keepAspectRatio(TRUE)->keepFrame(FALSE)->resize(135) ?>';" />
</a>

This works if the hover image is assigned as the thumbnail.

My issue is that I am using this extension to import all of my products and it doesnt allow to assign a different image for base, small and thumbnail. You have to use the same image. ( Yes I can go in and select each image individually and select the thumbnail but this is not an options with the number of products I have)

Ok so what I have done is created a custom attribute for the products called hover image, added the column to the csv file and hey presto it works - the hover image gets assigend to the Hover Image option under Images as seen here:

So my question is how do i edit the line of code above so it calls the new 'hover_image' attribute instead of the thumbnail. I have tried changing thumbnail to 'hover_image' but the site crashes.

Help please, i feel so close but not quite there.

Answer 1

The problem is that your attribute "hover_image" is not loaded on you category page. to change that try this:

go to any module config xml file if you are not sure about which is best use you local.xml add these lines under the config node

<config>
    ...
    <frontend>
        <product>
            <collection>
                <attributes>
                    <hover_image/>
                </attributes>
            </collection>
        </product>
    </frontend>
    ...
</config>

Since "hover_image" has no yet a placeholder we need to add it. go to skin/frontend/default/default/images/catalog/product/placeholder , here you can find placeholder for the normal images copy image.jpg and rename the copy to "hover_image.jpg"

After that, clear your cache. if you are using the product flat index, reindex it. Then you should be able to use

<?php echo $this->helper('catalog/image')
    ->init($_product, 'hover_image')
    ->resize(135) ?>

let me know if not