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

Home Forums Support Want to add a data-src tag to hero div

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #911668
    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?

    #912295
    Tom
    Lead Developer
    Lead Developer

    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 🙂

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.