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

How can I disable product image cropping?


Marta
Go to solution Solved by paul2009,

Question

Hi all, I'm currently setting up a shop with digital image files and I have a variety of sizes including horizontal, square & vertical. I really don't like the way it looks when it crops the product images in the shop. Is there a way to disable the cropping altogether so that it shows all images as they are? Even if they don't align the same way afterwards, I don't mind, I still prefer to show the true size of the image before they click on it. Does that make sense? 

 

Link is https://www.martaraptis.com/art

Thanks! 

Link to post
  • Answers 18
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

@tuanphan that didn't work.  But got me close enough to work it out on my own in under 5 hours!  🙂And to be honest, this feels WAY WAY better on my photography site because now it's almost like auto s

@Marta's site is built with a Brine-family template in Squarespace 7.0. The Brine-family template uses the 'Advanced Products Page' which automatically crops product images to fill the image container

Chiming in to say that we users should be able to decide which orientation "crop" we want per shop item and not blanketed across all of them. 

Posted Images

18 answers to this question

Recommended Posts

  • 0

@Marta's site is built with a Brine-family template in Squarespace 7.0. The Brine-family template uses the 'Advanced Products Page' which automatically crops product images to fill the image container. This behaviour is designed to improve the appearance of products pages and cannot be disabled - even with code.

If you have product images with different aspect ratios, for example portrait and landscape artwork, there are two workarounds available:

1. If you want to use the same template, you must "reframe" your images before uploading them so that they always match the selected crop shape you have selected in Site Styles. For example, below is some artwork with a portrait aspect ratio. The image file has been edited to add a white border, changing the aspect ratio to landscape to match the setting in Site Styles. (The yellow border is not part of the image file - I've added it to illustrate the shape of the white border on this white page!)

artwork-image-framed.png.cd659e0b6048ad2d636815a669b2178f.png

2. Use one of the older templates that uses the 'Classic Products Page'. Bear in mind that these templates are much older (some as old as 2012) and do not include a number of advanced commerce features. The Classic Product Page is currently available with these older Squarespace 7.0 template families:

  • Adirondack
  • Avenue
  • Aviator
  • Bedford
  • Five
  • Flatiron
  • Forte
  • Ishimoto
  • Momentum
  • Montauk
  • Native
  • Pacific
  • Wells
  • Wexley

On these older templates, you can go into the Style Editor and disable the Product Image Auto Crop tweak.

Edited by paul2009
Additional explanation provided

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digitalbuilding the features that Squarespace didn't include. Pick dates in any format, show prices in other currencies, take orders without payment or improve your cartI value honesty, integrity, transparency and respect. Links in my posts may refer to SF Digital products or may be affiliate links.  Squarespace. I've been a loyal supporter of the platform since 2007. 

Link to post
  • 0
19 hours ago, tuanphan said:

You mean images in Collection Page or Detail Page? 

Just the general shop page, where all your products are displayed (the link). 

Link to post
  • 0
On 1/10/2020 at 2:33 AM, Marta said:

Just the general shop page, where all your products are displayed (the link). 

Add to Home > Design > Custom CSS

body#collection-5d7ad0f223f3d9618c6cb1cb .ProductList-image {
    width: 100% !important;
    height: auto !important;
    top: 0 !important;
}

 

Link to post
  • 0
On 2/1/2020 at 6:36 AM, tuanphan said:

Add to Home > Design > Custom CSS


body#collection-5d7ad0f223f3d9618c6cb1cb .ProductList-image {
    width: 100% !important;
    height: auto !important;
    top: 0 !important;
}

 

That did absolutely nothing.

Link to post
  • 0
On 2/17/2020 at 4:11 AM, paul2009 said:

"This is designed to improve the appearance of products pages and cannot be disabled." 

Doesn't improve it if you are trying to build a site to showcase paintings.  I spent at least an hour trying to find out that I can't see my whole iamge.

Very frustrating having that choice made for me.

 

On 2/17/2020 at 4:11 AM, paul2009 said:

 

 

Link to post
  • 0
On 1/31/2020 at 10:36 PM, tuanphan said:

Add to Home > Design > Custom CSS


body#collection-5d7ad0f223f3d9618c6cb1cb .ProductList-image {
    width: 100% !important;
    height: auto !important;
    top: 0 !important;
}

 

@tuanphan can you use this to target a specific product item page? For instance, mostly my images are landscape, but for the vertical images, well, the product page just makes it 3:2, cropping out the top, killing my image.  Can you target a page or image itself when shown using .productItem-gallery?  I guess the problem then is that the container is not the right size, so everything on the page must adjust, even if there is plenty of room.  

@paul2009So what do you do if you have a client who has a combination of vertical and horizontal product images.  Say statues in the shape of a lighthouse and horse and butterfly.  You must make the statue horizontal to appease the others?  This loses all detail.  And makes me wonder why in some places (gallery blocks for instance) they say "auto" but not in the product item page.  

As a photographer that wants to sell an image (at their native and system known aspect ratio), I'm not going to put white around it just to work around this craziness (though I have for the additional images throughout my site which is bad enough..  

Edited by Meeeee
Link to post
  • 0
4 minutes ago, Meeeee said:

@tuanphan can you use this to target a specific product item page? For instance, mostly my images are landscape, but for the vertical images, well, the product page just makes it 3:2, cropping out the top, killing my image.  Can you target a page or image itself when shown using .productItem-gallery?  I guess the problem then is that the container is not the right size, so everything on the page must adjust, even if there is plenty of room.  

