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

Asked by fantasiummedia,

Followers 8

Question

fantasiummedia    3

fantasiummedia
Posted

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 16
  • Created
  • Last Reply

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Days

Popular Posts

fantasiummedia

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

brandon

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

rbiggs89

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

Posted Images

16 answers to this question

Recommended Posts

  • 1

brandon    8,982

brandon
Posted (edited)

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

tuanphan    8,571

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

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post
  • 0

Arch    5

Arch
Posted

@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

rbiggs89    1

rbiggs89
Posted
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

brandon    8,982

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

Aerdon    0

Aerdon
Posted

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

DPruitt    7

DPruitt
Posted (edited)

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

HelenDriver    0

HelenDriver
Posted

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

tuanphan    8,571

tuanphan
Posted
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

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post
  • 0

creedon    220

creedon
Posted

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.

Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

Sign Up / Login
Followers 8
Go to question listing
×
×
  • Create New...

Support

Community

Developers

Resources