Jump to content

Dynamically resizing Gallery Block Container so all images are the same size despite their orientation.

Recommended Posts

Site URL: https://www.grantwesthoff.com/state-of-affairs

Hi, so my goal is to have all my images display as the same size, i.e., if a horizontal image is 1300x1000px, then the vertical images in the gallery should be 1000x1300px.  As it is now, the gallery-container has a static size based off the widest width image and that images height, it does not seem to incorporate the tallest images height.  This results in a gallery where the horizontal images are larger than the vertical images, i.e., 1300x1000px for horizontals and 800x1000px for verticals. 

I've tried a ton of different CSS approaches and feel that I really am at a place where Javascript is required to achieve this behavior from the gallery-container.  

Thanks for helping!

EDIT for visibility: I'm starting to wonder if this is even possible...

Edited by grantwesthoff
Crickets and Exhaustion.
Link to comment
3 hours ago, grantwesthoff said:

Site URL: https://www.grantwesthoff.com/state-of-affairs

Hi, so my goal is to have all my images display as the same size, i.e., if a horizontal image is 1300x1000px, then the vertical images in the gallery should be 1000x1300px.  As it is now, the gallery-container has a static size based off the widest width image and that images height, it does not seem to incorporate the tallest images height.  This results in a gallery where the horizontal images are larger than the vertical images, i.e., 1300x1000px for horizontals and 800x1000px for verticals. 

I've tried a ton of different CSS approaches and feel that I really am at a place where Javascript is required to achieve this behavior from the gallery-container.  

Thanks for helping!

Are all your images share the same dimension? for example both dimension share 16:9 or 9:16? Or at least allow some cropping on the images

That will help the solution easier

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - Lightbox captions only mode)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 No-code customisations for Squarespace
🚀 Learn how to rank new pages on Google in 48 hours!

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
39 minutes ago, Beyondspace said:

Are all your images share the same dimension? for example both dimension share 16:9 or 9:16? Or at least allow some cropping on the images

That will help the solution easier

They are all very close to the same ratio, basically that 1300x1000 is spot on, they are ALL 1300px exactly on the long side, but due to the cropping (they're film scans) the short side ranges between ~970-1100px. 

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.