Home Forums WoodMart support forum Image elements have no explicit width and height

Image elements have no explicit width and height

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #300817

    beno
    Participant

    Hello
    how can I fix this bug, set an explicit width and height for image elements to reduce layout drift and improve CLS, it has a huge impact on site load speed

    Attachments:
    You must be logged in to view attached files.
    #300831

    Hello,

    Please provide your site admin access to the private area. Also please provide the steps to reproduce the problem on your site.

    Please confirm the permit for us to deactivate the plugins not related to the theme and switch to the parent theme for the while of checking what may take up to 15 minutes. Please make the full backup of your site.

    Best Regards

    #300835

    beno
    Participant

    So I deactivated all plugins, but unfortunately with the page speed test I get the same error message, I added the admin access data in the private area
    thank you for your help

    #301037

    Hello,

    Please add this code to the functions.php of the child theme:

    function woodmart_category_thumb_double_size( $category ) {
    	$small_thumbnail_size = apply_filters( 'subcategory_archive_thumbnail_size', 'woocommerce_thumbnail' );
    	$dimensions           = wc_get_image_size( $small_thumbnail_size );
    	$thumbnail_id         = get_term_meta( $category->term_id, 'thumbnail_id', true );
    	$attr_height = 'height="' . esc_attr( $dimensions['width'] ) . '"';
    	if ( woodmart_loop_prop( 'double_size' ) ) {
    		$small_thumbnail_size = 'woodmart_shop_catalog_x2';
    		$dimensions['width'] *= 2;
    		if ( $dimensions['height'] ) {
    			$dimensions['height'] *= 2;
    		} else {
    			$dimensions['height'] = $dimensions['width'];
    		}
    		$attr_height = 'height="' . esc_attr( $dimensions['height'] ) . '"';
    	}
    	if ( $thumbnail_id ) {
    		$image = wp_get_attachment_image_src( $thumbnail_id, $small_thumbnail_size );
    		$image = $image[0];
    	} else {
    		$image = wc_placeholder_img_src();
    	}
    	if ( $image ) {
    		// Prevent esc_url from breaking spaces in urls for image embeds
    		// Ref: https://core.trac.wordpress.org/ticket/23605
    		$image = str_replace( ' ', '%20', $image );
    		echo apply_filters( 'woodmart_attachment', '<img src="' . esc_url( $image ) . '" alt="' . esc_attr( $category->name ) . '" width="' . esc_attr( $dimensions['width'] ) . '" ' . $attr_height . ' />', $thumbnail_id, $small_thumbnail_size );
    	}
    }

    Then clear all the cache, check the issue, if you have any issues, please contact us.

    Best Regards

    #301568

    beno
    Participant

    Hello
    i put the code in php in child theme, then i cleared the cache, the issue unfortunately is still there

    Please help me

    #301855

    Hello,

    We see that attributes have appeared. Please clarify.

    Best Regards

    #303104

    beno
    Participant

    Hello,

    As described the problem still exists, more and more images appear in the google speed test that they have the same error, please how can I fix it.
    So I added the PHP script you sent me to Child theme, it just doesn’t work.
    please take a look at the screenshot

    Attachments:
    You must be logged in to view attached files.
    #303408

    Hello,

    Do you have a problem when you switch to the parent theme?

    Best Regards

    #304795

    beno
    Participant

    Yes, even when I switch to the parent theme, I get the error message in the google page speed test

    #304852

    Hello,

    You use the default image widget in the Megamenu and you have set the custom zie, as the result, image attributes are absent. https://take.ms/Uk7CO

    WoodMart theme does not influence Elementor default widgets.

    In order to solve the issue, we recommend setting one of the predefined sizes: https://take.ms/8PzFFa

    Best Regards

Viewing 10 posts - 1 through 10 (of 10 total)