Woocommerce product images with variable proportions, fixed square frame?

[DanL]

DanL

August 25, 2016 at 4:43 pm

I have a need to keep all of my product images inside fixed-size square frames, even though the images are of differing proportions. I want the entire image to show, regardless of proportion or size, and it should never be cropped. Tall or wide images would still be constrained to the square frame while showing some background on the sides for tall images or the top/bottom for wide images. Square images would fill the entire square. I used to do this all of the time on other platforms (like Drupal, Joomla, ModX and such – this type of image display for shops and galleries used to be very common) and while I’ve grown to love WP/WC (especially with Virtue Theme – yay!) I really miss this type of gallery/shop view of images. I want consistent thumbnails (all square) but I don’t want the images cropped – it’s Ok if they don’t fill the entire frame, but the height or width (whichever is greater) should be the containing factor.

I hope I made myself clear enough. Sorry if I’m not articulating well or confusing the issue. (Easy to show visually; hard to explain in writing.)

Is there some CSS (or a theme setting) to do what I’m trying to do? Auto-cropping of images is a poor way to fly most of the time for my needs, and trying to manually resize/photoshop/create square images that internally contain various proportioned images is just not feasible when thousands of images of various sizes and proportions are in play, and non-techs/non-designers are shooting and uploading various sized product pictures near daily. (There are several photo gallery plugins that do exactly what I’m asking for here, but I really need to do it for product images/thumbnails, and I’ve yet to find a plugin or setting that does it.)

Anyhow, let me know if you have some advice – or CSS – to share to help me reach this rather elusive goal. I’d be happy as a lark to solve this mystery once and for all!

Appreciated,
-Dan L.