Using Media Image Product Attributes

Posted on: 12th Sep 2011 By: Adam Moss 9 Comments

This is perhaps a bit of a hidden gem with Magento, because it can be extremely useful when needed. Here’s a scenario: your client wants an image on their product page which is detached from the main image gallery. A solution may be a text field or dropdown attribute, which can be used to enter a URL to the chosen image. This won’t help clients who want to add new images though unless they have sufficient FTP privelages – we all know that this can have similar consequences as letting a bull loose in a china shop, then pricking its ass with a needle.
The solution is a media image attribute, this is how to set one up…

1) Create ‘Media Image’ attribute

Step one is pretty self explanatory – set up the attribute, rewrite your indexes and add to one of your attribute sets. You’ll notice that when you choose this attribute type all the other options disappear, which is nice cos it speeds things up! Make sure you give it an understandable frontend label too.

2) Upload image to the product

It only took me a few seconds to realise that the attribute locates itself on the ‘Images’ tab of your product edit form. You simply need to upload the image that you wish to upload to use for it. In my example I’m uploading a basic ‘Sale’ banner. Once it’s uploaded, you can set it to your new attribute label by clicking the radio button and also, setting it to ‘Exclude’ itself from the main image gallery (see below).

3) Bring out on product page

The final step is to add the code required to make this image appear where you need it to show.

1	if ($_product->getBanner() != "no_selection") : ?>

2	"helper('catalog/image')->init($_product, 'banner'); ?>" alt="stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" />

3

endif; ?>

The initial conditional is essential if you wish to avoid an epic Magento error message. The final result will look something like this:

Hope this comes in useful, thanks for reading the Magento Blog at E-commerce Web Design!

Источник