Atomic Image widget lacks support for the sizes HTML attribute

[flowrange]

Description

Hi,

I'm adding support for responsive images on some random website. This involves setting a few attributes on img tags. First one is srcset, which tells the browser all the available image resolutions. The other is the sizes attribute, which hints how an image behaves at specific screen sizes.

I won't go into further details as this is well documented (see WordPress official Reponsive Images page).

As I have a few well-defined layouts where my images sit, I wanted to centralize those 2 attributes creation. WordPress offers 2 filters for this : wp_calculate_image_srcset & wp_calculate_image_sizes.

Unfortunately, the new atomic image widget only support the first filter, wp_calculate_image_srcset. I need to manually add the size attribute in the widget settings section on each instance. This is not only tedious, but as the website's general look & feel is subject to change, I can't guarantee that I won't have to change this size attribute on every single one image.

Fixing this issue is quite simple. The img tag attributes are generated using Elementor\Modules\AtomicWidgets\PropsResolver\Transformers\Image_Transformer:

 return [
        'id' => $value['src']['id'],
        'src' => $src,
        'width' => (int) $width,
        'height' => (int) $height,
        'srcset' => wp_get_attachment_image_srcset( $value['src']['id'], $value['size'] ),
        'alt' => get_post_meta( $value['src']['id'], '_wp_attachment_image_alt', true ),
];

This should be changed according to what WordPress does in its wp_get_attachment_image function (wp-includes/media.php@1143) :

$srcset = wp_calculate_image_srcset( $size_array, $src, $image_meta, $attachment_id );
$sizes = wp_calculate_image_sizes( $size_array, $src, $image_meta, $attachment_id );

if ( $srcset && ( $sizes || ! empty( $attr['sizes'] ) ) ) {
	$attr['srcset'] = $srcset;

	if ( empty( $attr['sizes'] ) ) {
	    $attr['sizes'] = $sizes;
	}
}

See also that the srcset may not be rendered if returned empty.

Steps to reproduce

1. Add an atomic image widget somewhere
2. Implement wp_calculate_image_srcset & wp_calculate_image_sizes in your functions.php or elsewhere
3. View the page source, and see that wp_calculate_image_sizes wasn't called

Expected behavior

wp_calculate_image_sizes to be called, and the sizes attribute to be output in the final img tag on the frontend.

Elementor System Info

[removed by moderator]

Agreement

• I confirm I have read and followed all the guidelines and instructions outlined in the Editor V4 Bug Report form.
• I agree that my issue may be closed without further action if it doesn't meet all the requirements outlined in the Editor V4 Bug Report form.

[nicholaszein]

Hi, @flowrange,

Thank you for reaching out! 🙏

⛔ After reviewing your report we concluded this is not a bug caused by Elementor. The feature you're referring to is not yet supported.

As an exception, I will migrate your issue to Feature Requests. Please, remember to follow our Contribution Guidelines.

Kind regards