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=""checked"" data-checked=""checked"">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.
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.
@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">
