[Support request] Want to add a data-src tag to hero div

[madmanweb]

Hello.

I have a hero banner with a background image that’s around 300K. I want to optimise this using a placeholder low-res image and replace it with the full image with Javascript after the page loads. I’m planning to use the method outlined here: https://medium.com/front-end-weekly/how-to-optimize-image-loading-on-your-website-855020fb41ae

But that requires an attribute of data-src for the hero DIV. How do I add that in GP?

[Tom]

Hi there,

Give this a shot:

add_filter( 'generate_page_hero_output', function( $output, $options ) {
    return sprintf(
        '<div class="%1$s" data-src="/images/background.jpg">
            <div class="%2$s">
                %3$s
            </div>
        </div>',
        trim( $options['container_classes'] ),
        trim( $options['inner_container_classes'] ),
        $options['content']
    );
}, 10, 2 );

You’ll of course need to update the path to the background image in the data-src attribute.

Let me know if you need more info 🙂

[Author]

Posts