As a photographer that wants to sell an image (at their native and system known aspect ratio), I'm not going to put white around it just to work around this craziness.  

try

<style>
  .ProductList-image {
    width: 100% !important;
    height: auto !important;
    top: 0 !important;
}
</style>

 

Link to post
  • 0

@tuanphan that didn't work.  But got me close enough to work it out on my own in under 5 hours!  🙂And to be honest, this feels WAY WAY better on my photography site because now it's almost like auto size and when I have medium format images, it shows the 4:3 aspect ratio properly. If a single product image ONLY.  

So this is what works to take your single product image from whatever it's forced to be, to allow for portrait or vertical images as well.  This was put in CSS.  

It's a bummer because it doesn't stretch the ProductItem-Summary over towards it, so there is a big gap in the space.  I guess you could align?

*disclaimer, the bad part of this is that the second image, if different aspect ratio by width or height, shows up right behind.  I guess it was too good to be that easy! Guess with Squarespace you can only use one camera or film size.  

But feels good if just one image! 😣

 

.ProductItem-gallery-slides-item-image {
    width: auto !important;
    height: 100% !important;
    top: 0 !important;
}

I'm curious if there is a "hide" the nth from the slides-item-image until clicked css that could happen, cause clearly, unless same aspect ratio, this isn't great for multiple images.  

Screenshot 2020-05-01 20.05.00.png

Edited by Meeeee
Link to post
  • 0
On 5/2/2020 at 9:25 AM, Meeeee said:

@tuanphan that didn't work.  But got me close enough to work it out on my own in under 5 hours!  🙂And to be honest, this feels WAY WAY better on my photography site because now it's almost like auto size and when I have medium format images, it shows the 4:3 aspect ratio properly. If a single product image ONLY.  

So this is what works to take your single product image from whatever it's forced to be, to allow for portrait or vertical images as well.  This was put in CSS.  

It's a bummer because it doesn't stretch the ProductItem-Summary over towards it, so there is a big gap in the space.  I guess you could align?

*disclaimer, the bad part of this is that the second image, if different aspect ratio by width or height, shows up right behind.  I guess it was too good to be that easy! Guess with Squarespace you can only use one camera or film size.  

But feels good if just one image! 😣

 


.ProductItem-gallery-slides-item-image {
    width: auto !important;
    height: 100% !important;
    top: 0 !important;
}

I'm curious if there is a "hide" the nth from the slides-item-image until clicked css that could happen, cause clearly, unless same aspect ratio, this isn't great for multiple images.  

Screenshot 2020-05-01 20.05.00.png

Hi Meeee

Did you manage to find a fix for the alignment?

"It's a bummer because it doesn't stretch the ProductItem-Summary over towards it, so there is a big gap in the space.  I guess you could align?" I used your code (THANKS) but now have the big space. 

Thanks, 

Leanne

Link to post
  • 0
On 1/8/2020 at 10:44 PM, Marta said:

Hi all, I'm currently setting up a shop with digital image files and I have a variety of sizes including horizontal, square & vertical. I really don't like the way it looks when it crops the product images in the shop. Is there a way to disable the cropping altogether so that it shows all images as they are? Even if they don't align the same way afterwards, I don't mind, I still prefer to show the true size of the image before they click on it. Does that make sense? 

 

Link is https://www.martaraptis.com/art

Thanks! 

Hi @Marta I see from your site that you managed to fix this. Would you mind telling me how you did this as I'm having the same issue. The code that everyone have kindly provided are leaving a grey border and shrinking the image.

Thank you!

Link to post
  • 0
On 8/27/2020 at 5:48 PM, RyanHolder said:

Would you mind telling me how you did this as I'm having the same issue.

They did this by framing the other prints within a standard 3:2 white image before uploading them. In this way, all images are the same aspect landscape ratio. Here's an example (with an added yellow box to show the image's true size):

image-framed.png.bad51d4a57e89e1a72ba1beab44af21a.png

This was option 1 in my suggestions in the post above (February 2020).

 If this helps you, please click "Like" below  ⬇️

Edited by paul2009

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digitalbuilding the features that Squarespace didn't include. Pick dates in any format, show prices in other currencies, take orders without payment or improve your cartI value honesty, integrity, transparency and respect. Links in my posts may refer to SF Digital products or may be affiliate links.  Squarespace. I've been a loyal supporter of the platform since 2007. 

Link to post
  • 0

This "feature" should be redesigned and corrected as it is essentially cropping carefully curated images without rhyme or reason. Squarespace seems to be doing a lot of two-steps forward and one step back....

I am resizing images to have a large white background and they, too, are having the product area cropped off. Applying one aspect ratio setting to all of the images in a batch is not solving the issue either and is, indeed, a waste of time. I want the entire product to be displayed as customers expect to see an entire product before they buy it. If I go to edit the photo, it shows the proper image area, so why can't that area be displayed on the screen?

Link to post
  • 0

Reformatting product images with a square white background for use in a 1:1 ratio resolves the issue of the formatting (but not the issue of painstaking rework). 

Link to post
  • 0

Anyone know if this has been fixed? Building a website for my dad's paintings. All paintings (products items) are cropped 2:3 but some are portrait and some are landscape (vertical and standard in SquareSpace terms). 

Link to post
  • 0
On 3/1/2021 at 8:02 AM, ATDC said:

Anyone know if this has been fixed? Building a website for my dad's paintings. All paintings (products items) are cropped 2:3 but some are portrait and some are landscape (vertical and standard in SquareSpace terms). 

Can you share link to your site?

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...