Home Forums General Issues Is there an image radio field?


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:×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>

    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.

  • 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

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

  • 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)

The topic ‘Is there an image radio field?’ is closed to new replies.