How can I set up a Gallery that displays images in their original aspect ratios?

Hi,

I'm looking for coding that would enable me to display images within a Grid:Simple Gallery in their original aspect ratios. I.e. So I am not forced to choose a specific aspect ratio from the default options.

Any help would be appreciated.

Thanks.

An example of a page I would like to apply this to: https://shootsdraws.com/draws/beoutdoorfit

choose the aspect ratio you want them to fit into then change the object-fit property in your css like so

/* add a background colour if you want (optional) */
.gallery-grid-item-wrapper {
    background:black;
}
/* change to contain (default is cover) */
.gallery-grid-item-wrapper img {
    object-fit: contain !important;
}

if you want to restrict that to a certain section or page then use the squarespace id finder extension to find the relevant id and add that before each rule.

Thanks for your suggestion. Unfortunately it doesn't seem to have changed anything. I've attached a screenshot to demonstrate the issue. The sides of the image are being cropped because its original dimensions are wider than the 16:9 aspect ratio which is currently selected for that gallery. I have images that vary in dimensions and I just want to present them in their original form within a Gallery. Is it possible?

OK, we might just have to check whether you're using a Gallery Section or a Gallery Block. The mark-up is different.

Gallery Section

You edit your page, click Add Section, choose Image from the left hand side and pick the auto layout that looks like a grid of images. In that case, the CSS I posted above will work

/* add a background colour if you want (optional) */
.gallery-grid-item-wrapper {
    background:black;
}
/* change to contain (default is cover) */
.gallery-grid-item-wrapper img {
    object-fit: contain !important;
}

Gallery Block

If you just click Add Blank Section and then Add Block and pick Gallery you'll get a different grid which will use the css below

.slide a.image-slide-anchor {
    background:black !important
}

.slide img.thumb-image {
    inset:0 !important;
    width:100% !important;
    object-fit: contain !important;
}

results for both here, the top one is a gallery block, the bottom one is a gallery section.

if it still isn't working for you then add the gallery you want to a page and share that link, as the one you've linked to in your original post doesn't have a gallery on it. or at least didn't when I first looked. 

Ah, I can see it take effect with the Gallery Section code. I appreciate the workaround you have provided, but I was hoping for the option to display each image in this manner, but without any empty unwanted space above and below.

If you look at the image block layout example in the attached screenshot, the images above and below it sit nicely with equal padding in between. I am guessing that this just may not be possible due to the nature of Gallery Sections?

My reason for wanting to achieve it this way instead of simply using image blocks is to ensure cohesive padding between images whilst eliminating the need to adjust the mobile layout afterwards.

If you know of a way to fulfil this, please let me know. Thanks!

Just a note - I have now given the website the following password: backsoon

Perfect! You cracked it. Thanks for your help 👊

Hi @iamdavehart

This is unrelated to my question for this thread, but I wondered if you might be able to help with another issue I have with my Grid Galleries.

After successfully aligning my Grid Galleries to the left (by applying padding), i am still unable to add a text box to the right of them. The gallery's boundary box still stretches the full width of the site, so I'm presuming the code I need is for reducing the size of that? Or perhaps I need to remove the code I'm currently using for the gallery padding and replace it with code that focuses on the boundary box only?

@iamdavehart Here's a screenshot to show the layout I'm trying to achieve (Grid gallery on the left with a text box to the right side of it).

if it's unrelated to the thread, best to start a new one. it helps other people find the solutions they're looking for. especially when the thread is already marked 'solved'.

Gotcha @iamdavehart