Jump to content

Different Aspect Ratios For Store Page

Recommended Posts

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!

Link to comment

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?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

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.

 

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.

Link to comment
  • 3 weeks later...
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.

About me: I'm Paul. A SQSP User for 18 yrs, I joined Circle when it launched in 2016 and have been a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing expertise and extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee fuels my work.

Book paid help with a Squarespace Domain

Link to comment

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 ?

Link to comment

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 ?

Link to comment

@catsmeow Please see my post above.

About me: I'm Paul. A SQSP User for 18 yrs, I joined Circle when it launched in 2016 and have been a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing expertise and extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee fuels my work.

Book paid help with a Squarespace Domain

Link to comment
  • 2 months later...
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?

About me: I'm Paul. A SQSP User for 18 yrs, I joined Circle when it launched in 2016 and have been a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing expertise and extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee fuels my work.

Book paid help with a Squarespace Domain

Link to comment

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 

Edited by MightyMouseofGod
to add an example
Link to comment
  • 3 weeks later...
On 4/2/2023 at 12:42 AM, paul2009 said:

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

Link to comment
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).

About me: I'm Paul. A SQSP User for 18 yrs, I joined Circle when it launched in 2016 and have been a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing expertise and extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee fuels my work.

Book paid help with a Squarespace Domain

Link to comment
  • 2 months later...

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!

Link to comment
  • 3 months later...

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

 

shop view.png

Edited by James-Gadbury
add example image
Link to comment
  • 2 weeks later...
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 ?

Link to comment
  • 1 month later...
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

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.