Gravity Forms动态填充下拉框时特色图片HTML转义问题求助

问题根源：Gravity Forms在渲染下拉选择框的选项时，默认会对选项的text值执行HTML转义（使用esc_html()），导致你添加的<img>标签被转义成<img>。

解决方案 #

通过gform_field_content过滤器手动构建下拉选项的HTML，跳过对指定字段选项文本的转义处理：

// 保留原有的填充自定义文章类型选项的代码
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( array(
            'post_type'      => 'agent-name',
            'numberposts'    => -1,
            'post_status'    => 'publish',
            'orderby'        => 'name',
            'order'          => 'ASC',
            'suppress_filters' => true // 避免自定义过滤器干扰查询
        ) );
 
        $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 
            );
        }
 
        $field->placeholder = 'Select a Post';
        $field->choices = $choices;
 
    }
 
    return $form;
}

// 添加过滤器允许指定select字段的选项包含HTML
add_filter( 'gform_field_content', 'allow_html_in_select_options', 10, 5 );
function allow_html_in_select_options( $content, $field, $value, $lead_id, $form_id ) {
    // 仅针对表单ID12、select类型、带有cpt-name类的字段
    if ( $form_id != 12 || $field->type != 'select' || strpos( $field->cssClass, 'cpt-name' ) === false ) {
        return $content;
    }

    // 构建placeholder选项
    $placeholder = ! empty( $field->placeholder ) ? sprintf( '<option value="">%s</option>', esc_html( $field->placeholder ) ) : '';
    $options_html = '';

    // 遍历选项，手动生成option标签（不对text做转义）
    foreach ( $field->choices as $choice ) {
        $selected_attr = selected( $value, $choice['value'], false );
        $options_html .= sprintf(
            '<option value="%s" %s>%s</option>',
            esc_attr( $choice['value'] ), // 仅转义value属性，确保安全
            $selected_attr,
            $choice['text'] // 直接输出原始文本（包含img标签）
        );
    }

    // 替换原有字段内容为自定义构建的HTML
    $content = str_replace( '{field_content}', $placeholder . $options_html, $content );

    return $content;
}

关键说明 #

1. 保留原有填充逻辑：原代码中获取自定义文章类型和构建选项的逻辑不变，确保选项包含图片HTML。
2. 自定义字段渲染：通过gform_field_content过滤器，跳过Gravity Forms默认的选项文本转义，直接输出包含<img>标签的选项内容。
3. 安全注意：仅对value属性使用esc_attr()转义，确保HTML安全；get_the_post_thumbnail生成的图片标签是WordPress官方函数输出，本身不存在XSS风险。

内容的提问来源于stack exchange，提问作者Junky