How can I disable product image cropping?

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! 

You mean images in Collection Page or Detail Page? 

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

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;
}

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.

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:

 

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

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>

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

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.  

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

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!

I'm having a similar issue on my product pages 

https://ellipsoid-ferret-9wnf.squarespace.com/config/pages/5f7ded8a0724c83b352c6cbd 

Did anyone ever find the code to fix this?

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?

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. 

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

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

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?

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

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;
}

.grid-image-wrapper img {
    width: auto !important;
    height: 100% !important;
    top: 0 !important;
}

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

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

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.

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

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.