View list of products

[kirstenalarsen]

The Product images are not scaling correctly / staying square - on most screen views they are distorted

[JbPasquier]

Fixed.

[kirstenalarsen]

Thanks @JbPasquier that's much better! Is there a way to have BOTH the ratio locked and the actual squaring of the image?

[mariocarabotta]

Thanks @JbPasquier that's much better! Is there a way to have BOTH the ratio locked and the actual squaring of the image?

I'm not suggesting this post is how it should be implemented, but by doing a quick search this is the kind of outcome for image cropping > https://jonathannicol.com/blog/2014/06/16/centre-crop-thumbnails-with-css/

I'll leave it up to you JB to decide which approrach would work best

[JbPasquier]

Is there a way to have BOTH the ratio locked and the actual squaring of the image?

I can try some tricks, but it would be a better practice to handle this beforehand, and ensure a correct ratio when a producer update its picture.

I'm not suggesting this post is how it should be implemented, but by doing a quick search this is the kind of outcome for image cropping > https://jonathannicol.com/blog/2014/06/16/centre-crop-thumbnails-with-css/

I just tried, does not work properly, because of the combination with the flex system I used for the mosaic,
The main issue is that those squares have a dynamic height/width based on the ratio of the picture.
In your link, they create a personalized class for portrait to address this issue, but here, I have no clue on the ratio of the image before it's on screen, and the logic approach of our framework is to avoid doing those manipulation on client side.

I'll try some other things and let you know. Let me know if you have any way to handle it sooner on the process.

[JbPasquier]

Done, I've moved the image to the background layer, using cover sizing to ensure the square ratio. I also added an intermediate media query for 3 columns to avoid too much distortion on card's text.

[kirstenalarsen]

I'm happy with this, thank you @JbPasquier . @mkllnk can you confirm you're ok with how this is done i.e. that we shouldn't be worrying about trying to do on our side first

[mkllnk]

Yes, great. That's exactly what we had in mind.