Cropped and square Thumbnail’s

  • Resolved JLee

    (@karado58)


    2 years, 11 months ago

    Hello,

    I will be selling magazines, and need images to appear as they are, rectangular.

    My product images look as they should, perfect.

    Issue is the Thumbnail’s, they are square and cropped. I need them to appear as original, rectangular.

    Contacted theme support, “Porto”. They stated, “images are coming from the WooCommerce plugin our theme has nothing to do with it”

    I played around with the following code:
    ul.product_list_widget li .product-image img{height:100px !important;}

    It make it rectangular, but still crops and stretches image.

    Note: Everything is running latest updates.

    Any help appreciated!

    Site in question

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

Viewing 15 replies - 1 through 15 (of 22 total)
1 2
  • Igor H

    (@ihereira)

    2 years, 11 months ago

    Hello,

    I understand the site products are magazines and you would like to show the magazine cover completely rectangular without crops.

    I was trying to inspect the site to check it but the right click and inspect elements are disabled on your site 🙁

    Can you temporarily enable that feature so that we can take a closer look?

    Please let us know. Thanks.

    Thread Starter JLee

    (@karado58)

    2 years, 10 months ago

    Hello Igor,

    Thank you for wanting to help!

    Sorry about that, it’s disabled now.

    Thanks again for any help you can give in resolving this!!!

    K58

    xue28 (woo-hc)

    (@xue28)

    2 years, 10 months ago

    Hi @karado58

    Thank you for enabling the feature as requested by Igor.

    Upon checking your site, I can see several thumbnails under Feature Products, Top Rated Products, Best Selling, and Latest Products.

    If you could please provide us with a clear screenshot of what exactly the thumbnail you are referring to here, that would help us further troubleshoot.

    You can use https://snipboard.io/ for the screenshot. Please follow the steps on the page and paste the link here.

    Thanks.

    Thread Starter JLee

    (@karado58)

    2 years, 10 months ago

    Hello @xue28,

    Like I mentioned on my first post. Original images were square, and cropped top and bottom.

    I added the following code to try and make image rectangular, it did that, BUT it also stretched it and still cropped top and bottom:

    ul.product_list_widget li .product-image img{height:100px !important;}

    https://snipboard.io/whdKQC.jpg

    • This reply was modified 2 years, 10 months ago by JLee.
    • This reply was modified 2 years, 10 months ago by JLee.
    • This reply was modified 2 years, 10 months ago by JLee.
    Mirko P.

    (@rainfallnixfig)

    2 years, 10 months ago

    Hi @karado58,

    Thumbnails appear stretched on your product page as they’ve been cropped already to 150*150 px as you can see here:

    https://www.bruceleeitems.com/wp-content/uploads/2022/07/test-3-150×150.jpg

    Can you test with the Storefront theme and check if they still are cropped? Can you see 1:1 cropping ratio in Appearance > Customize > WooCommerce > Product images?

    Also, oftentimes regenerating all shop thumbnails will solve issues. You can do so from WooCommerce > Status > Tools > Regenerate shop thumbnails:


    Link to image: https://snipboard.io/A5iESk.jpg

    Let us know how it goes.

    Thread Starter JLee

    (@karado58)

    2 years, 10 months ago

    Hello @rainfallnixfig,

    Thank you for chiming in to help!

    Set previously to Uncropped:
    https://snipboard.io/fiZW4U.jpg

    Yes, I have previously ran Regenerate.

    Plugin Support Kaushik S. a11n

    (@kaushiksomaiya)

    2 years, 10 months ago

    Hi there!

    Could you confirm if you are using a plugin to add the top-rated, recent and best-selling products?

    I tried adding these legacy widgets on my test site, but I was able to see them in full size and uncropped.

    Thread Starter JLee

    (@karado58)

    2 years, 10 months ago

    Hello @kaushiksomaiya,

    It’s not a plugin, it’s part of the Porto theme I’m using.

    Thread Starter JLee

    (@karado58)

    2 years, 10 months ago

    Trying to make sense of this!

    A) Uploading images of magazine covers, as rectangular.

    B) Main product images are appearing correctly, as “rectangular”.

    C) System is reformatting the images into a “square” for area in question.

    It can only be 1 of 2 that is generating square images for “Top rated.., Best Selling.., and Rated…”

    1. Woocommerce
    2. Porto Theme (support said it’s Woocommerce)

    Is this a correct assumption?

    Rashed Ripon (a11n)

    (@rur165)

    2 years, 10 months ago

    Hello @karado58 ,

    Thanks for the recap of the problem.

    I understand the widgets are showing cropped square thumbnails instead of the un-cropped version of the image.

    According to your screenshot your current theme Porto seems to offer additional image resizing option:


    Link to image: https://d.pr/i/f89Ejq

    So, it is hard to tell if the theme is actually cropping the images despite selecting the uncropped option.

    —

    I recommend you follow these steps and let me know what you find:

    – Switch to Storefront
    – Deactivate all plugins except WooCommerce
    – Regenerate thumbnails
    – Check how the product thumbnails show

    If you do not want to do this test on the live site, please use WP Staging plugin to create a staging site and test there.

    Let us know the result.

    Thread Starter JLee

    (@karado58)

    2 years, 10 months ago

    Hello @rur165,

    Thank you for responding.

    No, I believe that is added by Woocommerce and not by Porto theme.

    Customizing ▸ WooCommerce Product Images ▸ Thumbnail cropping

    When I make changes here, it effects the main product images, and not the thumbnails. Does Woocommerce not distinguish between thumbnails and main product images??

    Being a novice, I’m totally confused here!!

    Thread Starter JLee

    (@karado58)

    2 years, 10 months ago

    UPDATE:

    Was able to fix the thumbnail under product image with the following code in the child theme functions.php:

    https://snipboard.io/tY50SZ.jpg

    add_filter( 'woocommerce_get_image_size_gallery_thumbnail', function( $size ) {
return array(
'width' => 150,
'height' => 150,
'crop' => 0,
);
} );

    Still looking for a fix for “Top rated.., Best Selling.., and Rated…” on main page!!

    https://snipboard.io/GdZa0i.jpg

    Thread Starter JLee

    (@karado58)

    2 years, 10 months ago

    Not resolved, but no one is following up to help.

    Mirko P.

    (@rainfallnixfig)

    2 years, 10 months ago

    Hi @karado58,

    Was able to fix the thumbnail under product image with the following code in the child theme functions.php

    Good to know that you’re progressing toward a solution. In order for us to check if it’s a theme-related issue, as it probably is, would you mind creating a staging site, deactivating all plugins except WooCommerce and switching your theme to Storefront as suggested earlier? We’d like to check how your images are displayed with that configuration.

    You can create a duplicate with the WP Staging plugin and share the URL into this thread.

    Thanks.

    Thread Starter JLee

    (@karado58)

    2 years, 10 months ago

    Yes I can do that, but it wouldn’t tell us much since “Top rated.., Best Selling.., and Rated…” area is created by Porto theme.

Viewing 15 replies - 1 through 15 (of 22 total)
1 2
  • The topic ‘Cropped and square Thumbnail’s’ is closed to new replies.