Dynamic data not rendered correctly on image element

Hello Bricks Builders Team @timmse @thomas
I’ve an issue when trying to register the dynamic data on Bricks,

I’ve a field group that’ll share the field into multiple option pages from ACF, the field group is contain

Repeater = ‘logos’
– Image = ‘logos_image’ (sub field) (return format: image array)
– text = ‘logos_width’ (sub field)

so, the dynamic tag is {logo_image} & {logo_width}, when I try render both of them on the text element, they’re rendered correctly (the correct link of the image and the value of logo width)

but, when I try using {logo_image} on image element, it’s not rendered correctly, here is the result

<img class="brxe-kcgdaf brxe-image client-logo__image" src="{" alt="">

the src is only showing ‘{’

Here is my current code

add_action( 'acf/init', function() {
	acf_add_options_page( array(
        'page_title' => 'Client Logos',
        'menu_slug' => 'client-logos',
        'parent_slug' => 'cms',
        'menu_title' => 'Client Logos',
        'redirect' => false,
        'autoload' => true,
        'post_id'  => 'client-logos',
    ) );

    acf_add_options_page( array(
        'page_title' => 'Homepage Logos 1',
        'menu_slug' => 'homepage-logos-1',
        'parent_slug' => 'cms',
        'menu_title' => 'Homepage Logos 1',
        'redirect' => false,
        'autoload' => true,
        'post_id'  => 'homepage-logos-1',
    ) );

    acf_add_options_page( array(
        'page_title' => 'Homepage Logos 2',
        'menu_slug' => 'homepage-logos-2',
        'parent_slug' => 'cms',
        'menu_title' => 'Homepage Logos 2',
        'redirect' => false,
        'autoload' => true,
        'post_id'  => 'homepage-logos-2',
    ) );

} );



add_filter( 'bricks/setup/control_options', function( $control_options ) {
    $control_options['queryTypes']['client_logos'] = esc_html__( 'Client Logos' );
    $control_options['queryTypes']['homepage_logos_1'] = esc_html__('Homepage Logos 1');
    $control_options['queryTypes']['homepage_logos_2'] = esc_html__('Homepage Logos 2');
    return $control_options;
});



function run_logos_query($options_page) {
    $repeater_field = 'logos';

    $results = [];
    if (have_rows($repeater_field, $options_page)) {
        while (have_rows($repeater_field, $options_page)) {
            the_row();
            $item = new stdClass();
            $image = get_sub_field('logos_image');
            $item->logo_image = $image['url'];
            $item->logo_width = get_sub_field('logos_width');
            $results[] = $item;
        }
    }

    return $results;
}





add_filter('bricks/query/run', function($results, $query_obj) {
    switch ($query_obj->object_type) {
        case 'client_logos':
            $results = run_logos_query('client-logos');
            break;
        case 'homepage_logos_1':
            $results = run_logos_query('homepage-logos-1');
            break;
        case 'homepage_logos_2':
            $results = run_logos_query('homepage-logos-2');
            break;
    }
    return $results;
}, 10, 2);


add_filter('bricks/query/loop_object', function($loop_object, $loop_key, $query_obj) {
    global $post;

    $post = new stdClass();
    $post->ID = $loop_key;
    $post->post_title = 'Custom Logo';
    $post->post_content = '';

    if (isset($loop_object->logo_image)) {
        $post->logo_image = $loop_object->logo_image;
    }

    if (isset($loop_object->logo_width)) {
        $post->logo_width = $loop_object->logo_width;
    }

    setup_postdata($post);

    return $loop_object;
}, 10, 3);





add_filter('bricks/dynamic_tags_list', function($tags) {
    $tags[] = [
        'name' => '{logo_image}',
        'label' => 'Logo Image',
        'group' => 'Custom Fields'
    ];

    $tags[] = [
        'name' => '{logo_width}',
        'label' => 'Logo Width',
        'group' => 'Custom Fields'
    ];

    return $tags;
});


add_filter('bricks/dynamic_data/render_tag', function($tag, $post, $context = 'text') {
    global $post;

    switch ($tag) {
        case 'logo_image':
            return !empty($post->logo_image) ? $post->logo_image : '';
        case 'logo_width':
            return !empty($post->logo_width) ? $post->logo_width : '';
    }
    return $tag;
}, 10, 3);








add_filter( 'bricks/dynamic_data/render_content', 'render_logo_dynamic_data_content', 10, 3 );
add_filter( 'bricks/frontend/render_data', 'render_logo_dynamic_data_content', 10, 2 );
function render_logo_dynamic_data_content($content, $post, $context = 'text') {
    global $post;
    $content = str_replace('{logo_image}', esc_url($post->logo_image), $content);
    $content = str_replace('{logo_width}', esc_attr($post->logo_width), $content);

    return $content;
}


Hi,

When rendering a dynamic tag on an image element (image context), ensure it’s returning an array.

Example:

add_filter('bricks/dynamic_data/render_tag', function($tag, $post, $context = 'text') {
    global $post;

    switch ($tag) {
        case 'logo_image':
			$value = !empty( $post->logo_image ) ? $post->logo_image : '';
			if ( $context === 'image' ) {
				$value = ( !empty( $value ) ) ? [ $value ] : [];
			}
			return $value;
        case 'logo_width':
            return !empty($post->logo_width) ? $post->logo_width : '';
    }
    return $tag;
}, 10, 3);

Regards,
Jenn