0

One of the websites I work with has a WooCommerce store with well over 2000 products. Recently, I replaced all of the rather hodge-podge product images with new ones snipped out of our catalogues, which took quite some time. However, while they're uniform in aesthetic, being simple CGI representations of the products on white backgrounds, there is quite a lot of diversity in the dimensions of the images, meaning that they either display unevenly when alongside each other, or display cropped in the product thumbnails.

Is there a plugin (or a different method) of adding white space to these images en-masse so they are all of an equal height and width? This could be an actual edit to the image files themselves, or written rules via CSS or HTML that dictate how they display in a way that they appear to be of the same scale (the site has a white background so the latter would work fine). I would rather not have to do this manually through Photoshop is all, as there is a large amount of images and it would take quite some time to edit and reupload them all.

EDIT: Here's an example of the silliness that occurs. The silliness

0

I had a similar problem with one of my previous projects, featured images for posts and products were various in quality and sizes.

So I took the following approach:

I created a container div for images which has fixed width / height. The featured image is added as a div background then. The code that does it is as follows:

<?php
$thumb_id = get_post_thumbnail_id();
$thumb_url = wp_get_attachment_image_src($thumb_id,'full', true);
?>
<?php
// Must be inside a loop.

if ( has_post_thumbnail() ) { ?>
  <div class="egazine-post-background" style="background-size: cover; background-position: center center; background-repeat: no-repeat;background-image: url(<?php echo $thumb_url[0]; ?>);"></div>
<?php }
else { ?>
  <div class="egazine-post-background" style="background-size: cover; background-position: center center; background-repeat: no-repeat;background-image: url(<?php echo get_template_directory_uri() . '/img/egazine-bg.jpg' ?>);" ></div>
<?php }
?>

That way all the images are of the same size. First part sets thumbnail as background and if you are still not satisfied with the image quality, you can delete it and use fallback image (after else part).

  • Where would I implement this snippet? How does the finished result look? – McOwen Jun 13 '17 at 14:54
  • First you need to copy WooCommerce template files to your theme directory and then modify woocommerce/single-product/product-image.php. There you will find code that has if ( has_post_thumbnail() ) { and just modify it – Marko Jezernik Jun 14 '17 at 8:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.