Title: Image select
Last modified: May 1, 2020

---

# Image select

 *  Resolved [lovebrands](https://wordpress.org/support/users/lovebrands/)
 * (@lovebrands)
 * [6 years, 1 month ago](https://wordpress.org/support/topic/image-select-3/)
 * Hi,
 * I would like to add a field with 5 images to choose of. Is this possible with
   this plugin or does anybody know how to achieve this?
 * Thanks

Viewing 1 replies (of 1 total)

 *  Plugin Author [Konrad Chmielewski](https://wordpress.org/support/users/hwk-fr/)
 * (@hwk-fr)
 * [6 years, 1 month ago](https://wordpress.org/support/topic/image-select-3/#post-12792738)
 * Hello,
 * Thanks for the feedback. You’ll have to customize your own checkbox/radio field.
   You can use filters like `acf/prepare_field` in order to customize the radio 
   label render.
 * For example:
 *     ```
       add_filter('acf/prepare_field/name=my_radio', 'my_acf_radio_image');
       function my_acf_radio_image($field){
   
           if(!empty($field['choices'])){
   
               foreach($field['choices'] as $index => &$label){
   
                   $label = '<img src="' . get_stylesheet_directory_uri() . '/images/' . $label . '" />';
   
               }
   
           }
   
           return $field;
   
       }
       ```
   
 * This will get the choices label, and use them to display an image. Here is a 
   screenshot of the field configuration: [https://i.imgur.com/JxmzroZ.png](https://i.imgur.com/JxmzroZ.png)
 * Then add some extra CSS, to hide the actual radio input, and set some border 
   color on image selection:
 *     ```
       add_action('acf/input/admin_footer', 'my_acf_radio_image_css');
       function my_acf_radio_image_css(){
           ?>
           <style>
           .acf-field[data-name=my_radio] > .acf-input > ul > li > label > input{
               display:none;
           }
   
           .acf-field[data-name=my_radio] > .acf-input > ul > li > label > img{
               border:5px solid #E1E1E1;
           }
   
           .acf-field[data-name=my_radio] > .acf-input > ul > li > label.selected > img{
               border:5px solid #007cba;
           }
           </style>
           <?php
       }
       ```
   
 * Final result: [https://i.imgur.com/GAsa8xo.mp4](https://i.imgur.com/GAsa8xo.mp4)
 * Hope it helps!
 * Regards.

Viewing 1 replies (of 1 total)

The topic ‘Image select’ is closed to new replies.

 * ![](https://ps.w.org/acf-extended/assets/icon-256x256.png?rev=2071550)
 * [Advanced Custom Fields: Extended](https://wordpress.org/plugins/acf-extended/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/acf-extended/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/acf-extended/)
 * [Active Topics](https://wordpress.org/support/plugin/acf-extended/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/acf-extended/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/acf-extended/reviews/)

## Tags

 * [image](https://wordpress.org/support/topic-tag/image/)

 * 1 reply
 * 2 participants
 * Last reply from: [Konrad Chmielewski](https://wordpress.org/support/users/hwk-fr/)
 * Last activity: [6 years, 1 month ago](https://wordpress.org/support/topic/image-select-3/#post-12792738)
 * Status: resolved