Different Aspect Ratios For Store Page

Hi,

I am working on a photography website and I am running into an issue where on the Stores page, I have landscape and portrait photo prints and have broken the two out in their own category but I am unable to have separate aspect ratios for the two categories. If I set the section as a 3x2 aspect ratio, it works for my landscape category but not my portrait category and 3x4 works for my portrait and not my landscape. Is there a way for me to have two separate aspect ratios for the product images for the two different categories?

Thank you!

I don't think there will be a way to adjust the image aspect ratio based on category. You could target each page individually.

You can add CSS to prevent image cropping, and that might be a good enough solution, but will add a reasonable amount of negative space.

Can you share your website URL?

This is not a solution. I have some code that works at the store page level.

I don't know if something could be done at the category page level.

If it could be done you'd need something like my Add Category Attribute to a Store Category Page to provide an attribute to hang some CSS off of in addition to some code like my cited code at the beginning of this post.

Has anyone got this code to work, or found a work around. I can't believe that the image orientation spans across the entire site. If I had of known this, I would have gone elsewhere.

On 3/13/2023 at 6:00 AM, jeffli said:

Is there a way for me to have two separate aspect ratios for the product images for the two different categories?

Please see my guide Product image aspect ratios on Squarespace 7.1.

I have painting on 16" x 20" canvas. Some are painted with h 16" w 20", some are painted 20" h and 16  " wide. When I add my image in the product add the image always displays with a larger height than the width. When the painting has a height of 20 " that is fine but when height is 16 " painting is not oriented correctly. Not sure how I can alter the image to match the painting. Any ideas ?

Upload painting pictures. 16 x 20 inch canvas. Some are painted 16 high some are painted 20 high. In my image in the product they all appear higher than wider. This is fine for 20 " high, but not shown right for 16" high. Not sure what are my options to display the painting photos, any ideas ?

@catsmeow Please see my post above.

I can't find where to put the custom CSS

Ok, oh looking a bit harder I found Design > Custom CSS: and pasted the code in but it doesn't seem to be working. I'm very new to this so have I missed something obvious?

Site at https://whale-parsnip-3zzr.squarespace.com/shop

3 hours ago, MightyMouseofGod said:

it doesn't seem to be working

The solution is for Squarespace 7.1 only. Are you using 7.1? Your site is private, so I cannot see which version of Squarespace you are using. Please see What's my site's version and template?

I got it working in the end and it is 7.1 but it wasn't quite what I was looking for. Is there a way of making the portrait images the same height as the landscape ones are wide? And centering them in their grid box.

I think I have the site public with the password origins.

To see the sort of layout we're after have a look at http://www.origins-photography.co.uk/shop/postcards-3044 

On 4/2/2023 at 12:42 AM, paul2009 said:

Please see my guide Product image aspect ratios on Squarespace 7.1.

@paul2009 Hey Paul! Your guide is helpful, however the change I make to the one collection I want to adjust affects ALL shop pages. Grrr. Any way to target a specific collection? Collection URL is https://smartsharkdesigns.squarespace.com/acrylic-originals, pw: jaws. Thanks in advance!

14 minutes ago, LemonstrikeCreativeStudios said:

Your guide is helpful, however the change I make to the one collection I want to adjust affects ALL shop pages.

I hear you. My guide is deliberately designed to apply to an entire site because that suits the majority of the use cases that I see.

That said, you could make some modifications to limit the changes to a single store page/collection. The code will depend on the default aspect ratio that you want on the site (and therefore on the other pages). The CSS will need to be modified to refer to the class of the default aspect ratio will need to be prefixed with the unique collection ID of the store page that you want to affect (collection-6407dd947b9f23247fc9ea9e for the acrylic originals page).

@LemonstrikeCreativeStudios

You may find the following useful.

This is great stuff, people, especially creedon and paul2009. Thanks much. But I also paint in square sizes so the aspect ratio is 1:1. Most of my work is that way, actually. How can I get these to display correctly in my store?  I have been organizing my work into collections by year painted, which means there are varying aspect ratios in any one collection. From the previous responses, it seems that I will have to organize by size instead. Am I understanding the solutions correctly? Will Squarespace recognize a 1:1 aspect ratio?

Thanks so much!

17 minutes ago, annyak said:

Will Squarespace recognize a 1:1 aspect ratio?

SS has a setting for the most common ratios.

Thanks! I appreciate the quick response.

Here's another low-tech solution and is what I did on my art website.

Add your landscape / portrait image to a square canvas in some suitable image editing software.  I used InShot on my Android phone/tablet.  You'll have to find out what other software might work.

By default, when I open an image with InShot, it automatically creates a new canvas (square 1:1 is my default) of max width or height determined by the inserted picture and centralises the image.  So, you'll have blank space left/right or top/bottom, but the original image won't be cropped / squashed / stretched and visually retains it's native aspect ratio.  Perhaps you could make the bars transparent?  White background / bars works for my site. 

See image attached of my shop, in 3 column grid layout with 'square' (1:1) image aspect ratio.

The only thing I don't like is the appearance of uneven spacing between product image and title.  But what can you do?  Go back to cropped images! 🙂

Worth trying this method.

Cheers,

James

On 3/13/2023 at 7:38 PM, Ziggy said:

I don't think there will be a way to adjust the image aspect ratio based on category. You could target each page individually.

You can add CSS to prevent image cropping, and that might be a good enough solution, but will add a reasonable amount of negative space.

Can you share your website URL?

i am having the exact same problem as the photographer - can u assist me also ?

i am having the exact same problem as the photographer - can u assist me also ? I cannot get my photos for products to show correctly because some are portrait and some landscape - help please

https://www.sallycantartist.com/shop/miniature-originals---pelican-series

On 4/2/2023 at 12:40 PM, paul2009 said:

@catsmeow Please see my post above.

Hey Paul!

Your article/CSS was very helpful and I was able to get my vertical images to display at a vertical ratio.

Right now, all photos on the landing page of my print shop have the same width on the site but different heights. Is there a way to edit the CSS to change the widths of my products(print images) and keep the height uniform?

Thanks!

-Nate