Support

Account

Home Forums Feature Requests Adjustments in Checkbox and Radio using images

Solving

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

  • 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

  • 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;
    }
    

    πŸ˜‰

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

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.