Center Non Cropped Thumbnail in Grid Containers

[mattmikulla]

Ok. So this is something that’s been bothering me for a while and would love to find a solution.

I am using WooCommerce for a shop and my current theme is Enfold.

The problem with almost all themes I’ve found is the product thumbnail on catalog, category and tag pages needs to be cropped at 1:1 aspect ratio for consistency.

My problem is I have product images with varying aspect ratios such as 2:3, 3:2, 3:4. 4:3 and 1:1.

I don’t want my product thumbnails for display on catalog pages to be cropped. Instead I want the thumbnail, regardless of ratio, to be centered both vertically and horizontally in the individual grid container. All while being responsive and flexible.

Ideally this should result in a consistent grid layout at any viewport.

Any ideas on how to achieve this with CSS or CSS and JS?

I’ve been out of CSS for a while so I don’t know if there is a new way to handle it? It was relatively easy to do before RWD.

I’m thinking this would be a very useful setup for many people displaying images in thumbnail grids.

[Beverleyh]

Can you provide a reduced sample setup in CodePen? – The pertinent markup and CSS, so that we’ve got something to work with – solutions will be different depending on if images are displayed via img tags or divs with background-images.

[Alen]

@mattmikulla, this might not be coding issue but image preparation issue. You could create 1:1 container for your 2:3, 3:2, 3:4. 4:3 images… this way you can have more creative control, even create a certain look/feel. Don’t rely on the software to make the cropping decisions for you.

[mattmikulla]

This may take me quite a while if I have to provide images as well.

Like I said, I’m using a theme so it can be pretty complicated as far as the CSS goes but the HTML markup is the standard WooCommerce product catalog code for the most part.

I’ll try to get a good setup for you.

[mattmikulla]

Are you saying just to prepare the file to 1:1 and center the artwork in the final image? Then that’s the image used for the thumbnail and single product page image?

I could do this I guess but was hoping it could be handled programmatically so I just need to upload the image once without the additional photoshop work.

The way WooCommerce works is you upload one image and the thumbnail is created from that.

I just worry about boxing myself in and creating extra work.

[Alen]

I’m assuming you are editing these images, like applying S-curve, white balance, etc… If you are, it’s just one extra step in whatever editing software you use to crop at 1:1.

Have you tried visiting: WooCommerce->Settings>Products>Display and play with the dimensions, hard crop settings? You might need to use Regenerate Thumbnails once you change these settings.

If that doesn’t get the job done, you’ll have to modify your templates to include the proper thumbnail that you can create by defining custom thumbnail size.

Do you have examples for us?

[mattmikulla]

The closest I can find to what I’m trying to do is 20×200.

Here is a product catalog page. It looks like the thumbnails and containers resize at breakpoints.

http://20×200.com/collections/art-for-kids?page=2

It has different aspect ratio thumbnails.

Here is my current page with the thumbnails cropped 1:1 but the CSS allows the grid to be completely flexible and containers and images scale as the page is resized.

https://mattmikulla.com/shop/collection/fine-art-photography/

I’m looking for a combination of both if possible.

The problem with changing the WooCommerce hard crop settings to not hard crop the images won’t be centered horizontally and vertically because the CSS isn’t set up that way and I haven’t found a theme that behaves that way.

[Author]

Posts