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
Is it still the case that lazy load in wp rocket does not work with Portfolio Post Pro?
Hi Samuel. We do not have a subscription to WP Rocket so I can’t say whether lazy load is still an issue or not. Regardless, the method above should solve it.
Hi hope all is well. We are reading this blog post over a year later because we are trying to troubleshoot what we think is a conflict/issue between WP Rocket and Divi Filtergrid. We are not experts in code but are able to copy/paste a code snippet into a .php file; however, we are not sure if any of the fixes above work with filtergrid or if there is some other issue at works.
The issue we have WP Rocket and Filtergrid is that the Cache Filter and Pagination do not bring forth the content when they are clicked. Instead the ajax wheel stops spinning and nothing displays. Really nice and helpful blog post that’s easy to follow and would’ve been an amazing find if we were Owl Carousel or Portfolio Posts Pro users.
Hello. This tutorial is related to issues with the images not displaying when using WP Rocket, not the AJAX filter and pagination. I see you submitted a support ticket and have responded to that. Thanks!