I have a customer whose products are the photographs he’s taken. The store, then (using Woo Commerce) shows thumbnails of the images, and when you click you get the full size.
The problem is there is only one thumbnail size setting in the back end and its set for horizontal images – but some images are vertical.
http://itestwebpageshere.biz/product-category/carribean/
How can I adjust the vertical images independently. Ideas are welcome, even if you can’t post a coded solution. I’ve been racking my brain for a while on this and can’t seem to come up with anything easier than re-writing the way Woo Commerce deals with images to have a ‘vertical’ option.
So here’s what I came to:
In the CSS, where the class for the product images was declared there was:
I changed it to:
Logic behind the fix:
If the width is at 100% of the div element the images are in, the horizontal images are capped at a max with (220px in this case), but the vertical image is stretched to that width. Woocommerce automatically scales its height to match, causing the theme to break. If we switch the width to ‘auto’ then the images will sit at their natural width. This causes the theme to break again because now the horizontal images aren’t capped at a certain width (and become too wide for the page).
By declaring only max-width at 100% we do two things: We limit the width of the horizontal images to the size of the block element they’re in (220px); We let the CSS sort out the min-width on its own. Because no width or min width is declared, they will be set to ‘auto’.
This allows the vertical image to sit at its natural width, but caps the horizontal images at the width of the box, thus keeping all of the images scaled and our layout clean and lined up.