Jump to content

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

Recommended Posts

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.


#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!

Screen Shot 2023-05-05 at 4.09.13 PM.png

Screen Shot 2023-05-05 at 4.09.22 PM.png

Screen Shot 2023-05-05 at 4.15.02 PM.png

Screen Shot 2023-05-05 at 4.15.20 PM.png

Screen Shot 2023-05-05 at 4.15.27 PM.png

Edited by Lumenarius
Make title more specific.
Link to comment
  • Lumenarius changed the title to How to fix cropping issue with images that are in a different ratio than the gallery-block thumbnail in Squarespace?

Are you images having the same ratio?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!


Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.