crop images to a max and min height and width?

[midnite]

Hello, I’m having trouble getting my images to crop to a specific size. Tried everything I can think of. What I would like is to set a size for the main product image (540×400), and a size for the product thumbnail (270×200), with a white background color (not transparent) and have it be centered vertically and horizontally in the white container box. Then every product photo I upload would be auto cropped to that ratio with max width and min/max height. Right now no matter what I try the width is always 270 (and 540 for the big one) but the length is always to ratio. So right now if i have a tall/thin image to start with it’s setting it as 270×800 for example, which really throws off the grid. What i would like to have happen is something like this:

Example 1 (tall original image):
If the original is 204×600, it should resize it to 136×400 for the big product image and place it centered horizontally on a white box that’s 540×400. The thumbnail should be resized to 68×200 and placed centered horizontally on a white box that’s 270×200.

Example 2 (wide original image):
If the original is 600×204, it should resize it to 540×184 for the big product image and place it centered vertically on a white box that’s 540×400. The thumbnail should be resized to 270×92 and placed centered vertically on a white box that’s 270×200.

My current settings:
Catalog Images – Width 540 / Height 400 Hard Crop on
Single Product Image – Width 540 / 400 Hard Crop on
Product Thumbnails – Width: 140 / Height 140 Hard Crop on
* Ran Regen Thumbnails multiple times, says successful but no change.
* Do have GL library enabled on web server.

See attached image that shows what I want vs what is actually happening.

This is probably something most people would want to have happen to maintain a clean grid, please let me know if this is possible. Thanks!

[Melanie – SUPPORT]

Hi, I’m terribly sorry that we’ve missed your thread!

I’d like to check the backend of your website to investigate, could you let me know your login details please?

Thanks and cheers!

[midnite]

This reply has been marked as private.

[Melanie – SUPPORT]

Hey, all your images look fine on your site – can you please specify where exactly I need to look?

[midnite]

oh, that’s because i used photoshop to invidually crop and resize those images before i uploaded them. i’d like wordpress to do that though so that the person updating the site can just upload an image and not break the grid. please see the image i attached earlier for reference, or feel free to create a new product and test. thanks.

[Melanie – SUPPORT]

I uploaded a new product and it gets cropped perfectly fine both on the single product page

http://64.34.165.173/~dinofarm/product/test/

as well as the shop overview

http://64.34.165.173/~dinofarm/shop/

[midnite]

I’m sorry but I don’t think you looked at the image I uploaded. When you upload a tall image, it gets cropped to 270px wide and stays long thus breaking grid. The image I uploaded in this thread shows exactly what I want to happen instead. I can’t explain it any better. The test product you created only fit in that size because your original image was already that ratio. If you look at the balloon image you uploaded though – which is tall – it gets resized to 270px wide and stays really long and breaks the grid.

I can’t waste any more time on going back and forth trying to explain this unfortunately. Thanks for trying but please delete this thread, I’ll hire a programmer to take a look.

[Melanie – SUPPORT]

Oh… I see, the image on http://64.34.165.173/~dinofarm/product/test-two/ looks stretched… The custom css

.woocommerce div.product div.images img, .woocommerce-page div.product div.images img, .woocommerce #content div.product div.images img, .woocommerce-page #content div.product div.images img {
height: auto!important;
}*

would fix that but would distort other images… I’ll have to ask the developer if he thinks that this aspect ratio is not working for images 🙁

Cheers

[jonorenton]

I’m also wanting to do the same as midnite and have max-height and max-width on thumbnail images. Any updates on this?

Thanks 🙂

[Mohammad – SUPPORT]

@jonorenton – Please create a new topic under Flexform category.
Thanks
Mohammad

[jonorenton]

Mohammad, I’d like to know the answer for the Neighboorhood theme, not Flexform.

Thanks,

Jono

[Mohammad – SUPPORT]

Hi,
Sorry, i got it wrong. Please try to use the code as Melanie suggested to midnite.
Thanks
Mohammad

[jonorenton]

Added the custom CSS and it hasn’t worked. It’s not an urgent problem so I’ll have a look into it myself later unless you know of another solution!

Thanks for your time!

Jonp

[Mohammad – SUPPORT]

Hi,
We will find a solution to this issue and update you.
Thanks
Mohammad