Disable Auto Zoom / Cropping on Individual Product Images

fantasiummedia · October 4, 2019

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!

brandon · October 9, 2019

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

Edited June 25, 2020 by brandon

fantasiummedia · November 1, 2019

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

Amber_Flowers · December 16, 2019

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

Arch · June 15, 2020

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

Edited June 15, 2020 by Arch

tuanphan · June 15, 2020

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

Arch · June 15, 2020

@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

rbiggs89 · June 16, 2020

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?

brandon · June 25, 2020

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

Aerdon · August 18, 2020

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!

LostBoy · October 2, 2020

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

tuanphan · October 4, 2020

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.

DPruitt · October 21, 2020

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*/

Edited October 21, 2020 by DPruitt
Added code

HelenDriver · October 26, 2020

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

tuanphan · October 27, 2020

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

HelenDriver · October 27, 2020

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

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

creedon · October 28, 2020

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.

Diamonds · December 20, 2020

@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

KimberlyJRandall · February 1

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*/

DPruitt · February 2

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.

Alexsm · June 15

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!

Disable Auto Zoom / Cropping on Individual Product Images

Question

Link to comment

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Days

Popular Posts

fantasiummedia

brandon

rbiggs89

Posted Images

20 answers to this question

Recommended Posts

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Create an account or sign in to comment

Support

Community

Developers

Resources