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

How can I disable product image cropping?


Recommended Posts

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
  • Replies 12
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

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

Posted Images

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
  • 4 weeks later...
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;
}

 

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

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

@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 is designed to improve the appearance of products pages and cannot be disabled.

There are two solutions:

1. Reframe your images before uploading them, so that they always match the selected crop shape. For example, add white left and right borders to a portrait-shaped image so that it is square.

2. Use one of the older templates that uses the 'Classic Products Page'. The Classic Product Page is currently available in in these Squarespace 7.0 template families:

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

Once you have one of these templates, you'll want to go into the Style Editor and disable the Product Image Auto Crop tweak.

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digital, a specialist company helping Squarespace users by building the features that Squarespace didn't include.
Explore our range of Squarespace Extensions, including the Wishlist, and Datepicker Extension or book a Squarespace Expert for 1:1 help. Note that links in my posts may be affiliate links.

Link to post
  • 1 month later...
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
  • 4 weeks later...
Posted (edited)
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
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>

 

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
Posted (edited)

@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
  • 2 weeks later...
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
  • 3 months later...
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
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 Digital, a specialist company helping Squarespace users by building the features that Squarespace didn't include.
Explore our range of Squarespace Extensions, including the Wishlist, and Datepicker Extension or book a Squarespace Expert for 1:1 help. Note that links in my posts may be affiliate links.

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