Attribute Option Name Images: Possible?

[Bonkycat]

Thanks in advance for any assistance!

Version: 1.3.8a (just downloaded newest, preparing to upgrade)
Addons: Column layout grid
Local Sales Tax Mod
Cassvalidation
Custom Template

I have searched FAQ and Forums, and unless I am using incorrect search terms, I can't seem to find a solution.

Example of page with problem here

I am using attributes and would like to use an image associated with the attribute option NAME rather than value. On the example above, I have used attributes to create three "sub-categories". I would like to display an image for each of these three (Sterling, Yellow and White)

Is it even possible? For now, I have placed the images I want to use in the extra images area at the bottom.

Thanks again for any help,

Lisa

[Ajeh]

You could increase the size of the products_options table field for products_options_name to 255 and try using, for example on Color use:
Color <img src="images/attributes/color_red.gif" />

where the image color_red.gif is located in the:
/images/attributes

directory ... you could use any directory for the image as long as it is correct ...

However ... be aware that in the HTML emails on the orders the images are being pulled from your website ...

You will want to customize the code to clean those out of the emails before creating them as if you then peek in the My Account at an order with one of them you will see the Option Value is now getting goobered up ... and suddenly what should read Color: Red is now reading Color: as the output is garbled ...

So, to do this will require clean up ...

An alternative, that would be better, is to utilize the Comment for the Option Name ...

Edit the Option Name, after you have made one, and you will see an area for comment ...

You can put in text or something there for the image such as:
<img src="images/attributes/color_red.gif" />

Now this will appear above the Option Name ...

You could use:
Hello World <img src="images/attributes/color_red.gif" />

and see the Hello World and the image ...

There is probably another method utilizing CSS but I am not too good at that fancy stuff ...

[Bonkycat]

You are truly a superior life form and I am a mere mortal!

I will be honest, my eyes crossed when reading the first option and I figured my big idea was assassinated by my lack of knowledge.

However, your second suggestion is shear genius (and makes sense to mere mortals) and I have implemented it.

The image does appear above the option name, which I don't like, but I have a mortal fix for that. I will change the option name to something else, and add the current option name in the comments in front of the img src code you suggested.

Zen Cart never ceases to amaze me in its ability to be used and customized by those with no real understanding of the framework.

A word to others wanting to use this tweak: make sure you have everything the way you want it. If you have to edit again after adding the image, you will have to add the image again.

Thanks Ajeh!

[Bonkycat]

FYI-
Using multiple images on the same page in this manner is possible, but not when they are uploaded to the images/attributes file with the same name _1, _2, etc., like you would do for the extra product images.

The fix for me was to upload them directly to /images

However, then they still show in the extra images area at the bottom of the page. Something for others to be aware of when trying this to avoid multiple attempts.

Other than that, this is a fantastic fix that looks great!

[Ajeh]

Make a new directory:
/images/mystuff

or some such unique name for these ...

[Bonkycat]

GORGEOUS!

Thank you again Ajeh!

I created the new images/attimg directory, put the images in there and everything is perfect!

I then added the flexible attributes mod to your fixes above and all is as I had imagined it could be.

GOTTA LOVE ZEN!

[tsrplatelayer]

Just downloaded the addin for use with 1.3.9h -
any chance of a summary of edits needed to update for compatibility please. Looking through the thread I spotted a couple but dont want to miss any.

Thanks

oops - sorry - posted in wrong place

[Jaybird]

Thank you for pointing me in the right direction.
I wanted to place a small image to the right of the Option Name, and achieved this by adding the image to the /images/attributes folder, then simply placing <img src="images/attributes/. . . ">after the Option Name title in the en: box space. Nothing in the Comments box.

Adding <img src=" to the comments box places it above, per your discussion, but I wanted it alongside the Option Name, with radio buttons to the right of the image.

Hope this helps anyone else wanting an image added to Option Name.

Thanks again for a great program and great community help.