Skip to content
Permalink
Browse files

fix: image replacement on header tags which uses relative urls

  • Loading branch information...
selul committed Mar 21, 2019
1 parent a107ef6 commit 2caae7fbaf35a5348949c3c407a8f625817e8496
Showing with 47 additions and 24 deletions.
  1. +17 −20 inc/manager.php
  2. +8 −2 inc/tag_replacer.php
  3. +21 −1 tests/test-lazyload.php
  4. +1 −1 tests/test-replacer.php
@@ -377,20 +377,31 @@ protected function should_ignore_image_tags() {
public static function parse_images_from_html( $content ) {
$images = array();
$content = self::strip_header_from_content( $content );
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 ) ) {
$header_start = null;
$header_end = null;
if ( preg_match( '/<header.*<\/header>/ismU', $content, $matches, PREG_OFFSET_CAPTURE ) === 1 ) {
$header_start = $matches[0][1];
$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 ) ) {
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;
}
if ( $key !== 'img_url' ) {
continue;
}
foreach ( $unused as $url_key => $url_value ) {
$images[ $key ][ $url_key ] = rtrim( $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;
}
}
}
@@ -400,20 +411,6 @@ public static function parse_images_from_html( $content ) {
return array();
}
/**
* Matches the header tag and removes it.
*
* @param string $content Some HTML.
*
* @return string The HTML without the <header/> tag
*/
public static function strip_header_from_content( $content ) {
if ( preg_match( '/<header.*<\/header>/ismU', $content, $matches ) !== 1 ) {
return $content;
}
return str_replace( $matches[0], '', $content );
}
/**
* Process url replacement from raw html strings.
@@ -75,7 +75,7 @@ public function process_image_tags( $content, $images = array() ) {
$src = $tmp = $is_slashed ? stripslashes( $images['img_url'][ $index ] ) : $images['img_url'][ $index ];
if ( strpos( $src, $this->upload_resource['content_path'] ) === 0 ) {
$src = $tmp = untrailingslashit( $this->upload_resource['content_host'] ) . $src;
$src = $tmp = untrailingslashit( $this->upload_resource['content_host'] ) . $src;
$new_src = $is_slashed ? addcslashes( $src, '/' ) : $src;
$image_tag = str_replace( $images['img_url'][ $index ], $new_src, $image_tag );
@@ -133,7 +133,13 @@ public function process_image_tags( $content, $images = array() ) {
],
$image_tag
);
$image_tag = apply_filters( 'optml_tag_replace', $image_tag, $images['img_url'][ $index ], $new_url, $optml_args, $is_slashed, $tag );
// If the image is in header, 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 {
$image_tag = apply_filters( 'optml_tag_replace', $image_tag, $images['img_url'][ $index ], $new_url, $optml_args, $is_slashed, $tag );
}
$content = str_replace( $images['img_tag'][ $index ], $image_tag, $content );
}
@@ -109,6 +109,25 @@ public function test_lazy_dont_lazy_load_headers() {
$this->assertEquals( 1, substr_count( $replaced_content, 'data-opt-src' ) );
}
public function test_lazy_dont_lazy_load_headers_relative() {
$content = '<div></div><header id="header">
<div id="wp-custom-header" class="wp-custom-header">
<img src="/wp-content/themes/twentyseventeen/assets/images/header2.jpg" width="2000" height="1200" alt="Test" />
</div>
</header>
<div id="wp-custom-header" class="wp-custom-header">
<img src="http://example.org/wp-content/themes/twentyseventeen/assets/images/header.jpg" width="2000" height="1200" alt="Test" />
</div>';
$replaced_content = Optml_Manager::instance()->process_images_from_content( $content );
$this->assertContains( 'data-opt-src', $replaced_content );
$this->assertContains( 'i.optimole.com', $replaced_content );
$this->assertContains( 'q:eco', $replaced_content );
$this->assertContains( 'http://example.org', $replaced_content );
$this->assertNotContains( 'src="/wp-content', $replaced_content );
$this->assertEquals( 1, substr_count( $replaced_content, 'data-opt-src' ) );
}
public function test_lazy_load_just_first_header() {
$replaced_content = Optml_Manager::instance()->process_images_from_content( self::HTML_TAGS_HEADER_MULTIPLE );
@@ -140,7 +159,8 @@ public function test_lazy_load_preserve_image_size() {
}
public function test_check_with_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" /></noscript> ';
$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" /></noscript> ';
$replaced_content = Optml_Manager::instance()->replace_content( $content );
@@ -83,7 +83,7 @@ public function test_image_tags() {
$found_images = Optml_Manager::parse_images_from_html( self::IMG_TAGS );
$this->assertCount( 4, $found_images );
$this->assertCount( 5, $found_images );
$this->assertCount( 1, $found_images['img_url'] );
$replaced_content = Optml_Manager::instance()->process_images_from_content( self::IMG_TAGS );

0 comments on commit 2caae7f

Please sign in to comment.
You can’t perform that action at this time.