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

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 comment

25 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, an independent Squarespace Consultant since 2007 and founder of SF Digital, building the features that Squarespace didn't include. Our mini-extensions allow you to 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.

Link to comment
  • 0

You mean images in Collection Page or Detail Page? 

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 - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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

 

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 - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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

 

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 - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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

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 - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

@tuanphan you seem to be the greatest at fixing this problem! Any chance you can take a look at one I've been messing around with for far too long?

https://www.findlocaljobs.ie/jobs

I've been adjusting the images on this page so that they fit the ratio perfectly but it's time consuming when I'm uploading so many. Any chance you can stop it from cropping? The top one is still slightly cropped for example.

Link to comment
  • 0
On 5/5/2021 at 6:15 AM, kirstie.pallier said:

@tuanphan you seem to be the greatest at fixing this problem! Any chance you can take a look at one I've been messing around with for far too long?

https://www.findlocaljobs.ie/jobs

I've been adjusting the images on this page so that they fit the ratio perfectly but it's time consuming when I'm uploading so many. Any chance you can stop it from cropping? The top one is still slightly cropped for example.

Add to Design > Custom CSS

/* resize blog images */
.blog-image-wrapper img {
    width: auto !important;
    height: 100% !important;
    top: 0 !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 - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
Posted (edited)

So my store pages were all set to landscape images, but in the previous product details editor you could set it to crop square so this worked, then you could see the other thumbnails below and flick through no worries on both desktop and mobile. 

I created a new product page for a new service, uploaded a new bunch of landscape images and now it's cropping REALLY strange, like ultra portrait. I've spent 6hrs today in the product details editor (stupid new paintbrush tool thing to edit via site styles under "product items") and no matter what I change, aspect ratio, gallery width etc, it does NOTHING to how the images are displaying on the desktop version, they crop like a bookmark shape tall and thin, and I can't get the extra images to display below as thumbnails like they did before... I cant find how to access the page that randomly pops up sometimes asking if I want my product details to display one of 4 templated ways but suspect maybe that page would help, it comes up maybe once a fortnight which obviously I dont want to wait for. 

Can someone help? I'm fine with the other product detail pages to stay as they are, and the store page itself is fine...

I even tried turning on quickview which displays better (not a fix but a start) but the background of that is displaying pink for NO reason, I went down a rabbit hole trying to make it white changing every setting in the style that is apparently applied to that, alas, I can't get that to set to white either so I turned that back off again. 

HALP ME.

For now I'm refusing to re-crop all my images that's too much time and frankly, I shouldn't have to, squarespace broke it, there must be a coding fix possible?

 

This is the page i'm working on: -

 

Edited by meeks
Link to comment
  • 0
1 hour ago, meeks said:

So my store pages were all set to landscape images, but in the previous product details editor you could set it to crop square so this worked, then you could see the other thumbnails below and flick through no worries on both desktop and mobile. 

I created a new product page for a new service, uploaded a new bunch of landscape images and now it's cropping REALLY strange, like ultra portrait.

Product images can still be set to "1:1 Square" in the new Site Styles panel on product detail pages (see screenshot below).

product-items-image-square-7-1-may2021.png.4778cd14fdba93db821260ef1a0496a6.png

If you are not seeing this, or you are experiencing strange formatting, I recommend you get in touch with Squarespace Customer Care as they can help you to troubleshoot this. You can reach out to them here. At certain times of the day they offer an online chat service and this may be the easiest way to work through your problems. Let us know how you get on.

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi! I'm Paul, an independent Squarespace Consultant since 2007 and founder of SF Digital, building the features that Squarespace didn't include. Our mini-extensions allow you to 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.

Link to comment
  • 0

@paul2009thank you, if you're talking about Site Styles > Product Items > Aspect Ratio then yes I can see this, but changing anything at all in this menu does absolutely nothing, the only change that worked was displaying breadcrumbs, anything else I change in that menu (Gallery Width, Design stack, etc) has no effect either.

I really appreciate your help, I might try to email them, although I know from experience this can take days and the answer often doesn't even answer what you asked - sigh.  

Link to comment
  • 0

Update from squarespace help, this worked, but these options were NOT here the other day, so perhaps my site had some issues of its own, or perhaps the changes weren't fully rolled out yet. Posting in case anyone else also needs to know:

Quote

Taking a look, this seems to be happening due to the product item layout you currently have selected. To fix this, log into your site and navigate to the produce, click Edit in the top-left, and select Edit Design. Then, hover over the page section and click the pencil icon. 

Here, you can select a new layout. I'd recommend selecting the Simple layout. Once you do so, you'll see some options to adjust the look of the images and layout of the page. 

Additionally, you can change the Design option to Slideshow or Carousel to crop the images how you'd like. 

 

Link to comment
  • 0

For those working on a 7.0 template in the Brine family this Custom CSS might get you going:

// product index
.ProductList-image,
// product quick view
.ProductItem-gallery-slides-item-image 
{
  height: 100% !important;
  left: 0 !important;
  object-fit: contain;
  object-position: center center;
  top: 0 !important;
  width: 100% !important;
}

It should make the image take up as much space as possible within your chosen product index image size, without cropping the image at all.

It also works on the Quick View, if you have that enabled.

Note that you can adjust the "object-position" to dictate how the not-cropped image aligns in the "box" created by the Styles setting for product index page images.

Edited by kirkroberts
added additional features and clarification
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...