Jump to content

Confused about image aspect ratios and how to circumvent global settings

Recommended Posts

Posted

I'm a total beginner with this, but I'll try to explain as best as I can. I have a Squarespace website on which I am displaying my artwork. My artwork has different aspect ratios. When I'm editing a product (painting) within Squarespace, I try to change the aspect ratio. So if it's a square painting, I choose the 1:1 aspect ratio. Unfortunately, it took me a while to realize this changes the aspect ratio GLOBALLY (not for individual paintings independently of each other). So all my 4:3 paintings are now cut into a 1:1 square. This cuts off some of the painting.

How can I make these change independently of each other? Or better yet, how can I have a set 1:1 display but have each painting sit inside of this square under its own aspect ratio (with a solid background to fill in the space). This way, I won't have to change the aspect ratio manually each time (I'm very prone to human error!)

The best example of this can be found here: https://andrewcadima.com/paintings The art sits inside of each 1:1 square and accommodates all shapes and sizes (some square, some vertical, some horizontal, etc.). Each 1:1 box can display varying aspect ratios of each painting.

I hope I'm explaining myself correctly! I'll be happy to clarify any confusion, and I appreciate any help I can get. Thanks!

  • Replies 2
  • Views 462
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

Posted

The aspect ratio thing can be frustrating when trying to mix different ones into the aspect ratio that has been chosen for the gallery section.

There are some techniques using CSS that can be used to make images retain their aspect ratio. But the results look bad I think. Basically the grid ends up looking unbalanced.

There is another technique I've been using when possible recently. Use multiple gallery sections on one page. Set each one too the proper aspect ratio for the images within.

877865167_ScreenShot2022-02-24at12_55_03PM.thumb.png.96130bdc437c5098ce203154de156e52.png

This works well when you have lots of images and you don't need to have the images in a particular order.

Another thing to try is the masonry layout.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Posted

Thanks so much! I should have clarified--I'm talking about the images within my store, not my gallery. For the gallery, I'm happy with using the method you suggested. 

I wish I knew more about CSS, or if it's even possible to look into the code in the website below. This is exactly how I'd like my shop/store page to look.

https://andrewcadima.com/paintings 

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.