Make product images fit in square

[mdearden]

Hello,

I have a little problem with my site and the thumbnails.

Ideally i want all of my product images to fit nicely inside a square without chopping off half the image and giving it a boxy look. I want everything to fit nicely inside a square to give a consistent catalogue look to the site.

The problem from what i understand is that unless the original image i upload to the media library is infact a square then wordpress proceeds to crop the thumbnail down to the sizes set in Woocomerce settings. These sizes for the catalogue images are currently set to 300×300 with hard crop enabled. If i disable hard crop then the catalogue displays in all different heights, which looks worse.

Is there a way of fixing this as i feel it is letting the site down visually and re editing thousands of product images is not really an option.

Any help would be much appreciated.

Thanks
Matt

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Hi

You would have to upload all your images as squares, if they have different dimensions they would either have to crop or display at a different height

– Kyle

[mdearden]

Is there not anyway to fix this without manually editing thousands of pictures? Seems like a pretty basic feature that would help keep the themes style consistent.

[Kyle – SUPPORT]

I’m not sure what you’re asking for? Are you saying you want the theme to work out the size of your image, and if it’s not as big as the others, add more space to it? That’s hardly a basic feature.

– Kyle

[mdearden]

Hi Kyle,

I would like the images to fit into a box without being chopped, like the screen grab above suggests.

I would of thought it would of been in the interest of the theme to keep some consistency or control of the images, as it does not mention this anywhere that you must ensure all images you upload are of one specific dimension. As per your example shop, one would presume this is how every shop would look nice and consistent.

I would be happy to pay a premium for this to work. I think it would really benefit the theme.

[Kyle – SUPPORT]

I’m afraid we’ve tried multiple things and there’s nothing that can make different image sizes fit nicely. Sorry

– Kyle

[mdearden]

Hi Kyle,

I have made some progression on this, it appears it is very much possible it just needs some polishing up, which i hope you guys can help me with.

Firstly we need to turn hard crop off on product catalogue.

then we need to add this to the css.

.woocommerce ul.products li.product a img {
	width: 262px;
	height: auto;
}	
}

.woocommerce ul.products li.product figure > a {
	height: 262px;
}

.woocommerce ul.products li.product a img, .woocommerce-page ul.products li.product a img {
	box-shadow: 0 0 0 0 rgba(0,0,0,.3);
	-webkit-box-shadow: 0 0 0 0 rgba(0,0,0,.3);
}

It however does not work with images that are slightly different heights such as these: http://shop.rampworx.com/product-category/clothing/headwear/

I removed the shadows as these appeared stuck to the images which left a phantom grey shadow under them.

The only thing left to do now is to centre the images vertically, but i seem to be having some trouble with this using vertical-align:. If you could help it would be much appreciated.

Link: http://shop.rampworx.com/product-category/bmx/components/bmx-frames/

Thanks
Matt

[Kyle – SUPPORT]

Hi

Good work with how far you have got, unfortunately I’ve been trying for about 15 minutes and can’t seem to get the images to align vertically, I don’t think it’s possible with the structure of the html

– Kyle