feat: adds exclude by class filter for lazyload mechanism

assets/vue/components/filter-control.vue

@@ -40,6 +40,17 @@
                             </div>
                         </div>
                     </div>
+                    <div class="list-item exclusion-filter"
+                         v-for="(item, index) in filters[this.FILTER_TYPES.CLASS]">
+                        <div class="control">
+                            <div class="tags is-centered has-addons">
+                                <a class="tag  is-marginless   is-link has-text-left"><i>{{strings.exclude_class_desc}}</i>
+                                    <strong>{{index}}</strong></a>
+                                <a class="tag  is-marginless  is-delete"
+                                   @click="removeRule(FILTER_TYPES.CLASS,index)"></a>
+                            </div>
+                        </div>
+                    </div>
                 </div>
             </div>
 
@@ -52,6 +63,7 @@
                                 <option :value="FILTER_TYPES.FILENAME">{{strings.filter_filename}}</option>
                                 <option :value="FILTER_TYPES.EXT">{{strings.filter_ext}}</option>
                                 <option :value="FILTER_TYPES.URL">{{strings.filter_url}}</option>
+                                <option v-if="type === 'lazyload'" :value="FILTER_TYPES.CLASS">{{strings.filter_class}}</option>
                               </select>
                             </span>
                 </p>
@@ -102,7 +114,8 @@
 				FILTER_TYPES: {
 					EXT: 'extension',
 					URL: 'page_url',
-					FILENAME: 'filename'
+					FILENAME: 'filename',
+					CLASS: 'class'
 				}
 			}
 		},
@@ -154,6 +167,10 @@
 					this.filter_operator = this.strings.filter_operator_contains;
 				}
 
+				if (event.target.value === this.FILTER_TYPES.CLASS) {
+					this.filter_operator = this.strings.filter_operator_contains;
+				}
+
 				this.selected_filter = event.target.value;
 
 			},

inc/admin.php

