fix: ignore lazyload tag on noscript list of images, improve compatib…

…ility with Envira
Codeinwp · Jul 4, 2019 · 74219b1 · 74219b1
1 parent f577723
commit 74219b1
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 4 deletions.
diff --git a/inc/manager.php b/inc/manager.php
@@ -71,9 +71,9 @@ final class Optml_Manager {
 	 *
 	 * @codeCoverageIgnore
 	 * @static
+	 * @return Optml_Manager
 	 * @since  1.0.0
 	 * @access public
-	 * @return Optml_Manager
 	 */
 	public static function instance() {
 		if ( null === self::$instance ) {
@@ -412,22 +412,33 @@ public static function parse_images_from_html( $content ) {
 			$header_end   = $header_start + strlen( $matches[0][0] );
 		}
 
-		if ( preg_match_all( '/(?:<a[^>]+?href=["|\'](?P<link_url>[^\s]+?)["|\'][^>]*?>\s*)?(?P<img_tag>(?:<\s*noscript\s*>\s*)?<img[^>]*?\s+?(?:' . implode( '|', array_merge( [ 'src' ], Optml_Tag_Replacer::possible_src_attributes() ) ) . ')=\\\\?["|\'](?P<img_url>[^\s]+?)["|\'].*?>){1}(?:\s*<\/a>)?/ism', $content, $images, PREG_OFFSET_CAPTURE ) ) {
+		if ( preg_match_all( '/(?:<a[^>]+?href=["|\'](?P<link_url>[^\s]+?)["|\'][^>]*?>\s*)?(?P<img_tag>(?:<noscript\s*>\s*)?<img[^>]*?\s+?(?:' . implode( '|', array_merge( [ 'src' ], Optml_Tag_Replacer::possible_src_attributes() ) ) . ')=\\\\?["|\'](?P<img_url>[^\s]+?)["|\'].*?>){1}(?:<\/noscript\s*>)?(?:\s*<\/a>)?/ism', $content, $images, PREG_OFFSET_CAPTURE ) ) {
 
 			foreach ( $images as $key => $unused ) {
 				// Simplify the output as much as possible, mostly for confirming test results.
 				if ( is_numeric( $key ) && $key > 0 ) {
 					unset( $images[ $key ] );
 					continue;
 				}
+				$is_no_script = false;
 				foreach ( $unused as $url_key => $url_value ) {
 					if ( $key === 'img_url' ) {
 						$images[ $key ][ $url_key ] = rtrim( $url_value[0], '\\' );
 						continue;
 					}
 					$images[ $key ][ $url_key ] = $url_value[0];
+
 					if ( $key === 0 ) {
 						$images['in_header'][ $url_key ] = $header_start !== null ? ( $url_value[1] > $header_start && $url_value[1] < $header_end ) : false;
+
+						// Check if we are in the noscript context.
+						if ( $is_no_script === false ) {
+							$is_no_script = strpos( $images[0][ $url_key ], '<noscript' ) !== false ? true : false;
+						}
+						if ( $is_no_script ) {
+							$images['in_header'][ $url_key ] = true;
+							$is_no_script = strpos( $images[0][ $url_key ], '</noscript' ) !== false ? false : true;
+						}
 					}
 				}
 			}
@@ -491,8 +502,8 @@ public function process_template_redirect_content() {
 	 *
 	 * @codeCoverageIgnore
 	 * @access public
-	 * @since  1.0.0
 	 * @return void
+	 * @since  1.0.0
 	 */
 	public function __clone() {
 		// Cloning instances of the class is forbidden.
@@ -504,8 +515,8 @@ public function __clone() {
 	 *
 	 * @codeCoverageIgnore
 	 * @access public
-	 * @since  1.0.0
 	 * @return void
+	 * @since  1.0.0
 	 */
 	public function __wakeup() {
 		// Unserializing instances of the class is forbidden.

diff --git a/tests/test-lazyload.php b/tests/test-lazyload.php
@@ -184,6 +184,20 @@ public function test_check_with_no_script() {
 		$this->assertEquals( 1, substr_count( $replaced_content, '<noscript>' ) );
 		$this->assertEquals( 2, substr_count( $replaced_content, 'i.optimole.com' ) );
 	}
+	public function test_check_with_multiple_images_in_no_script() {
+		$content = '<img width="1612" height="1116" src="data:image/gif;base64,R0lGODdhAQABAPAAAP///wAAACwAAAAAAQABAEACAkQBADs=" data-lazy-src="http://example.org/wp-content/uploads/2018/11/gradient.png" class="attachment-twentyseventeen-featured-image size-twentyseventeen-featured-image wp-post-image" alt="" data-lazy-sizes="(max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px" />
+					<noscript>
+						<img width="1612" height="1116" src="http://example.org/wp-content/uploads/2018/11/gradient.png" class="attachment-twentyseventeen-featured-image size-twentyseventeen-featured-image wp-post-image" alt="" sizes="(max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px" />
+						<img width="1612" height="1116" src="http://example.org/wp-content/uploads/2018/11/gradient.png" class="attachment-twentyseventeen-featured-image size-twentyseventeen-featured-image wp-post-image" alt="" sizes="(max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px" />
+						<img width="1612" height="1116" src="http://example.org/wp-content/uploads/2018/11/gradient.png" class="attachment-twentyseventeen-featured-image size-twentyseventeen-featured-image wp-post-image" alt="" sizes="(max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px" />
+					</noscript>	';
+
+		$replaced_content = Optml_Manager::instance()->replace_content( $content );
+
+		$this->assertContains( '<noscript>', $replaced_content );
+		$this->assertEquals( 1, substr_count( $replaced_content, '<noscript>' ) );
+		$this->assertEquals( 4, substr_count( $replaced_content, 'i.optimole.com' ) );
+	}
 
 
 	public function test_replacement_with_data_attr() {