Add sizes attribute to Product gallery thumbnail images to better load the appropriate resolution (#52073)

* Add sizes attribute to Product gallery thumbnail images to better load the appropriate resolution

* Add changelog file
This commit is contained in:
Albert Juhé Lluveras 2024-10-18 10:56:46 +02:00 committed by GitHub
parent b4605c75e5
commit 7125986053
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 7 additions and 1 deletions

View File

@ -0,0 +1,4 @@
Significance: patch
Type: performance
Add sizes attribute to Product gallery thumbnail images to better load the appropriate resolution

View File

@ -256,6 +256,7 @@
onload: 'this.width = this.naturalWidth; this.height = this.naturalHeight',
src: slide.attr('data-thumb'),
srcset: slide.attr('data-thumb-srcset'),
sizes: slide.attr('data-thumb-sizes'),
alt: slide.attr('alt')
})
}

View File

@ -1659,6 +1659,7 @@ function wc_get_gallery_image_html( $attachment_id, $main_image = false ) {
$full_size = apply_filters( 'woocommerce_gallery_full_size', apply_filters( 'woocommerce_product_thumbnails_large_size', 'full' ) );
$thumbnail_src = wp_get_attachment_image_src( $attachment_id, $thumbnail_size );
$thumbnail_srcset = wp_get_attachment_image_srcset( $attachment_id, $thumbnail_size );
$thumbnail_sizes = wp_get_attachment_image_sizes( $attachment_id, $thumbnail_size );
$full_src = wp_get_attachment_image_src( $attachment_id, $full_size );
$alt_text = trim( wp_strip_all_tags( get_post_meta( $attachment_id, '_wp_attachment_image_alt', true ) ) );
@ -1696,7 +1697,7 @@ function wc_get_gallery_image_html( $attachment_id, $main_image = false ) {
$image_params
);
return '<div data-thumb="' . esc_url( $thumbnail_src[0] ) . '" data-thumb-alt="' . esc_attr( $alt_text ) . '" data-thumb-srcset="' . esc_attr( $thumbnail_srcset ) . '" class="woocommerce-product-gallery__image"><a href="' . esc_url( $full_src[0] ) . '">' . $image . '</a></div>';
return '<div data-thumb="' . esc_url( $thumbnail_src[0] ) . '" data-thumb-alt="' . esc_attr( $alt_text ) . '" data-thumb-srcset="' . esc_attr( $thumbnail_srcset ) . '" data-thumb-sizes="' . esc_attr( $thumbnail_sizes ) . '" class="woocommerce-product-gallery__image"><a href="' . esc_url( $full_src[0] ) . '">' . $image . '</a></div>';
}
if ( ! function_exists( 'woocommerce_output_product_data_tabs' ) ) {