Option Images Bug Fixes and Enhancements

@gtin: Looks like some of this might be dealt with a bit differently in 6.x-1.x-dev, but here's a patch against the 6.x-1.4 version to help clarify what you modified.

@pillarsdotnet: should these modifications be broken into separate patches?

Thanks for the update gtin!!

The javascript fix did the job for me in FF on OSX. Still not working on OSX in Opera9 & Safari4. On Windows not working in IE7 nor FF.

I've only been playing with this mod for an hour or so, and the only issue I appear to be having is with the images not switching when the selection or radio is changed.

I noticed in the .js file that there are refs to lightbox. Is use of lightbox the bit that makes the images working on your prod site? I'm using thickbox as recommended somewhere(I think by ubercart!?).

What browsers you tested against on your prod site?

Thanks for getting back to me.

I have a habit of flushing the cache several times during a development session(just in case) as well as clearing browser cache(although I have been known to forget from time to time).

Given it worked across your range of browsers it made me play around further. After a bit of playing around I realized it was only showing when I was logged in as admin. DOH!! a lightning bolt hit me and I'm embarrassed to say I forgot to change the user permissions of the imagecache and the Ubercart options images.

I need to develop a new habit;

1. install a module
2. go to user permissions
3. config the module.

Thanks for the help and fix, it's flying now!!

@gtin

