Square thumbnails without cropping

  • Hi!

    I’d like to have my the photos on my product archive pages to be square. The problem is, when I do this, the images get cropped and it leaves some ugly cut off pictures. However, there are over 3000 products and as you can imagine I’d rather not resize them hand by hand.

    What I’ve tried so far:
    1. Going into Appearance > Customize > WooCommerce > Product Images > Selecting the ‘Uncropped’ option. While this solves the problem of images getting cropped, it creates another problem. Now the images use their original sizes leaving a messy page with uneven products boxes.

    2. Regenerate Thumbnail. I’ve ran this plugin, however, nothing changes. On the Regenerate Thumbnail page I see these, I think, settings:

    woocommerce_gallery_thumbnail: 100×100 pixels (cropped to fit)
    shop_thumbnail: 100×100 pixels (cropped to fit)

    I’m not sure if this is a problem but it seems suspicious to me..

    3. Turning off the ‘Crop thumbnail to exact dimensions (normally thumbnails are proportional)’ option in Settings > Media.

    I’m using the Hello Elementor theme and using Elementor Pro.
    If I remember correctly I had a csv file with both .png and .jpg files once, and when I used the Regenerate Thumbnail plugin back then only the .png files seemed to resize. So my guess is that it might have to do something with the .jpg file type. Luckily for me, all the images I have right now are .jpg… /s

    Thanks in advance for your help.

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)

  • The actual size of the thumbnail images isn’t the problem. It’s how the are displayed.

    Basically you can’t take a rectangular image and crop it to a square image without loosing *something*. I’ve had this discussion many times before with many designers, and it always comes down to the same final question “Well, what parts of the image are you willing to loose?”.

    The only way that you can get around it is to modify the image gallery template files that WooCommerce uses (in your own theme or child theme of course) and set the images as a CSSS background image to a new HTML element (normally a <div>) and set the background size to ‘contain’. That will shwo all of the image without cropping, but you will have blank areas around pretty much every image that doesn’t exctly fit in the bounds of the containing element.

    Josh

    (@joshintosh)

    @catacaustic To be fair, you’re forgetting about a 3rd option. Make the rectangle a box by adding transparent space and proportionately shrinking the image. This is actually the only thing Drupal does better than WordPress. You have way more options when creating cropped images. Unfortunately, I haven’t found a good solution yet.

    @joshintosh You are right, mostly. ??

    I say mostly because, as you say, WordPress doesn’t do that. As this is a WordPress forum, I was focusing on what WordPress actually does so that there wasn’t any confusion.

    If I was doing that, there’s more ways to do it as well, but they all require more than just an image resize, and aren’t part of any core WordPress functions/features. ??

    Jan

    (@krugmedien)

    Hi,
    you can use this plugin:
    https://www.ads-software.com/plugins/smart-image-resize/

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Square thumbnails without cropping’ is closed to new replies.