Lazy load CSS background-image

Hi Michael,

as far as I can see (https://thrivethemes.com/tkb_item/how-to-edit-the-html-of-your-page/), Thrive Architect lets you edit the HTML of your page. Could you post the HTML of the area around one of the post grids (including the markup of the post grid) that comes in that view of Thrive Architect?

Best,
Florian

Hi Michael,

cool, thanks! Two options:

1. Maybe the plugin has filters that would allow to modify the output of the background images directly, so that you can use my plugin for lazy-loading them. To see if that is possible, I would need the plugin files.
2. You can use the noscript extension of lazysizes (https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins/noscript). With that, it should be enough to modify the markup of the surrounding element like this:

<div class="thrv_wrapper thrv_post_grid lazyload" data-noscript="" data-css="tve-u-1672bceea30">
	<noscript>
		<div class="thrive-shortcode-config" style="display: none !important">
			__CONFIG_post_grid__{"display":"grid","grid_layout":"horizontal","columns":"3″,"text_type":"summary","read-more-text":"Read More","image-height":"200″,"font-size":"","text-line-height":"","teaser_layout":{“featured_image":"true","title":"true","text":"true","read_more":"false"},"layout":[“featured_image","title","text","read_more"],"orderby":"date","order":"DESC","recent_days":"0″,"posts_start":"0″,"posts_per_page":"3″,"content_types":[“post"],"filters":{“category":[“Technology"]},"action":"tcb_editor_ajax","custom":"post_grid","nonce":"a102e38edc","exclude":0}__CONFIG_post_grid__
		</div>
	</noscript>
</div>

I added the lazyload class and data-noscript attribute to the div and wrapped its content into a noscript element, like described in the lazysizes documentation.

The problem: the noscript extension is not part of my plugin, so you would need to include that by yourself. I created a small plugin for that, you can find it here: https://cloudup.com/czBlLPzAlCI

Just upload that and the Lazy Loader plugin, enable both and modify the markup of the post grid areas like showed above. That should work 🙂

One word of warning: It is totally possible that adding the noscript element hides those areas in the visual editing view in the backend, and I have no idea if there might be other side-effects.

Hope that helps!
Florian

• This reply was modified 7 years, 6 months ago by Florian Brinkmann.