lazy load background images – Genesis theme

  • I am using a Genesis child theme, and I would like to lazy load background images, specifically for custom widgetized areas, but I’m having trouble understanding exactly how to do that.

    I have read that I need to enable “Lazy Load background images”
    and also add the attribute “data-bg” with a value of path to the image to elements with a background image.

    However, I’m not sure exactly where to add the attribute and url for my custom widgetized areas.

    These custom widgetized areas have been added via my functions.php file, for example:

    // Our Process page: After Header Widget Area -jlr
genesis_register_sidebar( array(
    'id' => 'custom-widget-process',
    'name' => __( 'Custom Top Widget - Process', 'agency' ),
    'description' => __( 'Custom Top Widget - Our Process page', 'agency' ),
) );

add_action( 'genesis_after_header', 'process_page_widget' );
function process_page_widget() {
    if (is_page('our-process')) {
    genesis_widget_area( 'custom-widget-process', array(
    'before' => '<div class="custom-widget widget-area" id="top-section"><div class="wrap">',
    'after'  => '</div></div>',
    ) );
    }
}

    The background image is in my child theme’s images folder, and I have styled the custom widget to use the background image via the child theme style.css:

    body.ourprocess-page div#top-section {background: url(images/widget-bg3.jpg) 50% no-repeat;}

    I tried adding data-bg=”[my absolute path to bg image]” to the div in my functions.php file and then removing the background image from my stylesheet but that did not work – no bg image was loaded.

    How can I get the bg image to lazy load using genesis?

    Thanks in advance.

    • This topic was modified 8 years, 2 months ago by MissKitty9470. Reason: clarifying the post
Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author dbhynds

    (@dbhynds)

    I would think that this is what you would want to do:

    'before' => '<div class="custom-widget widget-area" data-bg="[absolute path]" id="top-section"><div class="wrap">',

    Is that what you had? If so, make sure that jquery.lazyloadxt.bg.js is being included on the page (when you check the box in settings. If that doesn’t work, let me know.

    Plugin Author dbhynds

    (@dbhynds)

    Also, if that’s not working, can you post the markup that’s being output on the page when you view source?

    Thread Starter MissKitty9470

    (@misskitty9470)

    Hi dbhynds and my apologies for the delay.
    That did not work. I end up with no background image, just a blank div.

    This is what I’m getting in the view source:

    <div class="custom-widget widget-area lazy-hidden" id="top-section" style="background-image: url(https://gmi2.dev.onpressidium.com/our-process/[absolute%20path]);"><div class="wrap"><section id="black-studio-tinymce-3" class="widget widget_black_studio_tinymce"><div class="widget-wrap"><h4 class="widget-title widgettitle">Come In. Be Inspired.</h4>
<div class="textwidget"><p>Get to Know Us</p>
</div></div></section>
</div></div>
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘lazy load background images – Genesis theme’ is closed to new replies.