wordpress - How do I get the width and height of an image in a function _content_template()?

Question

protected function render() {
    $settings = $this->get_settings_for_display();

    // Get image URL
    echo '<img src="' . $settings['image']['url'] . '">';

    // Get image 'thumbnail' by ID
    echo wp_get_attachment_image( $settings['image']['id'], 'thumbnail' );

    // Get image HTML
    echo ElementorGroup_Control_Image_Size::get_attachment_image_html( $settings );
}

protected function _content_template() {
?>
    <img src="{{ settings.image.url }}">
    <?php
}

I was able to get the width and height values in php, but I can't get it for the _content_template() function

$media_image = wp_get_attachment_image_src( $settings['media_image']['id'], 'full' );
$image_width = $media_image[1];
$image_height = $media_image[2];

question from:https://stackoverflow.com/questions/65938553/how-do-i-get-the-width-and-height-of-an-image-in-a-function-content-template

Answer 1

You have to use the method add_render_attribute to add this into the backbonejs part i.e. inside the _content_template:

$this->add_render_attribute( 'image', 'src', $settings['image']['url'] );

add_render_attribute for reference

Once you added the attribute you can access it in _content_template like this: settings.image.url

settings.image.url for reference

Therefore, the thing you need to add is add_render_attribute method inside the method render to access in _content_template

Mainly focus on this particular snippet of content template method:

var image = {
    id: settings.image.id,
    url: settings.image.url,
    size: settings.thumbnail_size,
    dimension: settings.thumbnail_custom_dimension,
    model: view.getEditModel()
};
var image_url = elementor.imagesManager.getImageUrl( image );
var imageHtml = '<img src="' + image_url + '" class="elementor-animation-' + settings.hover_animation + '" />';