Home › Forums › WoodMart support forum › Remove lazy loading from a picture

Remove lazy loading from a picture

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • July 5, 2022 at 9:49 pm #388908

    juliette
    Participant

    Hello support team,

    I would like to remove lazy loading from a specific image. I tried the following custom css but it didn’t work:

    .attachment-thumbnail.size-thumbnail.wd-lazy-load.wd-lazy-fade {
		loading: eager;
}

    The custom selector is correct, but the loadingpart appeared in red, so it’s probably not accepted as is…

    Could you please help me correct this?

    Many thanks

    July 6, 2022 at 10:59 am #389026

    Luke Nielsen
    Keymaster

    Hello,

    Sorry, but we don’t have such an option that can disable lazy loading for a specific image. You can enable it globally or for a specific element via page builder.

    If you’d like to contact us, we are here for whatever questions you may have.

    Kind Regards

    July 6, 2022 at 12:21 pm #389067

    juliette
    Participant

    Hello Luke,

    Okay I understand.
    Just thinking about a potential solution: in lazy loading settings, we can define a loading offset. Is there a way to change the offset value for one image maybe?

    Otherwise I’ll think of something else to make this image appear properly.

    Thank you

    July 6, 2022 at 2:45 pm #389107

    Luke Nielsen
    Keymaster

    Hello,

    Unfortunately, there is no way to change the offset value for one image.

    Please, describe your issue with the image so we will try to help you with it.

    Kind Regards

    July 6, 2022 at 3:12 pm #389119

    juliette
    Participant

    Hello Luke,

    Thank you. My issue is the following.

    I have installed a plugin to add gift wraps to orders. On the cart page, there is a button to add the gift wrap that opens a popup to set it. In this popup, there is a picture of the gift wrap. However the image doesn’t load, I think because of lazy loading. I have to scroll down to force it to appear.
    Do you think of something that could help display this image correctly?

    I added relevant links, screenshots and admin access below.
    Thank you

    Attachments:
    You must be logged in to view attached files.
    July 7, 2022 at 10:21 am #389300

    Luke Nielsen
    Keymaster

    Hello,

    You should contact plugin support so that they would add compatibility with our theme when opening their popup.

    The below code causes pictures to load.

    $(document).trigger('wood-images-loaded');

    Kind Regards

    July 7, 2022 at 12:45 pm #389351

    juliette
    Participant

    All right I will.

    Thank you Luke!

    July 7, 2022 at 2:54 pm #389398

    Luke Nielsen
    Keymaster

    Hello,

    Let me know when they sorted it out.

    Have a good day!

    Kind Regards

    July 13, 2022 at 11:10 am #390700

    juliette
    Participant

    Hello Luke,

    The plugin support replied to my request. Unfortunately they don’t want to add JavaScript just to support one theme.

    So I am looking for another solution. I am trying to include the image in a section before the plugin so that it is already loaded when the plugin appears. I set this section as hidden on all devices in Responsiveness settings so that it loads but doesn’t show.

    Unfortunately my tries haven’t been conclusive:
    – I tried to create a custom cart page with Layout builder but it erases my current customizations (free shipping bar removed as well as the plugin we are talking about).
    – I also tried to include it in the megamenu of my header but it didn’t work either. Anyway, it would not have worked for mobile since this megamenu is not in the mobile menu.

    Would there be a way to add custom css to include the picture at the top of the cart page and hide it from all devices?
    Here is the url of the picture (size 150x150px): https://jubilefrance.com/wp-content/uploads/2022/06/pochette-cadeau-jubile.jpg

    Thank you !

    July 13, 2022 at 2:41 pm #390795

    Luke Nielsen
    Keymaster

    Hello,

    I suggest you try the below code that shows an image by clicking on the “Ajouter une pochette cadeau ?” button.

    .woocommerce-cart .giftwrap_products .giftwrap_details:after {
    content: '';
    display: block;
    background-image: url(https://jubilefrance.com/wp-content/uploads/2022/06/pochette-cadeau-jubile.jpg);
    height: 160px;
    width: 160px;
    background-repeat: no-repeat;
    background-size: cover;
}

    After that, you can remove the image that comes from the plugin.

    Result: https://monosnap.com/file/8z3HorQYfz08zEBRBjd9dDvJZvMWch

    Kind Regards

    July 14, 2022 at 9:15 pm #391154

    juliette
    Participant

    Hello Luke,

    Thank you very much for this solution, it works very well now.

    And thank you for going the extra mile on this issue, it is much appreciated 🙂

    July 15, 2022 at 9:43 am #391235

    Luke Nielsen
    Keymaster

    Hello,

    I’m glad we managed to sort this out.

    Our customers are incredibly important to us here and your satisfaction remains our priority at all times and we’re excited to serve awesome customers like you in any way we can.

    Thanks for your time and have a great day.

    Kind Regards

  • Author
    Posts

Tagged: 

Viewing 12 posts - 1 through 12 (of 12 total)

The topic ‘Remove lazy loading from a picture’ is closed to new replies.