Limited Time Sale - 10% Discount! Use Code:U5ZBQTEY

WP Rocket is a WordPress caching plugin that has a lazy load feature that is incompatible with the Portfolio Posts Pro, Owl Carousel and Owl Carousel Pro plugins. WP Rocket makes it easy to disable lazy load for the entire site or for a specific page. But they also have a filter that will allow you to disable lazy load for specific images. In this tutorial, we’ll show you how to apply that filter to the Portfolio Posts Pro and Owl Carousel images.

Portfolio Posts Pro

The filter works by targeting a specific image class. All modules in Portfolio Posts Pro use the dp_ppp_post_thumb class. To disable lazy load for these images, you’ll add the following code to your child theme’s functions.php file:

function rocket_lazyload_exclude_class( $attributes ) {
	$attributes[] = 'class="dp_ppp_post_thumb';

	return $attributes;
}
add_filter( 'rocket_lazyload_excluded_attributes', 'rocket_lazyload_exclude_class' );

You’ll notice in the code above, theĀ dp_ppp_post_thumb class is missing a closing double quote. This is intentional. The smart folks at WP Rocket created the filter in a way that allows you to target images with multiple classes. The filter above tells WP Rocket to ignore all images with theĀ dp_ppp_post_thumb class, even if the image has other classes.

Owl Carousel

If you are using the DP Owl Carousel module (available in both the free and pro version of the plugin), the class you need to target is dp_oc_post_thumb. This is the module that loads images from posts. For this module, you’ll add the following code to your child theme’s functions.php file:

function rocket_lazyload_exclude_class( $attributes ) {
	$attributes[] = 'class="dp_oc_post_thumb';

	return $attributes;
}
add_filter( 'rocket_lazyload_excluded_attributes', 'rocket_lazyload_exclude_class' );

If you’re using the DP Owl Image Carousel module (only available in the pro version), you’ll add the following code to your child theme’s functions.php file:

function rocket_lazyload_exclude_class( $attributes ) {
	$attributes[] = 'class="dp_oc_image_thumb';

	return $attributes;
}
add_filter( 'rocket_lazyload_excluded_attributes', 'rocket_lazyload_exclude_class' );

You can read more about this filter and how to disable lazy load for other images in WP Rocket’s documentation page:
https://docs.wp-rocket.me/article/15-disabling-lazy-load-on-specific-images

Pin It on Pinterest

Share This