Skip to content

Commit

Permalink
fix: image replacement on header tags which uses relative urls
Browse files Browse the repository at this point in the history
  • Loading branch information
@selul
selul committed Mar 21, 2019
1 parent a107ef6 commit 2caae7f
Show file tree
Hide file tree
Showing 4 changed files with 47 additions and 24 deletions.
37 changes: 17 additions & 20 deletions inc/manager.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
}

Expand All @@ -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.
Expand Down
10 changes: 8 additions & 2 deletions inc/tag_replacer.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 );
Expand Down Expand Up @@ -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 );
}
Expand Down
22 changes: 21 additions & 1 deletion tests/test-lazyload.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 );

Expand Down Expand Up @@ -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 );

Expand Down
2 changes: 1 addition & 1 deletion tests/test-replacer.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 );
Expand Down

0 comments on commit 2caae7f

Please sign in to comment.