Responsive images (srcset, sizes=) issues

This topic has 6 replies, 2 voices, and was last updated 10 hours, 43 minutes ago by advancedas.

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

Author

Posts
November 20, 2024 at 4:13 pm #613851

advancedas
Participant

Hi, for some reason the responsive images on our single product pages don’t work. For example thumbnails load full size even though the thumbnail regeneration was done. What could be causing this issue? Deleting cloudflare cache, enabling development mode, disabling wp rocket did not help.

You can confirm that thumbnail images do not get correct srcset sizes using browser’s develop console like image attached. Is there something I am overlooking here?

Please help me!

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

November 20, 2024 at 4:50 pm #613891

Artem Temos
Keymaster

Hello,

We just checked this product page and see that product images are displayed correctly. Could you please clarify what is wrong there? https://gyazo.com/0331d9aff8a1356d96ae9d6fa2d27303

Kind Regards

November 21, 2024 at 10:13 am #614087

advancedas
Participant

The gallery thumbnails are loaded in full size instead of woodmart loading the correct thumbnail size for gallery images.

You can confirm this in developers console or by using google page speed, Google says properly size images for all the gallery thumbnails in single product page.

November 21, 2024 at 12:49 pm #614232

Artem Temos
Keymaster

Hello,

Currently, product thumbnail images on your website have the same size as the main image. To change this, copy the following file to the child theme woocommerce/single-product/product-thumbnails.php (the same path in the child theme) and change woocommerce_single to thumbnail as shown on the screenshot https://monosnap.com/file/WhXg0UdVsE8u4ht8FWBlOJwLwcbCjy

Kind Regards

November 21, 2024 at 9:51 pm #614453

advancedas
Participant

I have updated the product-thumbnails.php with the code you’ve suggested. It is now in our child theme.

However, there is an issue with thumbnails showing 150x150px image, then after few seconds updating to the full image it was before.

In developer tools it says it still loads the full image. The thumbnails are all in strict aspect ratio, I would like the aspect ratio to not change for the thumbnails, but for the thumbnails to use correct responsive images sizes.

Regenerating the thumbnails did not help.

November 22, 2024 at 11:56 am #614599

advancedas
Participant

Ok, overnight the regenerate thumbnails have finished, please allow me to troubleshoot it, I will contact you if I find anything.

November 23, 2024 at 7:34 pm #615154

advancedas
Participant

Ok, it works now after editing product-thumbnails.php line from this
<?php echo wp_get_attachment_image( $attachment_id, ‘woocommerce_single’, false, $attributes ); ?>

to this

<?php echo woodmart_otf_get_image_html( $attachment_id, ‘300×0’, false, $attributes ); ?>

Thank you for your help!
Author

Posts