How to use JetPack Lazy Load and Envira’s Lazy Load together

Would you like to keep using JetPack’s new lazy load feature for non-gallery images but still use Envira’s lazy load for the gallery images? This tutorial will walk you through the steps needed to use both JetPack and Envira lazy load!

• Creating the Plugin
• Activate the Plugin
• FAQs
  • Can I just disable JetPack’s Lazy Loading?
  • Will this work for Envira Lite too?

Creating the Plugin

To allow the JetPack filter to work on all images except Envira images, just add the following code to a new file at /wp-content/plugins/envira-jp-lazy-load-filter.php:

<?php
/*
* Plugin Name: Envira Gallery - JetPack Lazy Load Filter
* Plugin URI: https://enviragallery.com
* Version: 1.1.0
* Author: Envira Gallery Team
* Author URI: https://enviragallery.com
* Description: Allowing JetPack lazy load and Envira lazy load to work in harmony
*/
add_filter('envira_gallery_indexable_image_css', 'jp_envira_gallery_indexable_image_css', 10, 2 );
function jp_envira_gallery_indexable_image_css( $css, $id ) {
    $css .= 'skip-lazy';
    return $css;
}

add_filter('jetpack_lazy_images_blacklisted_classes', 'envira_jetpack_lazy_images_blacklisted_classes', 999, 1 );
function envira_jetpack_lazy_images_blacklisted_classes( $blacklisted_classes ) {
    $blacklisted_classes[] = 'envira-gallery-image';
    $blacklisted_classes[] = 'skip-lazy'; 
    return $blacklisted_classes;
}

/* trick Jetpack into thinking there's already a lazy load src for <noscript> images, so they don't appear */
add_filter('envira_gallery_output_noscript', 'jp_envira_gallery_output_noscript', 999, 2 );
function jp_envira_gallery_output_noscript( $html, $gallery_data ) {
    $html = str_replace('<img ', '<img data-lazy-src="" ', $html);
    return $html;
}

If you’re unsure how to create a plugin file, follow these steps below:

1. Open a text file and make sure that it is a plain text document. You can use a plain text editor like Notepad or a code editor of your choice.
2. Next, copy and paste the code shown below into the file and save the file as envira-jp-lazy-load-filter.php
3. Once you’ve saved the file you can easily upload this directly to your /plugins directory on your server using FTP or you can right-click on the text document and zip (or compress).
4. Finally, log in to your WordPress dashboard and go to Plugins » Add New » Upload Plugin and upload the .zip file you just created in the previous step.

Activate the Plugin

Your next step is to activate the plugin you just uploaded. Simply navigate to the Plugins from within your WordPress dashboard and activate the Envira Gallery – JetPack Lazy Load Filter plugin.

And that’s it! When you activate the plugin, you’ll be able to use both JetPack and Envira’s lazy load options.

If you would like to extend Envira galleries in other ways, check out this tutorial on how to How to Track Views, Shares, and Downloads of Each Gallery Image.

FAQs

Can I just disable JetPack’s Lazy Loading?

A: Certainly! Navigate to JetPack » Settings, under the Performance & speed you’ll have an option to turn the Enable Lazy Loading for images on or off.

Will this work for Envira Lite too?

A: No, currently this is only for the Envira premium licenses. We’ll update this doc when Envira Lite has this filter capability in the near future.