[Support request] Woocommerce product images — Set one max length for long side

[waytogo]

On a Woocommerce site, product images can be portrait or landscape, and have varying sizes. On catalog pages, I need product images to display so that there is a max length (240 px) for the long side, whether the long side is horizontal or vertical. Unfortunately, on this page…(like: https://thomasbucci.com/gallery/themes/houses/)
… the portrait images in the 5th and 7th rows are 240px wide and then much taller.

Also, this needs to work with both desktop (wide) and mobile, where there is one column of images (one product image/row).

I know this is possible. Years ago, someone customized a different theme for the same site so there was one max length on long side. The site has been migrated to GeneratePress and I can’t figure out how to replicate this functionality.

We have rejected one approach, which is to create square boxes that contain the product image on both exes. That approach creates gaps of varying heights between the image and the image titles below the product images. Also, rows seem to be centered vertically and we want them flush top.

We can use 4 images per row on desktop if that helps.

Thank you for any help.

[Tom]

Hi there,

Is there any chance you can link me to an example of what you want it to look like?

Are you just wanting all of them to be the exact same size?

Let me know 🙂

[waytogo]

I apologize I don’t have an example of how it used to look, which is the desired appearance, or of the old code that worked.

We want:
*each product image’s long side to be 240px long
*each product image’s title to appear immediately below it
*product image rows to align top vertically (so top edges are the same)
*no hard-crop or distortion of the images

Most images will be about the same size, but a few may have a short side that is longer or shorter than the average. The key dimension is the long side.

[Tom]

WooCommerce can size images to be the same height, but I do believe it would require cropping.

This may require you to size these images manually using an image editor – that way you have full control.

[Author]

Posts