Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 4

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


AmidNature

Question

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
  • Answers 23
  • Created
  • Last Reply

Top Posters For This Question

23 answers to this question

Recommended Posts

  • 1

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
  • 0

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
  • 0


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
  • 0

I have been setting up my print store and thinking I was an idiot. Found this thread and couldn't be more disappointed to see that there really isn't a way to display my prints in the correct aspect ratio.  

Link to comment
  • 0

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 !

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

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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
  • 0

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
  • 0
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 best , and see my profile. Thanks for your support!

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

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
On 10/21/2021 at 10:37 AM, ElaynaClair said:

I am having the same issue as well, @tuanphan could you help?

Can you share link to product page? We can check easier

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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...