diff --git a/plugins/woocommerce/changelog/fix-52071-thumbnail-images-sizes b/plugins/woocommerce/changelog/fix-52071-thumbnail-images-sizes new file mode 100644 index 00000000000..2fa9bc2bdc0 --- /dev/null +++ b/plugins/woocommerce/changelog/fix-52071-thumbnail-images-sizes @@ -0,0 +1,4 @@ +Significance: patch +Type: performance + +Add sizes attribute to Product gallery thumbnail images to better load the appropriate resolution diff --git a/plugins/woocommerce/client/legacy/js/flexslider/jquery.flexslider.js b/plugins/woocommerce/client/legacy/js/flexslider/jquery.flexslider.js index 78e25432cb1..f5b805544f5 100755 --- a/plugins/woocommerce/client/legacy/js/flexslider/jquery.flexslider.js +++ b/plugins/woocommerce/client/legacy/js/flexslider/jquery.flexslider.js @@ -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') }) } diff --git a/plugins/woocommerce/includes/wc-template-functions.php b/plugins/woocommerce/includes/wc-template-functions.php index 8cd30b3b12c..57b733b9802 100644 --- a/plugins/woocommerce/includes/wc-template-functions.php +++ b/plugins/woocommerce/includes/wc-template-functions.php @@ -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 '
'; + return ''; } if ( ! function_exists( 'woocommerce_output_product_data_tabs' ) ) {