This is what happens… when I cannot set max height

[peter4576]

Hi guys

I have touched this subject before.

Thing is that I cannot expect from my costumer to upload same size images. There needs to be some intelligence handling the image-sizes.

If I make all images the same size, I have the problem with beer-boxes/ cases. Problem is that I place the case center of the image, which means there is LOADS of white space on top on product-page, which looks really crappy. If I place the wide box on top of the image it looks good on the product-page but really crappy in the product-listing.

The thing is that it should be quite easy to insert a max-height, so that the engine would automatically place the odd-size images center-center within the max height and max width. That way everybody would be happy.

Do you know what I mean now?

Thanks

Peter

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Try adding this to your custom css:

.woocommerce .products .product figure .img-wrap img {
  height: 300px;
  width: auto;
}
.woocommerce .products .product figure .img-wrap {
  text-align: center;
}

– Kyle

[peter4576]

– Kyle! That is f brilliant! Works like a charm! Thank you! Much much much much better!

[Rui Guerreiro – SUPPORT]

Glad it’s sorted. Thanks Kyle

-Rui

[peter4576]

Hi again Rui!

I have found out that no matter what size I set the large image to, the product on the landing-page (product page) is maxed out, meaning that the hover-zoom makes the image smaller. How come cant I set the size right?

Thanks

Peter

[Kyle – SUPPORT]

Go to Theme Options > WooCommerce Options and reduce the image width

– Kyle

[peter4576]

… but then suddenly I have a product-image which takes up 10% of the page and like 90% tabs etc. That will look really bad. Should I manually overwrite the max-height using css then?

Thanks

Peter

[Kyle – SUPPORT]

You just have to set the width of the image area to fit well with the size of images you upload.

– Kyle

[peter4576]

But the size of the images the customer uploads could be any size image, really… and in that case I would just expect the product image to be like center-center of the image-area? Cos some bottles are like VERY long, and some beer-boxes are horizontal on the other hand… 🙂

[Kyle – SUPPORT]

Not sure if this will work but you can try it:

.woocommerce div.product div.images img {
  display: inline-block;
  max-height: 400px;
  width: auto!important;
}
#product-img-slider .lSSlideWrapper {
  max-height: 400px;
}

– Kyle

[peter4576]

Hi Kyle!

Thank you very much!

Much, much better! Thank you should implement this is your theme as option. (just a friendly suggestion).

I only see 2 problems:

1. When image is not that wide, the zoom function gets cut off. The zoom function should either be linked up to overlay in different z-index, OR, it should be “bound” to the overall size of the image-container/ image-area.

2. The image should be center aligned with the placeholder (and not left-aligned as it is now).

And one last thing btw: The one thumb is waaay higher than the other images. I dont see why that is? Shouldnt there be a max height on these thumbs also?

Thanks

Peter

[Kyle – SUPPORT]

Have you added my custom css? Because it’s just showing normal for me so I can’t check it

– Kyle

[peter4576]

Sorry, I had removed it again. Please have another look.

Also, despite of changing the thumbnail size, the coming soon image is ok but the real images are too tall. Pls take a look 🙂

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

That looks like a customisation you have made, did you say you developer had added some code to change all of those images?

Add:

.woocommerce div.product div.images {
  text-align:center;
}

– Kyle

[peter4576]

Hi Kyle. I just happened to come across this one also. I know I write you a 1000 times and I am a big pain in the ass. But I just dont understand why its only me running into these problems??

Please see attachment.

Also the images on the quickview page screw up 🙁

Attachments:

You must be logged in to view attached files.