Support

Account

Home Forums General Issues Is there an image radio field?

Solving

Is there an image radio field?

  • Does ACF have an image radio field? For example, a set of thumbnails to choose a page layout – clicking the thumbnail effectively checks the option for that layout, much like what you’d see here: http://wptheming.com/wp-content/uploads/2013/11/options-framework-1.7-590×325.png. Does anyone know if this is available?

  • You will have to do it using CSS. First create the radio box field – I’ll use three options, Red, Green, and Blue – then inspect the post creation page and you will find something like this:

    <div id="acf-radio" class="field field_type-radio field_key-field_53afc2e795462" data-field_name="radio" data-field_key="field_53afc2e795462" data-field_type="radio">
            <p class="label"><label for="acf-field-radio">Radio</label></p>
    
            <ul class="acf-radio-list radio horizontal">
                <li><label><input id="acf-field-radio-Red" type="radio" name="fields[field_53afc2e795462]" value="Red" checked="&quot;checked&quot;" data-checked="&quot;checked&quot;">Red</label></li>
    
                <li><label><input id="acf-field-radio-Blue" type="radio" name="fields[field_53afc2e795462]" value="Blue">Blue</label></li>
    
                <li><label><input id="acf-field-radio-Green" type="radio" name="fields[field_53afc2e795462]" value="Green">Green</label></li>
            </ul>
        </div>

    As you can see, each input has a unique ID which can be targeted with CSS styling. You might try a technique such as this one on TutsPlus.

  • yes, there is:

    https://github.com/cyberwani/ACF-Image-Select

  • There is one problem, the image select field can not be used as a condition field, so if you want to show X,Y and Z fields if template “A” is chosen you are better off adding the images via CSS.

  • You need to include html in the choices textarea when you’re defining the radio field like this:

    my_image : <img src="path/to/your/image.png"><p>Image Label</p>

    Then just add a wrapper class to the field, something like .acf-image-select, and write the css for it. Here’s what I usually use on my projects:

    .acf-image-select label input {
        display: none;
    }
    .acf-image-select label p {
    	margin: 0;
    	font-weight: bold;
    	text-align: center;
    }
    .acf-image-select label img {
    	border: solid 6px #ddd;
    }
    .acf-image-select label.selected img {
    	border: solid 6px #999;
    }

    The result is something like this. You also get to use the field as conditional logic for other field since it’s basically a radio field.
    ACF Image Select

    • dandc

    • April 9, 2018 at 10:24 am

    @nikosolihin thanks for what you wrote! It was super helpful!

    • mythnc

    • January 24, 2019 at 3:14 pm

    I solved this by directly inserting html code in radio selection filed.
    For example,

    
    red : <img src="url-of-red.jpg">
    blue : <img src="url-of-blue.jpg">
    
Viewing 7 posts - 1 through 7 (of 7 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.