@@ -611,13 +611,15 @@ private function get_dashboard_strings() {
 				'filter_filename'                   => __( 'Image filename', 'optimole-wp' ),
 				'filter_url'                        => __( 'Page URL', 'optimole-wp' ),
 				'filter_ext'                        => __( 'Image extension', 'optimole-wp' ),
+				'filter_class'                      => __( 'Image class', 'optimole-wp' ),
 				'exclude_title_optimize'            => __( 'Don\'t optimize images if', 'optimole-wp' ),
 				'exclude_title_lazyload'            => __( 'Don\'t lazyload images if', 'optimole-wp' ),
 				'exclude_filename_desc'             => __( 'Image filename contains', 'optimole-wp' ),
 				'exclude_url_desc'                  => __( 'Page url contains', 'optimole-wp' ),
 				'exclude_ext_desc'                  => __( 'Image extension is', 'optimole-wp' ),
 				'watch_title_lazyload'              => __( 'Lazyload background images for selectors:', 'optimole-wp' ),
 				'watch_desc_lazyload'               => __( 'You can add each CSS selector on a new line or separated by comma(,).', 'optimole-wp' ),
+				'exclude_class_desc'                => __( 'Image tag contains class', 'optimole-wp' ),
 				'hide'                              => __( 'Hide', 'optimole-wp' ),
 				'high_q_title'                      => __( 'High', 'optimole-wp' ),
 				'medium_q_title'                    => __( 'Medium', 'optimole-wp' ),

inc/app_replacer.php

@@ -269,7 +269,17 @@ public function init() {
 		$this->set_properties();
 
 		self::$filters = $this->settings->get_filters();
-
+		add_filter(
+			'optml_possible_lazyload_flags',
+			function( $strings = array() ) {
+				foreach ( self::$filters[ Optml_Settings::FILTER_TYPE_LAZYLOAD ][ Optml_Settings::FILTER_CLASS ] as $rule_flag => $status ) {
+					$strings[] = $rule_flag;
+				}
+				return $strings;
+			},
+			10,
+			2
+		);
 	}
 
 

inc/compatibilities/revslider.php

@@ -22,8 +22,24 @@ function should_load() {
 	 * Register integration details.
 	 */
 	public function register() {
-		add_filter( 'optml_ignore_data_opt_flag', [ $this, 'add_data_ignore' ], 10, 3 );
-		add_filter( 'optml_lazyload_bg_classes', [ $this, 'add_bg_class' ], 10, 1 );
+
+		add_filter( 'optml_possible_lazyload_flags', [ $this, 'add_lazyflag' ], 10, 2 );
+		add_filter( 'optml_ignore_data_opt_flag', [$this, 'add_data_ignore'], 10, 3 );
+		add_filter( 'optml_lazyload_bg_classes', [$this, 'add_bg_class'], 10, 1 );
+	}
+
+	/**
+	 * Add Slider Revolution lazyload flag.
+	 *
+	 * @param array $strings Old strings.
+	 *
+	 * @return array New flags.
+	 */
+	function add_lazyflag( $strings = array() ) {
+
+		$strings[] = 'rev-slidebg';
+
+		return $strings;
 	}
 
 	/**

inc/settings.php

@@ -8,6 +8,7 @@ class Optml_Settings {
 	const FILTER_EXT = 'extension';
 	const FILTER_URL = 'page_url';
 	const FILTER_FILENAME = 'filename';
+	const FILTER_CLASS = 'class';
 	const FILTER_TYPE_LAZYLOAD = 'lazyload';
 	const FILTER_TYPE_OPTIMIZE = 'optimize';
 	/**
@@ -103,6 +104,9 @@ public function get_filters() {
 			if ( ! isset( $filter_rules[ self::FILTER_URL ] ) ) {
 				$filters[ $filter_key ][ self::FILTER_URL ] = [];
 			}
+			if ( ! isset( $filter_rules[ self::FILTER_CLASS ] ) ) {
+				$filters[ $filter_key ][ self::FILTER_CLASS ] = [];
+			}
 		}
 
 		return $filters;

inc/tag_replacer.php

@@ -53,7 +53,6 @@ public function init() {
 		add_filter( 'wp_calculate_image_sizes', array( $this, 'filter_sizes_attr' ), 1, 2 );
 
 	}
-
 	/**
 	 * Called by hook to replace image tags in content.
 	 *
@@ -137,7 +136,6 @@ public function process_image_tags( $content, $images = array() ) {
 
 		$image_sizes = self::image_sizes();
 		$sizes2crop  = self::size_to_crop();
-
 		foreach ( $images[0] as $index => $tag ) {
 			$width     = $height = false;
 			$crop = null;
@@ -221,7 +219,7 @@ public function process_image_tags( $content, $images = array() ) {
 				$image_tag
 			);
 
-			// If the image is in header, we need to do the regular replace.
+			// If the image is in header or has a class excluded from lazyload, we need to do the regular replace.
 			if ( $images['in_header'][ $index ] ) {
 				$image_tag = $this->regular_tag_replace( $image_tag, $images['img_url'][ $index ], $new_url, $optml_args, $is_slashed, $tag );
 			} else {

tests/test-lazyload-class-exclusion.php

@@ -0,0 +1,69 @@
+<?php
+/**
+ * WordPress unit test plugin.
+ *
+ * @package     Optimole-WP
+ * @subpackage  Tests
+ * @copyright   Copyright (c) 2017, ThemeIsle
+ * @license     http://opensource.org/licenses/gpl-2.0.php GNU Public License
+ */
+
+/**
+ * Class Test_Generic.
+ */
+class Test_Lazyload_Class_Exclusion extends WP_UnitTestCase
+{
+
+	public static $sample_attachement;
+
+	public function setUp()
+	{
+		parent::setUp();
+		$settings = new Optml_Settings();
+		$settings->update('service_data', [
+			'cdn_key' => 'test123',
+			'cdn_secret' => '12345',
+			'whitelist' => ['example.com'],
+		]);
+
+		$settings->update('lazyload', 'enabled');
+		$settings->update('filters', array(
+			Optml_Settings::FILTER_TYPE_LAZYLOAD => array (
+			 Optml_Settings::FILTER_CLASS => array (
+				'test' => true,
+				'whatever' => true,
+				'testing' => true,
+			)
+		)));
+		Optml_Url_Replacer::instance()->init();
+		Optml_Tag_Replacer::instance()->init();
+		Optml_Lazyload_Replacer::instance()->init();
+		Optml_Manager::instance()->init();
+
+		self::$sample_attachement = self::factory()->attachment->create_upload_object(OPTML_PATH . 'assets/img/logo.png');
+	}
+
+	public function test_class_exclusions()
+	{
+		$content = '<div>
+						<img class="something another whatever" src="http://example.org/wp-content/uploads/2019/09/Screenshot.png" alt=""/>;    
+						<img class="test" src="http://example.org/wp-content/uploads/2019/09/img.jpg" alt=""/>;      
+						<img class="testing class" src="http://example.org/img.png" alt=""/>;          
+					</div>';
+		$replaced_content = Optml_Manager::instance()->process_images_from_content($content);
+		$this->assertEquals( 3, substr_count( $replaced_content, 'i.optimole.com' ) );
+		$this->assertNotContains('data-opt-src', $replaced_content);
+	}
+	public function test_class_exclusions_does_not_affect_regular_replacement()
+	{
+		$content = '<div>
+						<img class="something another code" src="http://example.org/wp-content/uploads/2019/09/Screenshot.png" alt=""/>; 
+						<img class="whatever_code_test" src="http://example.org/img.jpg" alt=""/>;          
+					</div>';
+		$replaced_content = Optml_Manager::instance()->process_images_from_content($content);
+
+		$this->assertEquals( 4, substr_count( $replaced_content, 'i.optimole.com' ) );
+		$this->assertEquals( 1, substr_count( $replaced_content, 'data-opt-src' ) );
+		$this->assertEquals( 1, substr_count( $replaced_content, '<noscript>' ) );
+	}
+}