Image select

  • Resolved lovebrands

    (@lovebrands)


    4 years, 10 months ago

    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

    (@hwk-fr)

    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

    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

    Hope it helps!

    Regards.

Viewing 1 replies (of 1 total)
  • The topic ‘Image select’ is closed to new replies.

Tags