Reply To: Is there an image radio field?

• nikosolihin

• August 24, 2016 at 4:18 am

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.