Having images go missing in your Blog Module when the JetPack plugin is active can be frustrating and affect your site's visual appeal. This issue often arises due to conflicts between JetPack's image optimization features and your site's settings.
In this article, we will guide you through the steps to resolve missing images in the Blog Module when using JetPack.
Cause of the issue
This is happening in most cases because the JetPack plugin has the LazyLoad Option active.
The LazyLoad script will only run when the page is loaded. However, since the Blog Module's pagination uses AJAX requests to load posts on pages 2, 3, etc. (without refreshing the page), the LazyLoad script will not run, preventing the images of the posts from pages 2, 3, and 4, etc. from showing.
Example of this unwanted behavior:
Fix the missing images using a child theme
Open the functions.php file inside your child theme
Add the following PHP code after the existing code:
function dt_lazyload_exclude() {
if( ! empty( $_SERVER[ 'HTTP_X_REQUESTED_WITH' ] ) && strtolower( $_SERVER[ 'HTTP_X_REQUESTED_WITH' ]) == 'xmlhttprequest' ){
return false;
}
return true;
}
add_filter( 'lazyload_is_enabled', 'dt_lazyload_exclude', 15 );
Fix the missing images without using a child theme
Go to WordPress Dashboard → Plugins → Add New Plugin
Install and Activate the Code Snippets plugin
Create a new PHP snippets
Add the following PHP code:
function dt_lazyload_exclude() {
if( ! empty( $_SERVER[ 'HTTP_X_REQUESTED_WITH' ] ) && strtolower( $_SERVER[ 'HTTP_X_REQUESTED_WITH' ]) == 'xmlhttprequest' ){
return false;
}
return true;
}
add_filter( 'lazyload_is_enabled', 'dt_lazyload_exclude', 15 );
The result, regardless of the method used, can be seen in the recording below:
