Insert featured image to select tag

Question

I am using Gravity Forms to dynamically populate the values in a select with custom post types titles. I am trying to add the featured image to the option tag, after the title:

add_filter( 'gform_pre_render_12', 'populate_posts' );
add_filter( 'gform_pre_validation_12', 'populate_posts' );
add_filter( 'gform_pre_submission_filter_12', 'populate_posts' );
add_filter( 'gform_admin_pre_render_12', 'populate_posts' );
function populate_posts( $form ) {
 
    foreach ( $form['fields'] as &$field ) {
 
        if ( $field->type != 'select' || strpos( $field->cssClass, 'cpt-name' ) === false ) {
            continue;
        }
 
        $posts = get_posts( 'post_type=agent-name&numberposts=-1&post_status=publish&orderby=name&order=ASC' );
 
        $choices = array();
 
        foreach ( $posts as $post ) {

            $featured_image = get_the_post_thumbnail($post->ID, 'thumbnail');

            $choices[] = array( 
                'text' => $post->post_title . $featured_image, 
                'value' => $post->post_title 
            );
        }
 
        // update 'Select a Post' to whatever you'd like the instructive option to be
        $field->placeholder = 'Select a Post';
        $field->choices = $choices;
 
    }
 
    return $form;
}

I tried to add the featured image after the option text but it's printing <img> instead of <img>

<option value="Tom Cruise">Tom Cruise&lt;img width="150" height="150" src="https://path-to-image" class="attachment-thumbnail size-thumbnail wp-post-image" alt="" loading="lazy" /&gt;</option>

score 0 · Answer 1 · answered Nov 15 '22 at 15:36

It's because you can't have images inside <option>. You can take a look at this post for more informations an solutions :

How to add images in select list?

If you need images in a select, you will have to use a custom select. I don't know one in particular. My first research bring me to this : https://websemantics.github.io/Image-Select/

Insert featured image to select tag

1 Answers1