How can I make the hidden image work with lazy load?

Lazy Load plugins only load images that are visible to the user. This means that hidden images aren't loaded. However, Tasty Pins can work with some Lazy Load plugins by adding a small code snippet to your theme functions.php  file or using a popular code snippets plugin like WPCode.

Jetpack Lazy Load

Tasty Pins can work with the Jetpack Lazy Load feature. To force hidden images to load, add the following snippet to your theme functions.php  file:

/**
 * Add the skip-lazy class to Tasty Pins hidden images to 
 * prevent lazy load by Jetpack.
 */
add_filter( 'tasty_pins_hidden_image_html', function( $html ){
	$html = str_replace( '<img ', '<img class="skip-lazy" ', $html );
	return $html;
});

Lazy Load by WP Rocket

Tasty Pins can work with the Lazy Load by WP Rocket plugin. To force hidden images to load, add the following snippet to your theme functions.php  file:

/**
 * Add a custom attribute to hidden image output.
 */
add_filter( 'tasty_pins_hidden_image_html', function( $html ){
	$html = str_replace( '<img ', '<img data-no-lazy="1" ', $html );
	return $html;
});

WPMU Dev Smush

Tasty Pins can work with the WPMU Dev Smush Lazy Load feature. To force hidden images to load, add the Tasty Pins hidden image class to the WPMU settings, one class per line.

.tasty-pins-hidden-image

A3 Lazy Load

Tasty Pins can work with the A3 Lazy Load feature. To force hidden images to load, add the following snippet to your theme functions.php  file:

/**
 * Add the a3-notlazy class to Tasty Pins hidden images to 
 * prevent lazy load from the A3 plugin.
 */
add_filter( 'tasty_pins_hidden_image_html', function( $html ){
	$html = str_replace( '<img ', '<img class="a3-notlazy" ', $html );
	return $html;
});