Search code examples
wordpressshortcodeelementor

Image Widget -> Dynamic -> Shortcode -> No output

I'm using Elementor Pro and want to display an image via a custom shortcode (https://docs.elementor.com/article/449-dynamic-shortcode):

But it isn't working. There is simply nothing displayed. Neither in the editor, nor in the frontend. Also not if I remove the brackets [ ... ] around the shortcode and try brand_banner only.

It does not produce any DOM output in the frontend, just an empty elementor-widget-wrap div:

<div class="elementor-element elementor-element-4f1547ad elementor-column elementor-col-50 elementor-inner-column" data-id="4f1547ad" data-element_type="column">
    <div class="elementor-column-wrap  elementor-element-populated">
        <div class="elementor-widget-wrap">
        </div>
    </div>
</div>

However, if I use a simple text editor widget and put the shortcode in, it works as expected:

DOM:

<div class="elementor-element elementor-element-37728dd elementor-widget elementor-widget-text-editor" data-id="37728dd" data-element_type="widget" data-widget_type="text-editor.default">
    <div class="elementor-widget-container">
        <div class="elementor-text-editor elementor-clearfix">
            <img src="https://some.domain.com/wp-content/uploads/banner-a.jpg"></div>
        </div>
    </div>
</div>

This is the code for the shortcode:

public function shortcode_brand_banner( $atts )
{
    $brand = $this->getRandomBrandFromPool();
    $variantIndex = 1;
    $variantLabel = [ '0', 'a', 'b', 'c' ];
    // Return the rendered image HTML.
    return ( types_render_field( 'image-brand-' . $variantLabel[ $variantIndex ], [ 'post_id' => $brand->post->ID ] ) );
}

I thought maybe it is because it doesn't expect rendered image HTML, but only an image URL. So I changed the code to this, but it doesn't work either:

public function shortcode_brand_banner( $atts )
{
    $brand = $this->getRandomBrandFromPool();
    $variantIndex = 1;
    $variantLabel = [ '0', 'a', 'b', 'c' ];
    // Only return image URL like "https://some.domain.com/wp-content/uploads/banner-a.jpg"
    $image = get_post_meta( $brand->post->ID, 'wpcf-image-brand-' . $variantLabel[ $variantIndex ] )[ 0 ];
    return ( $image );
}

What am I doing wrong here? How can I display an image via Dynamic Shortcode?

Solution

  • To close this question, long story short: The image widget was kind of never supposed to support the "Shortcode" feature, because internally the function expects an array, which a Shortcode can not return.

    The Shortcode feature was now removed from the Image widget.

    See: https://github.com/elementor/elementor/issues/7730