How to fix cropping issue with images that are in a different ratio than the gallery-block thumbnail in Squarespace?

Lumenarius · May 5, 2023

I recently discovered an issue with how thumbnails for a gallery-block are displayed when in the editor vs how they look live on the website.

It appears to be an issue where if the native image is a different ratio than the setting for the gallery-block it will incorrectly display the thumbnail. It looks like it kind of squashes it to the side. The wider the discrepancy the more the effect is present. See attached images.

I experienced this on every browser, private or not, mobile or not, and the problem was still there after uploading new images, even PNG vs JPG.

I also removed all custom code injections and what not just to see. Same issue.

I also tried unchecking, saving, and then re-checking, the "Crop Images" button in the design tab of the gallery-block but this did work as expected.

In some instances I was able to fix the issue by editing the images that were squashed in the Squarespace image editor and cropped the image to the same setting as the thumbnail. I.e. everything is 3:2. But then if the image was a hyper landscape/portrait it is forever cropped and you can't see the rest when you enter Lightbox.

However, in the instance shown in the screenshots this fix did not work for there is no 2.40 ratio in the image editor, even though there is for thumbnails. The closest is 16:9 and then you really loose a lot if the image.

When I dug into the source code it looks like there was a piece of code I could adjust that somewhat fixed the issue.

Changing "margin-right" to -200px actually made it look correct for some reason. But I am not sure if that's the right approach.

https://www.lumenarius.com/union-station-projection-mapping-tacoma-wa

#block-c5f07fb63dec2df18dfb .sqs-gallery-block-grid .sqs-gallery-design-grid-slide .margin-wrapper {
    margin-right: 11px;
    margin-bottom: 11px;
}

Any ideas how we can try and fix this? Would really love to see if there's a slight issue in some setting or code rather than re-crop a by hand majority of the image galleries on the site.

Thank you!