Is there a way to add images to checkboxes/radio buttons? So the image shows instead of the text.

Thanks!

Comments

asak’s picture

asak commented

I've experimented with this but didn't get anywhere...

Very interested in this option...

asak’s picture

asak commented
Status: Active » Closed (fixed)

Got it. simple actually.

in Allowed Values, use the following format:

no|<img src="/what/ever/none.png" alt="No">
yes|<img src="/what/ever/yes.png" alt="Yes">

And it works.

bsherwood’s picture

bsherwood commented

That does work, but it messes up the label. So instead of having a human readable label it shows the Only local images are allowed. tag.

Any other ideas about this?

bsherwood’s picture

bsherwood commented
Status: Closed (fixed) » Active

Re-opening because method above leads to the issue being fixed in a haphazard kind of way.

Does anyone else have any suggestions to get images to show on nodes when a select list option is selected?

Thanks

asak’s picture

asak commented

Well... you're right.

This does not work for select lists. It does for check-boxes and radio-buttons.

If you're trying to show images instead of the labels, when viewing nodes, the only way i've managed is by using the conditional fields module. Create a conditional check-boxes field, and set it to display only when specific select list options have been chosen. the default value of the field should be set to the image you want to show.

bsherwood’s picture

bsherwood commented

So are you saying that checkboxes and radio buttons read the key as opposed to the label? If so can we change this to allow the select list to read the key instead?

asak’s picture

asak commented

No. that's not what i meant. What i meant is that when editing a node with a checkboxes field, you will properly see the labels as images, and not as code. When editing a select list field, with code for images as labels, you will see the <img...>...</img> code, since it cannot (and don't ask me why) be seen as images inside a select box.

What you're suggesting is interesting. I have no idea if and how that can be done.

bsherwood’s picture

bsherwood commented

Why? Just kidding. Thanks for the response.

baja_tz’s picture

baja_tz commented

subscribe

meeotch’s picture

meeotch commented

I figured out a way of doing this mostly through CSS:

YES|<span class="checkicon_text">Yes</span><img class="checkicon_icon" src="images/yes_icon.png" alt="Yes!">

then, in CSS, you can turn the text & icon (image) on and off individually, by setting the "display" attribute on the "checkicon_text" and "checkicon_icon" classes, per page or whatever. Unfortunately, this leads to some ugly-ish CSS in my case:

.checkicon_icon, #user-profile .checkicon_text, .view-search-page .view-content .checkicon_text {
    display: none;
}

.checkicon_text, #user-profile .checkicon_icon, .view-search-page .view-content .checkicon_icon {
    display: inline;
}

I'm setting the default to be icon=none, text=inline - which covers cases where the field is *edited*. In cases where the field is *viewed* I want icons, so "#user-profile" and ".view-search-page .view-content" get the opposite treatment. The former is a panel on the user profile page, and the latter is the search results on my user search page. Not exactly intuitive to read, though.

Anonymous’s picture

Anonymous (not verified) commented

when I expose a filter I see the Only local images are allowed. code instead the uman-readable term. I don't know how to customize following code 

.checkicon_icon, #user-profile .checkicon_text, .view-search-page .view-content .checkicon_text {
    display: none;
}

.checkicon_text, #user-profile .checkicon_icon, .view-search-page .view-content .checkicon_icon {
    display: inline;
}

need help on "#user-profile .view-search-page .view-content"

and WHERE to put it

Any suggestion?

Fayna’s picture

Fayna commented

I'm looking for a solution like this as well so subscribing!

Scolo’s picture

Scolo commented

subscribe

CyberGhost’s picture

CyberGhost commented

subscribe

iamalwayslost’s picture

iamalwayslost commented

subscribe

arosemartin’s picture

arosemartin commented

This was all I needed - worked a charm. Thanks!

bsherwood’s picture

bsherwood commented
Version: 5.x-1.6 » 6.x-2.6

Bumping to latest version. CCK's 6.x version might have an alternative/cleaner way to do this.

ntg’s picture

ntg commented

subscribing

brujo321’s picture

brujo321 commented

<img src="/link/image.ext"></img> don't work

<img src='/link/image.ext'></img>this work

replace " " with ' '

example:

<img src='/sites/default/files/myimage.png'></img>

vantuykom’s picture

vantuykom commented

I have the same problem, changing quotes does not work for me

brujo321’s picture

brujo321 commented
Status: Active » Needs review

read this this work.

here is a image u can see.

cswormy’s picture

cswormy commented

Hello,

I have used this solution on my xtreemhost website and it was Ok.
But when I have migrated to x10hosting, I see that it doesn't work. Why ?
Because all <img src='/link/image.ext'></img> are automatically converted in <img src="/link/image.ext"></img> when you see the final html code from x10hosting. So when you save a check, you have an error message : "invalid choice, contact administrator"

If you want a solution that works on all hosts, use key|label like it said in the help of CCK checkboxes :

FPnew|<img src='/sites/default/files/LPlogos/FPnew.png'>
FPold|<img src='/sites/default/files/LPlogos/FPold.png'>
LP1blue|<img src='/sites/default/files/LPlogos/LP1blue.png'>
LP1brown|<img src='/sites/default/files/LPlogos/LP1brown.png'>

Example : http://bilp.co.cc/parts/151-maiden-mary CCK field : Logos

Hope it will help :)

calefilm’s picture

calefilm commented

Helped me. Thanks cswormy! I never knew what key|label was meant for. Appreciate you putting forth the time to explain.