Image explicit width and height attributes missing if size set to custom

  • When adding an image and setting image resolution to “custom” and enter own width and height, the width and height attributes are missing in front end output:

    <img decoding="async" src="https://example.com/wp-content/uploads/elementor/thumbs/Example-qhwv2uuiwwv6cndr8u16r3gzxwf2rr81yghipe2xk8.jpg" title="Example" alt="Example" loading="lazy" />

    This is bad and leads to Cumulative Layout Shift (CLS) errors e.g. in Google PageSpeed Insights and other Lighthouse tests.

    Set an explicit width and height on image elements to reduce layout shifts and improve CLS. Learn how to set image dimensions

    Please add width and height attributes of the created thumbs, thanks.

    Elementor 3.18.3, Hello Elementor 3.0.0, WordPress 6.4.2, PHP 8.1.x

Viewing 6 replies - 1 through 6 (of 6 total)
  • Thread Starter Ov3rfly

    (@ov3rfly)

    For interested readers, we are using now a quick&dirty work around based on elementor/widget/render_content filter:

    function my_image_widget_content( $widget_content, $widget ) {
	if ( 'image' === $widget->get_name() ) {
		$settings = $widget->get_settings();
		if (
			!empty( $settings['image_size'] )
			&& $settings['image_size'] == 'custom'
			&& !empty( $settings['image_custom_dimension'] )
			&& !empty( $settings['image_custom_dimension']['width'] )
			&& !empty( $settings['image_custom_dimension']['height'] )
		) {
			if (
				strpos( $widget_content, '<img ' ) !== false
				&& strpos( $widget_content, ' width=' ) === false
				&& strpos( $widget_content, ' height=' ) === false
			) {
				$widget_content = str_replace(
					'<img ',
					'<img width="' . esc_attr( $settings['image_custom_dimension']['width'] ) . '" height="' .  esc_attr( $settings['image_custom_dimension']['height'] ) . '" data-x-attributes="added-via-child-theme-fix" ',
					$widget_content
				);
			}
		}
	}
	return $widget_content;
}
add_filter( 'elementor/widget/render_content', 'my_image_widget_content', 10, 2 );

    From reading the documentation the elementor/frontend/before_render filter would maybe be better but we did not get it to work to add attributes to img tag itself, only to the wrapper html tags.

    Plugin Support Elementor Team

    (@ricav)

    Hi there,

    Since this is a development based query, may opt to visit our Github account where you may get in contact with a member of our development team to query this with.

    Please note that this is not an official support channel but a respective member of the development team will respond to your post as soon as they are available.
    Please follow this guide which outlines the steps required to post on our Github: https://github.com/elementor/elementor/blob/master/.github/CONTRIBUTING.md

    Kind regards,

    Thread Starter Ov3rfly

    (@ov3rfly)

    Feel free to post the bug report there, I do not use github due to their policies.

    Plugin Support Elementor Team

    (@ricav)


    Hello,

    Thank you for your understanding. While I appreciate your suggestion to post the bug report directly on GitHub, I currently don’t have the ability to post directly on external platforms.

    Best regards,

    Thread Starter Ov3rfly

    (@ov3rfly)

    I also do not have the ability to post the bug report on external platforms.

    So that serious bug which has direct impact on SEO score of your users will not be fixed, too bad.

    Plugin Support aracelil

    (@aracelil)

    Hi, @ov3rfly.

    As the appropriate channel for posting these kinds of issues is on our Github page, I’ll go ahead and close this thread. Please feel free to open a new thread should you need assistance with a different topic.

    Kind Regards,

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Image explicit width and height attributes missing if size set to custom’ is closed to new replies.