Archived topic
Want to add a data-src tag to hero div
1 reply · Started by madmanweb on May 26, 2019
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?
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 :)