Jump to content

Aspect Ratio - How to individually resize the images on my product page?

Recommended Posts

Any ideas on how to individually resize the images on my product page? For whatever reason Squarespace will only allow the user to select 1 specific aspect ratio, for all products. I'm trying to develop a website for selling photos, and photos come in all shapes and sizes. Picking one aspect ratio results in some images/products being cropped.

I've already setup my "Store" using the product photo option (which allows for custom aspect ratios), and then unlinking my official product page. However, when the customer clicks on the photo they want to buy, the page updates to the official product page photo, which is cropped to the wrong aspect ratio. 

It appears my only option is to inject CSS code (per Squarespace IT), which I know nothing about. However, when I look at the FAQs on that potential solution, it specifically says to NOT use CSS to change image sizing. 

If I cannot fix this issue, it's a dealbreaker for me to use Squarespace as my web host. 

Hoping someone has an idea on how I can move forward.

Thanks, Max

Link to comment
  • 1 month later...

Same problem here.   Only workaround I have found so far, is to add a border around all my images so they are the same aspect ratio. Problem with this is, the layout of the product page is not optimum and when opened in the light box, the image is small.   For example - a 16x9 image in a 4x3 frame

Would love a proper solution.

Link to comment
  • 3 weeks later...
  • 4 weeks later...

Same issue here—it's so frustrating to only be able to choose one aspect ratio, and have that applied to every single art print on the entire site, regardless of whether the print itself is landscape or portrait. Is there any way for this to be adjusted? Can the aspect ratio cropping be turned off entirely, so that the images are displayed at their actual aspect ratio? It's driving me insane.

Link to comment
  • 3 weeks later...


Using 7.1 and have same problem with mixing horizontal and vertical images in my store. It’s either or as I understand it or have I missed something? I have no knowledge in CSS so the only solution I can see right now is to set up two stores - one for vertical pics and one for horizontal. 

So many YouTube photographers promoting Squarespace but they don’t seem to use the service for selling pics online. ….

Link to comment
  • 2 months later...
On 1/14/2021 at 7:39 PM, flavienabbate said:

Hello everyone,

Same problem here ! It drives me mad and I'm so disappointed by SquareSpace right now, like how such an easy option is not even available on a professional website !!??

If someone knows any CSS to fix this please help ! And if someone from SS lands here please make something about it !

If you share link to page where you has problem, we can help easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • Susana_SQSP changed the title to Aspect Ratio - How to individually resize the images on my product page?
18 hours ago, flavienabbate said:

Hello tuanphan, thank you for your help !

My page is flaviotaneli.com, go to the "tirages" page 😉

Thank you !

Add to Design > Custom CSS

img.ProductItem-gallery-slides-item-image {
    object-fit: contain !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
5 hours ago, tuanphan said:

Add to Design > Custom CSS


img.ProductItem-gallery-slides-item-image {
    object-fit: contain !important;
}

 

Thank you !! It works for when you are on the page of the specific product, after clicking on it, but on the "tirage" page all products are still shown at the same aspect ratio. If you have the code for this one as well it would be awesome !!

 

Thank you so so much !

Link to comment

Hi,

 

Can you please explain to me how you go this to work? I'm struggling with having two different aspect ratios anywhere within the store products and it's pretty unbelievable how difficult it is to find answers to this issue...

Site is - tonycrossephotography.com

password is Snake

 

I have even tried setting up two different pages like the posters above, and still can't get the custom CSS to work as it should... please help?

Link to comment
2 hours ago, Paddy34 said:

I'm struggling with having two different aspect ratios anywhere within the store products

As far as I can tell your images have been uploaded with a 3:2 aspect ration so code meant to prevent cropping is not going to work.

Having everything in the same aspect is a good thing usually.

 

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
  • 4 months later...
On 1/24/2021 at 6:47 PM, flavienabbate said:

I just got the solution !

img. { object-fit: contain !important; }

That simple !

So now every image on the site is displayed on its original ratio !

Thanks a lot tuanphan ! Cheers from France !

I have added this to the Custom CSS but unsuccessful, 

Link to comment
On 1/24/2021 at 5:50 PM, flavienabbate said:

Thank you !! It works for when you are on the page of the specific product, after clicking on it, but on the "tirage" page all products are still shown at the same aspect ratio. If you have the code for this one as well it would be awesome !!

 

Thank you so so much !

Can you explain further please? It has not worked on my site

 

Link to comment
On 1/31/2021 at 12:29 PM, Paddy34 said:

Hi,

 

Can you please explain to me how you go this to work? I'm struggling with having two different aspect ratios anywhere within the store products and it's pretty unbelievable how difficult it is to find answers to this issue...

Site is - tonycrossephotography.com

password is Snake

 

I have even tried setting up two different pages like the posters above, and still can't get the custom CSS to work as it should... please help?

Bumping this because I am having the same issue on my storefront page. And agree, it should NOT be this difficult to AUTO the aspect ratios of product images on the store page!

Link to comment
On 6/9/2021 at 12:27 AM, photogjimi said:

Bumping this because I am having the same issue on my storefront page. And agree, it should NOT be this difficult to AUTO the aspect ratios of product images on the store page!

Can you share link to store page? We can take a look

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 4 months later...
  • 1 year later...
On 6/26/2020 at 8:44 PM, AmidNature said:

Squarespace will only allow the user to select 1 specific aspect ratio, for all products. I'm trying to develop a website for selling photos, and photos come in all shapes and sizes. Picking one aspect ratio results in some images/products being cropped.

Please take a look at the guide I wrote here:

Product image aspect ratios on Squarespace 7.1

If anyone experiences an issue getting this to work on your Squarespace 7.1 website (this is for v7.1 sites only) please post back with details of your site - including a link to the page, and a screenshot.

Did this help? Please give feedback by clicking an icon below  ⬇️

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original 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 completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

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.