Disable Auto Zoom / Cropping on Individual Product Images

Hi All,

I am selling prints, and would like to disable the auto-zoom on each individual product so the buyer can see a bigger scale rendition of the print they are buying. My template does not have an option to disable autozoom on images. I am using Lange.

I was able to make this happen on the main products page using the code below:

.ProductList-outerImageWrapper {
     position: static;
     padding-bottom: 0px !important;
 }
 
 .ProductList-innerImageWrapper {
     position: static;
     margin-left: auto;
     margin-right: auto;
 }
 
 .ProductList-image {
     width: 100% !important;
     height: auto !important;
     top: 0px !important;
     position: static !important;

Unfortunately I'm not savvy enough to get that to apply to the individual product. 

Here is a link to a good example of an image that is being cropped: https://www.fantasiummedia.com/prints/stars-over-lake-atitlan

Offering a print of your choice at cost for anyone that can help!

Hi @fantasiummedia.

Here's how I'd approach it. Note that object-fit is focused on fairly modern browsers.

.ProductItem-gallery-slides-item-image {
    object-fit: contain !important;
    object-position: top;
    width: 100% !important;
    height: 100% !important;
    position: static !important;
}

.tweak-product-item-gallery-aspect-ratio-11-square .ProductItem-gallery-slides::before {
    padding-bottom: 0 !important;
}

.tweak-product-item-gallery-design-slideshow .ProductItem-gallery-slides-item {
    position: relative !important;
}

Let me know how that works for you.

---------------------

UPDATE 4/8/2020 (and 6/24/2020)

In some cases, you may prefer to use this instead:

.ProductItem-gallery-slides-item-image {
    object-fit: contain !important;
    object-position: middle;
    width: 100% !important;
    height: 100% !important;
    position: static !important;
    background-color: #EEE;
}

@brandon I'm just now seeing this. That worked perfectly, thank you so much! DMing you a code for 50% off anything on the site if you see anything you like. 

I've been looking for this forever, thank you!

@brandon Hello, Is it possible to show the whole image on the lightbox and not be cropped as well? site: http://www.arch-worldwide.com/shop-all The below image should be a portrait image but is cropped to fit the screen width...

12 minutes ago, Arch said:

@brandon Hello, Is it possible to show the whole image on the lightbox and not be cropped as well? site: http://www.arch-worldwide.com/shop-all The below image should be a portrait image but is cropped to fit the screen width...

Add to Home > Design > Custom CSS

.gallery-lightbox-item img {
    top: 0 !important;
}

@tuanphan This only pushes the image down but doesn't fit the whole image on the screen though, I tried object-fit: contain but it doesn't seem to be working, I tried height: 100% but it just pushes the image and skews its dimensions

On 10/9/2019 at 8:19 AM, brandon said:

Hi @fantasiummedia.

Here's how I'd approach it. Note that object-fit is focused on fairly modern browsers.

.ProductItem-gallery-slides-item-image.loaded {
    object-fit: contain !important;
    object-position: top;
    width: 100% !important;
    height: 100% !important;
    position: static !important;
}

.tweak-product-item-gallery-aspect-ratio-11-square .ProductItem-gallery-slides::before {
    padding-bottom: 0 !important;
}

.tweak-product-item-gallery-design-slideshow .ProductItem-gallery-slides-item {
    position: relative !important;
}

Let me know how that works for you.

---------------------

UPDATE 4/8/2020

In some cases, you may prefer to use this instead:

.ProductItem-gallery-slides-item-image.loaded {
    object-fit: contain !important;
    object-position: middle;
    width: 100% !important;
    height: 100% !important;
    position: static !important;
    background-color: #EEE;
}

 

Hey Brandon - where are you using the code above? The products page header code?

On 6/15/2020 at 7:00 AM, Arch said:

@brandon Hello, Is it possible to show the whole image on the lightbox and not be cropped as well? site: http://www.arch-worldwide.com/shop-all The below image should be a portrait image but is cropped to fit the screen width...

Something like this should work:

.gallery-lightbox-item img {
  width: 100% !important;
  object-fit: contain;
}

Hi Brandon,

I've applied your solution and your updated solution in Home-Design and on the Product Page Header.  I'm not seeing anything change and my images are still cropped.  Can you please let me know where to paste this.  It seems to be working for people and I'd love to use it!  Thanks!

How do you disable zoom for one product picture on one page (not all of them)

On 10/3/2020 at 2:20 AM, LostBoy said:

How do you disable zoom for one product picture on one page (not all of them)

 

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

Here you go everyone.  This fixes both the Product Slideshow image and the lightbox image to be 100% height of the container:

/*Product Image Fix*/
.products.collection-content-wrapper .ProductItem-gallery-slides-item-image {
    object-fit: contain !important;
    object-position: top;
    width: 100% !important;
    height: 100% !important;
    position: static !important;
}

.gallery-lightbox-item img {
    object-fit: contain !important;
    object-position: middle;
    width: 100% !important;
    height: 100% !important;
    position: static !important;
}

.grid-item img
{    width: 100% !important;
    height: 100% !important;
  object-fit: contain !important;
    object-position: middle;
}

/*END Product Image Fix*/

Hi there, I'm using Foster and all my products are cropping.

The CSS below worked, but there is a huge amount of spacing underneath the main product image and the gallery of thumbnails beneath.

Does anyone know of CSS coding to fix this or is there an option to stop auto-cropping with the Foster template?

.ProductItem-gallery-slides-item-image {
    object-fit: contain !important;
    object-position: top;
    width: 100% !important;
    height: 100% !important;
    position: static !important;
}

.tweak-product-item-gallery-aspect-ratio-11-square .ProductItem-gallery-slides::before {
    padding-bottom: 0 !important;
}

.tweak-product-item-gallery-design-slideshow .ProductItem-gallery-slides-item {
    position: relative !important;
}

6 hours ago, HelenDriver said:

Hi there, I'm using Foster and all my products are cropping.

 

The CSS below worked, but there is a huge amount of spacing underneath the main product image and the gallery of thumbnails beneath.

 

Does anyone know of CSS coding to fix this or is there an option to stop auto-cropping with the Foster template?

.ProductItem-gallery-slides-item-image {
    object-fit: contain !important;
    object-position: top;
    width: 100% !important;
    height: 100% !important;
    position: static !important;
}
.tweak-product-item-gallery-aspect-ratio-11-square .ProductItem-gallery-slides::before {
    padding-bottom: 0 !important;
}

.tweak-product-item-gallery-design-slideshow .ProductItem-gallery-slides-item {
    position: relative !important;
}

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

https://mackerel-gecko-e9sp.squarespace.com/shop/restore

How can I share my website with you without giving everyone else access to it? 

Please set up a site-wide password, if you've not already done so. Post the password here. The only folks that are likely to look at your site are people who want to help you.

We can then take a look at your issue.

@brandon Where should that code be placed? I've tried in the design css code injection and in the page header code injection and neither make any difference to how images crop on the item detail page.

Thanks

Hello

@DPruitt I have used your code and it worked perfectly. 

However on the product page, for items that are landscape format, it moves the image to the bottom, with a huge gap between the menu and the image.

How can I fix this?

/*Product Image Fix*/
.products.collection-content-wrapper .ProductItem-gallery-slides-item-image {
    object-fit: contain !important;
    object-position: top;
    width: 100% !important;
    height: 100% !important;
    position: static !important;
}

.gallery-lightbox-item img {
    object-fit: contain !important;
    object-position: middle;
    width: 100% !important;
    height: 100% !important;
    position: static !important;
}

.grid-item img
{    width: 100% !important;
    height: 100% !important;
  object-fit: contain !important;
    object-position: middle;
}

/*END Product Image Fix*/

The best way to reduce the white space is to select the ratio upfront that you want the container to be.
This is probably 1:1, so you might switch the container to a 3:2 instead.  This will however, give more spacing on the sides to the portrait images.

On 10/21/2020 at 11:35 AM, DPruitt said:

Here you go everyone.  This fixes both the Product Slideshow image and the lightbox image to be 100% height of the container:

/*Product Image Fix*/
.products.collection-content-wrapper .ProductItem-gallery-slides-item-image {
    object-fit: contain !important;
    object-position: top;
    width: 100% !important;
    height: 100% !important;
    position: static !important;
}

.gallery-lightbox-item img {
    object-fit: contain !important;
    object-position: middle;
    width: 100% !important;
    height: 100% !important;
    position: static !important;
}

.grid-item img
{    width: 100% !important;
    height: 100% !important;
  object-fit: contain !important;
    object-position: middle;
}

/*END Product Image Fix*/

 

 

Thankyou! This worked perfectly!