[Resolved] Image sizes on category page

Home Forums Support Image sizes on category page

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #1035158
    ustar

    Hi, there!

    1. Today, all day I try to tidy up the display of product cards on category pages. The problem is that the photos on the cards are displayed with an additional white field on the right side.
    Screenshot:
    https://postimg.cc/T5cdtG1F

    To display the available sizes, I use the plugin STWooSwatches and it works with the theme in some way. The plugin forms an additional block when you mouse over the product card. Its width is set to 100% of the width of the product card.
    I noticed that the size block size is always larger than the product card block size by 20 pixels. Even when scaling the screen. And this, I think, causes an extra white field on the product card.

    2. I would like the photo to occupy 100% of the width of the product card.
    Screenshot:
    https://postimg.cc/t1hcfGLN

    I don’t know exactly who to contact with my question. To you, or to the developer of the size plugin, I just wrote you first.
    You have access to the site for addresses: XXX.X.XX.196 and XX.XXX.XX.27

    I am using the niche template.
    Lazy loading of images is disabled.

    #1035552
    David
    Staff
    Customer Support

    Hi there,

    can you clear and disable autoptimize so i can take a closer look.

    #1035685
    ustar

    Hi, David!

    Autoptimize cache cleared, Autoptimize disabled.

    Regards, Sergey.

    #1035689
    David
    Staff
    Customer Support

    Looks like that resolved the issue – check by clearing your browser cache. If thats correct can you re-enable autoptimize now

    #1035692
    ustar

    Are you speaking about 1st or 2nd question?

    I cleared browser caches and checked in 3 different browsers.
    The issue still here. Both.
    No changes.

    Could you please send me a screenshot?

    Regards, Sergey.

    #1035706
    David
    Staff
    Customer Support

    Hmmm… try adding this CSS:

    .st-swatch-plugin ul.products li.type-product .st-swatch-in-loop,
    .st-swatch-plugin ul.products li.type-product:before {
        box-sizing: border-box;
    }
    
    .inside-wc-product-image {
        margin-left: -13px;
        margin-right: -10px;
    }
    #1035981
    ustar

    Hi, David!

    Yes, much better! Cool!
    But there is still a small white border on the cards.
    https://postimg.cc/3dvTvM0C

    Regards, Sergey.

    #1036105
    David
    Staff
    Customer Support

    Thats because the images have a max width of 275px and the columns on larger screens are 282px.

    #1036138
    ustar

    Aha, understood.

    Is it possible to make them 275px or 282px or 300px both? To remove this white border.

    Or 275px is the wide sated by theme and it’s not possible to change?
    In this case, is it possible to change column wide to 275?

    I have set Thumbnail width to 282px in Customizing/Woocommerce/Product images, but nothing changed.
    I do not quite understand how this setting works and what it affects.

    #1036171
    David
    Staff
    Customer Support

    The image size is controlled by Woocommerce. The Customizer > Woocommerce > Product Images — > Thumbnail width is what defines them. Currently it still set to 275px in the markup.
    Try disabling autoptimize and re-apply the image sizes.

    #1036564
    ustar

    I cleared the Autoprimize caches, disabled the plugin, and cleared the browser caches.
    Then, I reset the thumbnail size to 282px here: The Customizer> Woocommerce> Product Images -> Thumbnail width.
    The white border is still displayed.

    The interesting thing is:
    When I reduce the screen size and product cards are also reduced, the width of the image becomes equal to the width of the product card and remains the same with further reduction.
    In other words, as soon as the product’s card size becomes 275 pixels or less, the border disappears.

    In addition: when the mouse coverse the image, the next image from the product gallery is displayed. But, it looks a little blurry. For comparison, I downloaded this thumbnail from the server and compared. The image from the server is clearer. It seems that WC does not use the finished image 275×275, but converts some other. Or i don’t know why image from server is clearer then on frontend.

    #1036640
    David
    Staff
    Customer Support

    I am not seeing the border anymore and the IMG HTML width is now showing as 282px. Maybe try clearing the browser cache.

    #1036925
    ustar

    hi, David!

    Yes, it works! Thank you very much!
    The last – the border on the top of image.
    It’s seeing not on the all products, but it is there.

    Regards, Sergey.

    #1037083
    David
    Staff
    Customer Support

    That would probably be related to a different aspect ratio.
    The link you originally provided no longer takes me to the site we were helping with.

    #1308473
    ustar

    Thanks, David!

    Regards, Sergey.

Viewing 15 posts - 1 through 15 (of 16 total)
  • You must be logged in to reply to this topic.