Media Images not available in Magento’s product list?

This is the story of how we fought Magento’s UI and recovered our missing images.

How to circumvent another of Magento’s usability quirks.

While developing a Magento store, we came across one of those head-scratching moments where everything looks right yet still refuses to play nicely. This time around, we had added a media image attribute to allow the client to upload an alternative view of the product. This was to appear in the category product list when a visitor hovered over the item.

However, after adding the attribute (code: alt_image), reindexing the catalogue (Product Flat Data) and uploading a file, calls to $_product->getAlt_image(); in catalog/product/list.phtml simply returned NULL, despite coming through fine in catalog/product/view.phtml.

The Problem

Simply? We’d missed out setting the “Used in Product Listing” option to Yes when defining the attribute.

Select Yes for Used in Product Listing

Unfortunately, Magento’s UI makes this both easy to miss and awkward to rectify.

“Easy to miss” considering “Used in Product Listing” is hidden 600px below “Catalog Input Type” (below the fold in a 1280×1024 resolution). Also, the field auto-hides when the Media Image type option is selected, so if you don’t remember to start at the bottom of the page, you’re out of luck.

“Awkward to rectify” as once a Magento attribute is saved, the “Catalog Input Type” field is disabled for editing. This means that administrators can’t reveal and alter the field without outside intervention. Or you could delete the attribute, re-add it correctly and hope you don’t have too many products to update the media gallery values of!

The Solution

Thankfully, there are a couple of tools which allow you to update the “Used in Product Listing” option after the attribute has been saved; both of which should already be familiar to you.

Web Developer Toolbar by Chris Pederick

The Web Developer Toolbar > Forms > Enable Form Fields function will make all disabled inputs editable again.

Web Developer Toolbar extension > Forms menu > Enable Fields option [screenshot]

Firebug

A slightly more long-winded way is to inspect the disabled element in Firebug and delete the “disabled” attribute, which has the same effect.

Delete "disabled" attribute in Firebug context menu while inspecting the DOM [screenshot]

Both of these tools are available on Firefox and Chrome (if you’re working in web and don’t use either of these at some point in your work-flow, something’s gone very wrong!).

Once the field is enabled, selecting any value but Fixed Product Tax will reveal the Frontend Properties again, allowing you to update the attributes’ settings.

Once you’re happy, simply save the attribute and re-index your Product Flat Data – you don’t have to worry about changing back to Media Image: Magento will ignore this value when updating the database.

Hopefully this is of help to others stuck in this situation, at least until this is resolved in a future release.

And for anybody wanting to follow this issue’s progress, its number is 26586.

Show Comments (11)

11 Responses

  1. Jagesh

    Hi,
    Is it possible to add more than one image for Media Image?
    Currently i can select only one image in admin page.
    I want to add accessories images related to that product.
    So i have added 5 imagess of product with 4 images of accessories.But i can select only one accessories.
    I want to show 4 images
    Please advice asap

    Thanks
    JageshMk

    Reply
  2. Thomas

    Thank you! I was getting crazy on this problem and didn’t expect to resolve it so easily. Almost started to rewrite the block logic

    Reply
  3. David

    Ah, thanks for the post it saved me hours of time. Can’t believe Magento didn’t put more care and attention into this….

    Reply
  4. Alistair Fletcher

    Again, I thought I was losing it. I’m working on a site that was started by someone else and trying to unravel things. Thought I was going mad until I saw this. Thank you and thank Firebug :o)

    Reply
  5. kelly

    it is very helpful. but if i want let the attribute show on the left navigation, how can i?
    i want to set an attribute named “color” and i want to add some color picture.and show it on left navigation. like this website
    http://www.gap.com/browse/category.do?cid=34608#
    when i select color, the selected product will show. how can i?
    in my other website http://www.007slim.com, i also want to have this function. i want to use my product image as the attribute. when customer choose product like “Lida Daidaihua”,i use the lida daidaihua picture as one attribute. so it will be more clearly.
    all in all, my question is how to use my custom picture as attribute just like the color

    Reply

Leave a Reply

  • (will not be published)