Image dimensions on photo gallery

  • Resolved sanderrrrr

    (@sanderrrrr)


    2 years, 7 months ago

    Hello,

    I am having issues with the image dimensions on my single product page.
    I am using Salient Theme. I have contacted them and they refer to you as they say its a native/integrated woocommerce solution.

    The issue is that the images do not get a dimension, but seem to be injected using javascript. As I am using deferred loading the images are injected at a later stage causing both a CLS issue and a missing image dimensions issue.

    Is this something you are aware of and is there a solution to this?
    It seems to be related to .flex-control-thumbs

    Note that we have disabled photoswipe and zoom; but that does not affect this issue.

    • This topic was modified 2 years, 7 months ago by sanderrrrr.

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

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Support Kaushik S. a11n

    (@kaushiksomaiya)

    Hi there @sanderrrrr

    Thank you for contacting us!

    I understand you are getting CLS and missing image dimensions issue on Google PageSpeed Insights.

    I tested a product from my test site on Google PageSpeed tool but did not get any CLS of missing image dimensions warning. I am using the Storefront theme.

    As I see, the thumbnails on your product gallery are being controlled by JS Composer plugin:

    You could reach out to JS Composer plugin support to ask them if there is a way to use WooCommerce’s default gallery slider.

    I hope this helps! ??

    Thread Starter sanderrrrr

    (@sanderrrrr)

    Hello Kaushik,

    thank you for your quick response.
    Could you show me the demo you are using?

    I have looked at https://themes.woocommerce.com/storefront/product-category/clothing/ but the problem only occurs when there are multiple images (thumbnails). When the product only has a single image the issue does not occur and will also not show up in Google PageSpeed. Do you have a demo with multiple images?

    Plugin Support Kaushik S. a11n

    (@kaushiksomaiya)

    Hi @sanderrrrr

    Yes, that is correct. Somehow the gallery images in your product are missing the image dimensions.

    Here’s a demo link to a product having gallery: https://themes.woocommerce.com/storefront/product/woo-logo-2/

    Upon testing it, you’ll see there are no CLS or missing dimensions warnings.

    I hope this helps! ??

    Thread Starter sanderrrrr

    (@sanderrrrr)

    Hi Kaushik,

    interesting enough that demo page does not seem to work for me.
    When I click the second thumbnail, it does not show the image.
    See: https://snipboard.io/D4qKlV.jpg

    So I could see if there is CLS or image dimensions, but the image is currently not working which might be an even bigger issue.
    Are you experiencing the same issue?

    This is in Chrome Version 104.0.5112.79
    Also tested in anonymous browser and Microsoft Edge.
    Same issue.

    Plugin Support Chris Moreira – a11n

    (@chrism245)

    Hello!

    It will be great if you could share your current System Status Report. You can get it by navigating to the WooCommerce / Status section of your site. Once there, click on the Get system report button and then copy it by clicking on the Copy for support button. Then paste it here in a comment.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Image dimensions on photo gallery’ is closed to new replies.