Adjustments in Checkbox and Radio using images

• edir

• August 12, 2015 at 12:48 am

@elliot

This is not documented but ACF accept an image for Checkbox and Radio elements using the HTML image tag.

0 : <img src="/path/image.jpg">
1 : <img src="/path/image.jpg">

But it needs some adjustment to fit better. I think this could be in ACF by default and documented.

/* Images for Checkbox and Radio */
.acf-checkbox-list img,
.acf-radio-list img { margin: 5px 2px; vertical-align: middle; }

The result is attached

acf-radio.jp....jpg

• Jonathan

• August 13, 2015 at 8:02 am

Hi @edir

That’s a nice catch 🙂

I will assign Elliot to this post so he’s sure to see it.

• edir

• August 13, 2015 at 8:38 am

Maybe Checkbox and Radio Columns could be implemented too :-p

• Jonathan

• August 13, 2015 at 8:45 am

If ACF were to include columns per default I think the best solution would be to have that as an additional layout option for the checkbox/radio field (select how many columns you want) rather than by class tho 🙂

• thoanny

• January 20, 2016 at 7:54 am

You can add a “img-select” class attribute to field, and use this CSS :

.acf-field.img-select .acf-checkbox-list input,
.acf-field.img-select .acf-radio-list input{
     position:absolute;
     left:-9999px;
 }

.acf-field.img-select .acf-checkbox-list img,
.acf-field.img-select .acf-radio-list img {
    border: 2px solid transparent;
}

.acf-field.img-select .acf-checkbox-list input:checked + img,
.acf-field.img-select .acf-radio-list input:checked + img {
    border: 2px solid #444;
}

😉

radio-img.pn....png

• teoremadepierre

• June 8, 2020 at 1:16 am

Does anybody know how to link a value add to cart to this checkbox image code?