Hi @snipsnip,
Unfortunately, this is not something that PhastPress can resolve automatically. This is the srcset on the first image:
- avokado-2-600×600.jpg 600w
- avokado-2-150×150.jpg 150w
- avokado-2-200×200.jpg 200w
- avokado-2-195×195.jpg 195w
- avokado-2-190×190.jpg 190w
- avokado-2-185×185.jpg 185w
- avokado-2-180×180.jpg 180w
- avokado-2-100×100.jpg 100w
- avokado-2-1536×1536.jpg 1536w
- avokado-2-2048×2048.jpg 2048w
- avokado-2-1200×1200.jpg 1200w
- avokado-2-300×300.jpg 300w
- avokado-2-768×768.jpg 768w
- avokado-2-1024×1024.jpg 1024w
Meaning that the browser will select an image that matches the size of the browser window. That’s not right, because the size of the product tile is much smaller.
You need to change the srcset so that the size of the loaded image matches the size of the product tile.
At some point in the future, I might add a feature to PhastPress that automatically resizes images to the size necessary for the page.
–Albert
Thanks Albert!
Do you have any tips for a plugin that might do this at the moment?
I will have over 20k products and the images will be automatically imported with the API, like these. Need something that changes the src set in bulk.
Hi @snipsnip,
I would recommend removing the srcset entirely (from the theme), and then changing the width and height attributes on the img tag to be the maximum size on any device. PhastPress will resize the image in the src attribute to match this size.
To make it adaptive based on screen size will require more complicated custom work, I think.
–Albert
Okay!
Maybe this code? It will remove all classes from the images:
add_filter('get_image_tag', 'strip_entire_image_class');
function strip_entire_image_class($html) {
return preg_replace('/ class="(.*)"/', '', $html);
}
Hi @snipsnip,
I’m not sure, it depends on your site/theme. I can’t really help you with this specifically, sorry.
–Albert