I think you've got a small bug in your js file;

  catch (e){   
    this.switchImageEffect(image, this.noimage); 

should it be

  catch (e){   
    this.switchImageEffect(image, lightbox, this.noimage); 

switchImageEffect takes 3 params not 2.

I noticed it because I'm getting blank nids which is forcing the catch.

This worked for me too, but it took me HOURS ti figure out this was the most comprehensive collection of fixes, etc. gtin thanks for packing all of this up... how can we get this updated on the project page?

...actually it worked for me then stopped working... and now i can't figure out which combination of whose fixes from the issue queue made it work for me. dear goodness...

Update from http://drupal.org/node/589476#comment-2092492:

I have gotten this module to work using gtin's update in post #2 above.

Selecting "required" for THE FIRST OPTION under the "attributes" menu while editing a product causes this module not to work. It seems the attribute listed first is automatically "required" by nature as that attribute's default option's image is then used for the product's default catalog image unless using imagecache imagefield to upload other images.
As long as the first attribute in that list is not checked as "required" this module works. It also only seems to work on Garland-based themes... I haven't successfully gotten it to work for any other themes yet.

Can anyone else confirm these things?

Would it not be feasible to commit gtin's update in post #2 above to the main project page? At least it would then install for people without error and work under the conditions i mentioned above. A caveat could be stated on the project page stating the above. How do we do this? Forgive my ignorance in this area. I assume one of the project maintainers would have to do this.

Nice job, gtin. I did a little quick testing on a few themes for fun and can confirm that this module now appears to work for Acquia Prosper and the Sky themes!!!! YAY!!! Whereas AD Novus and Forest Floor resulted in some weird behavior of the image fading out and nothing fading back in... but perhaps that wasn't because of the .js file at all.... this was not thorough testing by any means. I"m just starting the feedback. Awesome improvement, THANKS gtin!!

I also just wanted to contribute this with respect to the uc_option_image.js file as well.

All seems to work great for me with firefox, but with Internet explorer 8 (and in 7 compat mode) it does this:

The first option with images select box works great and images fade in and out... but the second doesn't trigger any image fading.

you can see what i mean here: http://www.countryinspirations.com/content/wooden-sign-assorted-sayings if you use IE (hopefullY)

I'm definitely newbie to this modules development, but shouldn't line 862 of uc_option_image.module (the one from gtin's latest update http://drupal.org/node/550344#comment-2004092 above) be this:

          $row = array_pad($row, -10, '');

rather than this:

          $row = array_pad($row, -9, '');

...and then line 879 similarly be this:

    $rows[] = array(array('data' => '<hr />', 'colspan' => 10));

rather than this:

    $rows[] = array(array('data' => '<hr />', 'colspan' => 9));

I was noticing all rows (except for the rows with the attribute name) in the table of options at /node/*/edit/options were shifted one cell to the left.
This seems to have fixed the problem for me.

With all the changes, does the "required" option still have to be unchecked? Most of my attribute options are required.

Either way, I'll be reinstalling today and trying again. Thanks guys!

From my experience so far currently yes the required option does still need to be unchecked for the first listed attribute; however, from my experience the first listed attribute automatically/inherently becomes required with the option images module installed... Maybe this is why it can't be somehow redundantly marked as required.

Good luck.

Edit: had to delete to whole module folder and reload it, then it worked perfectly!

Great work, gtin- and THANKS!

I can confirm that module works with Acquia Prosper- and very likely most any of them.

The only issue i noticed had to do with:

2) The issue of the required attributes not working has been fixed as well

This indeed has been fixed however a new side effect i noticed was that now, IF the first listed attribute is indeed checked as required, the main/default catalog image for that product then seems to fall back on whatever imagecache image was is assigned to the product and in page view "no image" is displayed by default, rather than the option images module item default. Does this make sense?

I can see how this is the idea configuration unless you would like the products default image to be that of the first listed default option image and have it checked as required... except... that is irrelevant i suppose because you could just upload it as the first imagecache image as well. Does that make sense? This is not really an issue i suppose but just thought i'd mention it. :)

...otherwise, it behaves as it did before.

Also, another small note... i'm noticing that the No Image image for me is now pointing to:
http://www.site.com/sites/default/files/imagecache/medium/sites/all/modu...
...however i'm not finding that file exists. There was a no-image.png file there but that has since disappeared ( i flushed the medium preset cache)

Nice work!

Thanks for checking on the issue of the images not fade in/out in IE when using multiple attributes... i'll get back to you on this...

With respect to the issue of the images not fade in/out in IE when using multiple attributes...

I believe this is an incompatibility with the UC Attribute Stock Filter module of some sort. Please see my example of this occuring here:

http://www.countryinspirations.com/content/ie-test

Do this:

• under Print, select "Americana"
  • In FF and IE you'll hopefully notice that the picture fades as it should to a new image (Please don't mind the random irrelevant picture)
• then under Sign Saying, select "Believe / [...]"
  • In FF the picture fades out and into the one for the "Believe / [...]" attribute, but in IE the picture does not change.
• if you happened to refresh the page and select the same options i mentioned above in reverse order the same thing would happen respectively in IE and FF

This all seems to be happening because for this test product i'm showing you, i have some combinations of attributes with SKU TEST that are in stock, and some other combinations of attributes with SKU TEST1 and SKU TEST2 that are out of stock. So the out of stock combinations of attributes options are filtered out. If all combinations of attributes were in stock the above would work fine in IE.

AS A SEPERATE IE vs Firefox bug (seemingly independent from the issue above):

• In IE, if you try to "start over" by selecting "Please select" you'll notice the Option image abruptly disappears and then doesn't reappear with the selection of any attributes. If you try this with FF it continues functioning as it should with the reselection of any attributes.

I hope this helps- let me know if you have any questions or suggestions. THanks!!

Thank-you for this. This has solved many of the issues I had and provide many awesome new features! A+++

I had this module working just fine with UC2-rc3 and now on rc7 all seems broken, and looking this module's issue queue doesn't give much hope. It seems that you guys have been pretty much on top of this module here and on #589476: Has anyone got this working???.

Is there anyone that can summarize the status of the module patches and stuff, what should be applied and what's the words from the module's maintainer?

Should I use the latest zip from this issue or any other?

Is there any possibility of actively helping with this module, maybe having CVS access to it and help with the development?

I am a maintainer of several modules and this is one I used to use, so If I can get this one right I might be able to help.

Thanks,
a.=

I feel that the zip from post #17 in this thread is the best version of this module yet. It resolves a lot of issues, and I plan to put it fully to the test tomorrow afternoon while I knock out my cart site.

+1

Post number 17 worked for us.

We're using a custom theme.

I don't think this module should be listed as working, to my mind, not installing is a big problem that needs to be fixed before something should be listed as working.

Thanks a million to everyone on these threads who have helped us get this working.

I think this module needs a new maintainer, didn't the guy who wrote it say he couldn't keep working on this? Can someone else take over? gtin for example.

Yup, big thanks to everyone.

I second that this module should be downgraded to "in development."

Thanks to the original developer and to gtin for your fixes in post #17, I'm trying this module out and it's very promising.

Without understanding too much of how this works yet, I noticed the product node page was calling for an image "noimage.png" inside my module folder, until I chose an option. There are several comments about this in the issues, but I didn't quite understand how to fix it. There isn't an image by that name by default, but that's easy to take care by either renaming the image in the module folder or updating the code in the .module file from no_image.png to noimage.png (around line 800).

I'd rather it show a default option image until another options is chosen, so I'll have to figure that out (has someone done this?).

It would really cool to show all the different option images as thumbnails beneath a large product image, and when you choose one of the options, the main product image is swapped out with the new option image (e.g.- I see thumbnails of a product in different colors, and then choosing the 'red' option, the main product image changes to the red shot). Of course then I should develop that feature, rather than just mention it. Maybe a future project will help pay for that...

This UC Radio Images module looks like another route to go, for just showing images next to options: http://www.ubercart.org/contrib/12322

It would really cool to show all the different option images as thumbnails beneath a large product image, and when you choose one of the options, the main product image is swapped out with the new option image (e.g.- I see thumbnails of a product in different colors, and then choosing the 'red' option, the main product image changes to the red shot).

+1

I tried this module and all worked fine until the last update of views and uc_rc 7. Now on my views pages all attr's images are gone. Then I applied module from the #17 comment and it didn't help. Did anybody else have similar issues?

just tryed #17 with Ubercart 2.2: installed flawlessly and seems to play nice :) thanks!

shall we move this to RTBC?

The module is working flawlessly but the product list image within the catalog is not showing. I'm wondering how did you guys solve the issue. I've gone through most of the posts and just can't seem to find a solution to it.

[Not intending to sound like a twit, but while you're patching and fixing and perfecting...]

uc_option_image.module
line 266
Changed:
-Set option images toi be the same for all prducts
+Set option images to be the same for all products

I'm not going to submit a patch over typos. But, if someone is about to submit one for technical purposes, I'd be happy to point out any typos I find.

Hello,

Thanks to all who reviewed and corrected the code! I just spent about 2 hours reading through the issue queue and was very glad to find the version in #17.

One thing I noticed however:

I would like that it shows the picture of the default option I defined under edit->options when it is first loaded. Does anybody know how to achieve this?

Thanks!
Roger

Q: is the maintainer still active here?

I have UberCart 2 installed with Drupal 6 and was trying this module uc_option_image and until I found this post I can now display my images with the radio buttons attribute options.

Think this is a very good module as it actually works compared to the downloadable one on drupal.org.
I have one issue, is that I am using galleria for my images and jcarousel for thumbnails. When I select an option via radio boxes it displays the image below the thumbnail view in a separate image window.

Does anyone know how to get this image to be integrated with the main image on the screen. Looking and playing with this module it looks like the functions are corrected. I have tested in IE7 and works fine for me.

Thanks.

Kudos to the module remake at #17, worth core IMO!

Just one feature request: it would be great if it could support uc_i18n_sync to automatically synchronize the images across products translations (now if you have 3 languages with 3 options, you need to insert the images 9 times :-/ ). Thanks!

thanks all.........comment #17 helped..........:)

if I have 2 or more attributes, the image is still one
for example i have "color" and "fabric" attributes... when i selecting "color", the color picture displays, but when i select "fabric", the "fabric" picture displays over the "color" picture
it will be good if each attribute have it's own independent image to select

Has anyone gotten the default image to show before any options were selected? Mine seems to be blank until a selection is made. I am using files from post #17, and a default theme on drupal 6.16 ubercart 2.2

Also if I change to the Acquia Prosper theme it doesn't show the option images unless I do a print $content; , but then it shows all the content. Is there a way to just show the option images?

I am also interested in small thumbnails of all the option images, that when selected would also change the main image, if anyone has any suggestions on that.

any help would be appreciated. Thanks to everyone who posted these patches/fixes btw, it does work better than the original drupal.org download.

I have figured out how to display just the images in your theme in case anyone else finds this useful.

 $uc_option_images = theme('uc_option_image', $file, $size); 
print $uc_option_images 

Suzi,

For all the thumbnails you might try looking at radio_images contrib for Ubercart; you could hide the buttons with CSS and just display the clickable images.

http://www.ubercart.org/contrib/12322

Thanks I actually just found that module. It doesn't seem to work in IE.

I am looking for help with the option images. I have a product that comes in about 35 colors. I tried to load all the images in, but it doesn't seem to add the image after the first 20 in the list. Has anyone else come across this issue?

I have ended up adding them directly into the database manually, in the files table. Luckily I only have about 3 products I need to add more than 20 options to.

Hi,

I've gone through this thread and haven't quite seen my bug, if it is a bug and not just me. After performing several of the above fixes and some configuring I had to do at my end, the options in drop down box and default pic are showing just fine. However, when I change options the pic does not change. I've tried in IE8 and Firefox 3.6.3 Am I missing a setting somewhere or is this a bug? If so, which, and how do I fix? Please check and see if it works for you http://www.wireyourworld.com/content/ear-sweeps-pins-sterling-silver-swa...

Should I be using the file from post #17? That was from Oct 2009, is it still required?

nevermind, just tried it, still having problem, pics are not changing, please advise!

I take it back, Fix from post #17 did fix the issues, after I redid my settings and cleared the cache under admin/performance.

Yay!

I am having the same issue as wireyourworld, but I can't seem to get it to work. For now I have reverted from Acquia Prosper to Garland to see if theming was the issue, but that hasn't fixed it. I deleted the modules folder, cleared the cache, and reinstalled the modules (using the #17 version of Option Images). What does "redid my settings" entail? I'm not sure what else could be preventing the image from switching when a different option is selected. Any help would be appreciated.

Thx

Darrice, after I struggled with the same issue for a week, I think I have it worked out. Try creating a new image cache preset (I made 2: option_thumb and option_full) and go to store admin > Attribute settings and switch the image size options for teasers, page ect. to your new presets.

Despite what I said in #804690: New release? that I really don't like this thread because it has so many issues & fixes noted in it, I still feel that this module needs help.

Attached is a cleaned-up version of the module with the following changes:

• Re-formatted code to adhere to almost all of Drupal's official coding standards, except the SQL coding standard that requested a query be re-written to use query_range (not quite sure how to use that API function, so I didn't want to risk breaking something).
• Split the massive hook_form_alter() implementation into separate hook_form_FORM_ID_alter() implementations, to make them easier to maintain.
• Applied the spelling fix noted in #34.
• Fixed-up the code change provided in #711718: theme with draggable rows and applied it to the code, to make the rows of the attribute form draggable again (like they are with stock UC).

This version has no new features (aside from the drag bug-fix) but should be easier to maintain than the one from #17.

EDIT:DO NOT USE THIS COPY. See next comment.

Ooops. uc_option_image_form_uc_attribute_admin_settings_alter() was hook_option_image_form_uc_attribute_admin_settings_alter() in the above copy.

Use the copy attached to this post instead.

The attached patch to what I submitted for #49 adds the functionality that was requested in #256580: Update Cart image with Option Image, based on ideas from tjmoyer in #10 in that post.

Attached is yet another patch to what I submitted in #49 that fixes the capitalization of "as" in foreach loops. It's a minor tweak.

I am using the Display/Node Display Suite module to display Ubercart products. Does anyone know the code needed to print the uc-option-image-block that is being created in another area? I.E. a PHP print tag in a Drupal block.

Thank you.

btw Fantastic module with the patches.

@GuyPaddock - What would it take for you to combine your fixes with the D5 version we posted here: #246787: Option Images per Attribute that allows for multiple attribute images side-by-side?

I'd be willing to chip in to get all these features working together for D6.

I can look into it, but right now I don't have a lot of time to spend on other releases. The fixes I made were part of a project for a client who needs a site finished in the next few weeks.

I have the same issue as Darrice. The preview image and the default option's image shows, but if i try to select another option the picture not changes. Maybe anyone knows the solution?

Wondering if anyone else has found an alternative to Suzi's manual fix for displaying more than the first 20 images (post 44)... I also have a product which has an attribute with 57 different options and I would like to use uc_option_images to show each of these options... Is there a quick way to expand the amount of images allowed?

-A

Subscribing. Thanks

I would like to show the default option image, and not have to upload a product image at all. Currently I end up with 2 images on the page when I only need one.

http://www.rubytranslator.com/text-girl

Per the link above the ideal functionality again would be to show say the black color option that I add via the option image functionality and when another color is selected replace the black image. Maybe it's stated how to achieve this above but with all the posts I can't make heads or tails.

I don't want to load an image when creating a new shirt only adding images to the color options.

Joshua Needham

P.S. Many many kudo's to those who have spent so much time making this module work.

The functionality via the following link is very cool and certainly a direction that this module could be. Select a style and a color and the image changes respectively. http://6dollarshirts.com/t-shirts/I-like-Turtles-p-11387.html

Hi all,
I have the same problem as some posters - whereby the images do not change when i select different options. Can any of the people who have had a good solid look a the code suggest why this might be. I followd the advise of creating new imagecache presets but that didn't work. I have been advised that it might be another ajaxy module conflicting - any thoughts?

Is there a single patch on this page that fixes everything? Or can someone suggest a walk through for which patches to use in what order?

@mrconnerton, you can try the zip here: #712542-27: Compatibility with Ubercart Ajax Attribute Calculations module
It should have all the patches.

It only allows you to upload images for 4 attributes too. Apparently you can manually upload as many images as you want for up to 4 attributes, but once you try to add a 5th attribute the images don't appear. Did you ever figure out how to add more images without a manual update to the database?

This enhacements are amazing! Thanks to everyone involved for all the hard work!

Allot of people, including myself, need this module working. Since no one can commit new code to it, and there is virtually no dev branch right now, how about forking this project. Use the code that exists and start a new module. It's GPL code, so it's perfectly reasonable to do so.

I would love to have this working and have an image for each attribute. There is nothing else out there right now that can attach images to options, and I believe that it's a bit ridiculous. Just my 2 cents. If I have the time, I might start writing my own module. I don't have enough time do to commit myself fully to the project, but I would love to have this working and to help.

I don't think forking is necessary. There are people interested in committing new code. A request has been made for ownership transfer here: http://drupal.org/node/703838#comment-3578184 and we are coming up on two weeks tomorrow.

I was able to get a working module via comment #61

I was able to get a working module via comment #61 as well, how ever my biggest issue is that I would like to have option images for each attribute. As it is right now, all images, regardless of attribute, are showing up in the same place. Basically there is one

Hi
This is a very informative article about Option Images Bug Fixes and Enhancements. Most of the time it happens when uploading images certain errors occur so this is a nice article regarding those issues.Hopefully this article will resolve my future problems.Thanks for the great article.
Magento Theme

Wow, spam? This thread must be THAT popular.

I found a way around suzi's method of manually adding your option images to your database (Post #44): You need to upload your images one attribute at a time.

Example: I have a product with 4 attributes, each with 10 options. So we're talking about 40 different option images. Rather than add all the attributes through the add attributes form then try to upload all of my option images, I do this: I add the first attribute, upload my option images, then remove the attribute from the product. Then I repeat this step until I've added all of my images. Then I go back to my add attributes form and add all four of my attributes at once and voila... All the images are still in tact.

I hope this saves someone alot of time and fumbling with SQL cause it sure did for me!!

I was previously able to upload my attribute images but now after some module updates, the images fail to upload. I have disabled ubercart ajax attribute calculations and dependent attributes modules to help solve the problem of switching images. The above patches etc have nor worked for me. I have attached a list of modules for the site (pdf). Just 3 weeks ago I was merrily adding images (with uaac and da active). I have 6 different attributes, with one attribute having 112 options and I had no trouble uploading at that time. Now, when I try to change an image all seems OK - no error messages but updated image doesn't appear. I can delete the old one but trying to upload a new one has no effect.

Anyone have any idea what may be causing the problem?

@GuyPaddock post #49:

Another little change (that took me forever to find) should be made to correct a problem where the main image doesn't show up on sites installed in a subfolder. This happens when you use Original as the image type.

Line 56:
$node->option_images_cached[$option->oid] = '/' . $file->filepath;

New line 56:
$node->option_images_cached[$option->oid] = base_path() . $file->filepath;

FYI a lot of the functionality of this module can be achieved with http://drupal.org/project/uc_subproduct (disclaimer: I'm the module maintainer of uc_subproduct)

Subscribing. Thanks for addressing these changes :)

I've fixed a number of the elements above with parts of the patches above. I didn't include support for lightbox so that can be opened as another issue.

I'm closing this ticket even though all of these issues might not be resolved. Moving forward please create a separate issue against the current dev version, even if that issue is addressed here. There are two many issues being addressed in this queue and it will be much easier moving forward to break them out.

Hi, I tried .dev, but it didn;t work, the default stuff was still a problem I think.
I tried #50, and that worked flalessly! Wouldn;t it be better to use that as a basis from now on?
This thread becomes for me also to complicated, but .dev didn't work, 1.4 didn;t work, and #50 ( worked! so what should I do?
greetings, Martijn

Hi!

I guess the issue on FF and IE is on keeping the Files system on Public - files are available using HTTP directly.

For everyone that have this problem, if you have more attribute (ie size and color), if you change the image when change size the first image is not display, you nee to change and rechange for see it, so you must rename color like zcolor, so in the list of attribute it is after size, so you can see the first image onload.

I use this patched version taht contains more patch find in the discussions.

new better fix with #49,#50 and #73, and now run for me ..

I tried #79 and #80 and neither of the two worked. I used #79, checked the code and eventually added one line:

       else
/*         parentImage = $(input).parents('.content').children('div.uc-option-image-block');*/
/*         parentImage = $(':not(.uc-option-image-preloaded) > div.uc-option-image-block');*/
            parentImage = $('.main-product-image');

       parentImage[0].innerHTML = "<img src=\""+images[oid].derivative+"\" class=\"uc-option-image\">";
       // objectToAppend = document.createElement("img");
       // objectToAppend.setAttribute("src",images[oid].derivative);
       // objectToAppend.setAttribute("class","uc-option-image");
       // parentImage[0].appendChild(objectToAppend);
       if (false && this.use_lightbox)
          $(lightbox).attr('href',images[oid].lightbox);

The parentImage was not matching using the that CSS rule so I added mine, parentImage = $('.main-product-image');. With this, at least the images switch.

Now, the selected image is not showing up on the cart. The original product image is being used.

I also found some issues with some of the variables, when debugging with Firebug, check the attachment. I took this screenshot while debugging #80.
1. Notices that nid is an array, instead of a number. 2. This affects some values that should be retrieved.

I also tried the latest dev code and that didn't work form me either.

Hi!
Help me please.
For drupal 7 how to add lightbox for this module?

Thanks