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

Disable Auto Zoom / Cropping on Individual Product Images


fantasiummedia

Question

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!

Link to post
  • Answers 19
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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 ha

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

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

Posted Images

19 answers to this question

Recommended Posts

  • 1

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 by brandon

If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left)

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

 

Link to post
  • 0

@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

 

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

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

 

If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left)

Link to post
  • 0

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!

Link to post
  • 0
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.

Link to post
  • 0

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 by DPruitt
Added code
Link to post
  • 0

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

Link to post
  • 0

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

 

Screen Shot 2021-02-01 at 11.43.44 AM.png

Link to post
  • 0

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.

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