Shane and I had a tough enough day yesterday getting the Ubercart Option Images Module (uc_option_image) to work on an eCommerce site we are developing for a client in Dublin; plenty of head scratching with some mild cursing - but we finally got it running very nicely indeed and have decided to write a few notes on the process in the hope that they might help someone else in a similar pickle.

'Option Images' is a really nice module that allows you to supply an image for each of your product attribute options. When viewing a product the image changes as the visitor chooses options - very handy for product colours, etc.

The problem is that at the time of writing, the Ubercart Option Images Module 6.x-1.4 as presented and recommended for download on its official page just doesn't work - in fact it won't even install!

So, to cut a rather long story short, we found that the update in this post (#17) does work:

http://drupal.org/node/550344#comment-2113120

So ignore the 'official' install and use this one instead, big hats-off to the all on this thread (and many others) who managed to get it whipped into shape - you're life savers lads!

To install the module download uc_option_image.zip from post #17 and extract it into your 'sites/all/modules directory'. You will need to have the ImageCache module already installed.

Once you have enabled it, go to 'Store Administration / Configuration / Attributes' (/admin/store/settings/attributes). Here you should enable Option Images for the desired products. You will also need to select an image cache preset that will be used for displaying the images on the product display page.

Now head over to one of the products for which you have enabled Option Images and hit 'Edit', go to the 'options' tab - you should see a new image field and browse button added to the end of each option. We found that this extended table didn't work with our drupal template and wouldn't display correctly at all. To get around this problem we enabled the default 'garland' theme for the administration pages. If you encounter this problem, the admin theme can be set this can be set on the 'Administer / Administration Theme' page (admin/settings/admin).

Upload an image for each option, once uploaded an image preview should be displayed alongside each option.

It is important that the product's first attribute set that is enabled for Option Images is not marked as 'required', for some strange reason if it is the option image display won't work. To check this click on the 'Attributes' tab when editing the product. The other attribute sets can be marked as 'required'.

If you are using the default ubercart product display, the option images should now be displayed when viewing the product, they should change as you select different product options (the default product image isn't replaced the option image is displayed in addition to it)

We find that it is hard to get our products displaying nicely just using the default ubercart product display stuff - we normally provide a contemplate (Content Template) to have complete control over how products are presented. In this way we can get the product display to match up with our target web design. If you are using an alternative template the attribute option images will not be automatically shown, instead you have to manually insert a bit of code to add the image. The following code should do the trick:

Place the code into your template at the position you want the option images to show up.

Hopefully after all this the attribute image should be working. Thanks again to all who put the work into patching up the module! When the module is working it is fantastic, and it is well worth the effort to get it installed and configured - do let us know if you have success or if you encounter other hitches that are not detailed here.