Stopped working for style background-image

  • Resolved Raheel

    (@raheelayub)


    6 years, 8 months ago

    Hi there,

    I need some quick help. I’m using ACF. Before I had 3 fields to add images as div background tag and show / hide them via CSS breakpoints but now since I’ve added few more images I’ve noticed plugin stopped working. I’ve added lazyload class name before it was working but now its only showing lazyloaded for all of the elements.

    Interesting thing is: I undone my code in .php file still its not working. The only change other than this was… I renamed field names and added breakpoint number at the end of each field for an example: mobile_banner_320, mobile_banner_425 I’ve also changed their class names accordingly for an example: class=”lazyload banner mobile_banner320″ AND class=”lazyload banner mobile_banner425″

    Note: CSS is working fine for all breakpoints I’ve already show hide all those banners in CSS, its just lazyload thing not working.

    What am I missing? ??

    Thanks,
    Raheel

    • This topic was modified 6 years, 8 months ago by Raheel.
Viewing 7 replies - 1 through 7 (of 7 total)
  • Thread Starter Raheel

    (@raheelayub)

    By the way, this is the code inside .php file:

    <div class="lazyload banner mobile_banner320" data-bg="<?php the_field('mobile_banner_320'); ?>"></div>

<div class="lazyload banner mobile_banner425" data-bg="<?php the_field('mobile_banner_425'); ?>"></div>

<div class="lazyload banner mobile_banner600" data-bg="<?php the_field('mobile_banner_600'); ?>"></div>

<div class="lazyload banner tablet_banner768" data-bg="<?php the_field('mobile_banner_768'); ?>"></div>

<div class="lazyload banner desktop_banner992" data-bg="<?php the_field('tablet_banner_992'); ?>"></div>
    • This reply was modified 6 years, 8 months ago by Raheel.
    Plugin Author Florian Brinkmann

    (@florianbrinkmann)

    Hey,

    could you post a link to the site so I can take a look at the problem?

    Thanks,
    Florian

    Thread Starter Raheel

    (@raheelayub)

    Hi Florian,

    Its on localhost right now. I’ll try to setup staging or something to show you the outcome. But meanwhile if you can give an idea what it could be the reason behind unexpectedly stopped working would be appreciated.

    I mean what could be the scenarios when class “lazyloaded” is presented on all of the elements?

    Thanks,
    Raheel

    • This reply was modified 6 years, 8 months ago by Raheel.
    Thread Starter Raheel

    (@raheelayub)

    Hey, I think that I’ve found the fix, its about ACF field names which were similar (as shown above). I’m still investigating on this. Will comeback tomorrow and post my final findings.

    Cheers! ??

    Plugin Author Florian Brinkmann

    (@florianbrinkmann)

    Hi Raheel,

    great to hear that ?? If the ?issue“ is, that all images load directly, maybe the reason is that those elements are in the viewport or near the viewport on load. If the class is switched to lazyloaded and the image is displayed, that should mean that the script itself is working fine.

    Best,
    Florian

    Thread Starter Raheel

    (@raheelayub)

    Hi Florian,

    Thank you for your support! ??

    I was able to fix that error, as I mentioned before I had doubt on similar class names + Field IDs /names in ACF as well. So I changed them to totally different then everything starts working. Its weird but it does worked for me. ??

    classnames:
    mobile_banner320
    mobile_banner425
    mobile_banner600

    Changed to something like:
    mobile-banner
    medium
    medium-large

    Thanks,
    Raheel

    Plugin Author Florian Brinkmann

    (@florianbrinkmann)

    Hi Raheel,

    indeed, that sounds really weird ?? But the most important thing is that it is working again ??

    I will mark the issue as resolved.

    Best,
    Florian

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Stopped working for style background-image’ is closed to new replies.