Skip to content

Commit

Permalink
fix: lazyload placeholder replacement affecting non-src urls, improvi…
Browse files Browse the repository at this point in the history 
…ng compatibility with Woocommerce
  • Loading branch information
@selul
selul committed Mar 15, 2019
1 parent 324effd commit 7e13a32
Show file tree
Hide file tree
Showing 3 changed files with 38 additions and 20 deletions.
24 changes: 13 additions & 11 deletions inc/lazyload_replacer.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@ function () {
return 1;
}
);
add_filter( 'optml_tag_replace', array( $this, 'lazyload_tag_replace' ), 2, 5 );
add_filter( 'optml_tag_replace', array( $this, 'lazyload_tag_replace' ), 2, 6 );

}

Expand All @@ -106,12 +106,13 @@ function () {
* @param string $new_url The optimized URL.
* @param array $optml_args Options passed for URL optimization.
* @param bool $is_slashed If the url needs slashes.
* @param string $full_tag Full tag, wrapper included.
*
* @return string
*/
public function lazyload_tag_replace( $new_tag, $original_url, $new_url, $optml_args, $is_slashed = false ) {
public function lazyload_tag_replace( $new_tag, $original_url, $new_url, $optml_args, $is_slashed = false, $full_tag = '' ) {

if ( ! $this->can_lazyload_for( $original_url, $new_tag ) ) {
if ( ! $this->can_lazyload_for( $original_url, $full_tag ) ) {
return Optml_Tag_Replacer::instance()->regular_tag_replace( $new_tag, $original_url, $new_url, $optml_args, $is_slashed );
}
$optml_args['quality'] = 'eco';
Expand All @@ -120,7 +121,7 @@ public function lazyload_tag_replace( $new_tag, $original_url, $new_url, $optml_
$low_url = $is_slashed ? addcslashes( $low_url, '/' ) : $low_url;
$opt_format = '';

if ( $this->should_add_data_tag( $new_tag ) ) {
if ( $this->should_add_data_tag( $full_tag ) ) {
$opt_format = ' data-opt-src="%s" ';
$opt_format = $is_slashed ? addslashes( $opt_format ) : $opt_format;
}
Expand All @@ -134,20 +135,21 @@ public function lazyload_tag_replace( $new_tag, $original_url, $new_url, $optml_
$new_url,
$new_tag
);
$new_tag = str_replace(
$new_tag = preg_replace(
[
$original_url,
' src=',
'srcset=', // Not ideal to disable srcset, we should aim to remove the srcset completely from code.
'/( src(?>=|"|\'|\s|\\\\)*)' . preg_quote( $original_url, '/' ) . '/m',
'/ src=/m',
],
[
$low_url,
"$1$low_url",
$opt_src . ' src=',
'old-srcset=',
],
$new_tag
$new_tag,
1
);

$new_tag = str_replace( 'srcset=', 'old-srcset=', $new_tag );

return $new_tag . '<noscript>' . $no_script_tag . '</noscript>';
}

Expand Down
15 changes: 8 additions & 7 deletions inc/tag_replacer.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ public function init() {
return;
}

add_filter( 'optml_tag_replace', array( $this, 'regular_tag_replace' ), 1, 5 );
add_filter( 'optml_tag_replace', array( $this, 'regular_tag_replace' ), 1, 6 );
add_filter( 'image_downsize', array( $this, 'filter_image_downsize' ), PHP_INT_MAX, 3 );
add_filter( 'wp_calculate_image_srcset', array( $this, 'filter_srcset_attr' ), PHP_INT_MAX, 5 );
add_filter( 'wp_calculate_image_sizes', array( $this, 'filter_sizes_attr' ), 1, 2 );
Expand All @@ -68,7 +68,7 @@ public function process_image_tags( $content, $images = array() ) {

foreach ( $images[0] as $index => $tag ) {
$width = $height = false;
$new_tag = $tag;
$image_tag = $images['img_tag'][ $index ];

$is_slashed = strpos( $images['img_url'][ $index ], '\/' ) !== false;

Expand Down Expand Up @@ -112,7 +112,7 @@ public function process_image_tags( $content, $images = array() ) {
continue; // @codeCoverageIgnore
}

$new_tag = str_replace(
$image_tag = str_replace(
[
'width="' . $width . '"',
'width=\"' . $width . '\"',
Expand All @@ -125,11 +125,11 @@ public function process_image_tags( $content, $images = array() ) {
'height="' . $optml_args['height'] . '"',
'height=\"' . $optml_args['height'] . '\"',
],
$new_tag
$image_tag
);
$new_tag = apply_filters( 'optml_tag_replace', $new_tag, $images['img_url'][ $index ], $new_url, $optml_args, $is_slashed );
$image_tag = apply_filters( 'optml_tag_replace', $image_tag, $images['img_url'][ $index ], $new_url, $optml_args, $is_slashed, $tag );

$content = str_replace( $tag, $new_tag, $content );
$content = str_replace( $images['img_tag'][ $index ], $image_tag, $content );
}

return $content;
Expand Down Expand Up @@ -176,10 +176,11 @@ private function parse_dimensions_from_tag( $tag, $image_sizes, $args = array()
* @param string $new_url The optimized URL.
* @param array $optml_args Options passed for URL optimization.
* @param bool $is_slashed Url needs to slashed.
* @param string $full_tag Full tag, wrapper included.
*
* @return string
*/
public function regular_tag_replace( $new_tag, $original_url, $new_url, $optml_args, $is_slashed = false ) {
public function regular_tag_replace( $new_tag, $original_url, $new_url, $optml_args, $is_slashed = false, $full_tag = '' ) {

return str_replace(
$original_url,
Expand Down
19 changes: 17 additions & 2 deletions tests/test-lazyload.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,23 +55,38 @@ public function test_lazy_load() {

}

public function test_lazyload_json_data() {
public function test_lazyload_json_data_valid() {

$some_html_content = [
'html' => '<a href="http://example.org/blog/how-to-monetize-a-blog/"><img class="alignnone wp-image-36442 size-full" src="http://example.org/wp-content/uploads/2018/06/start-a-blog-1-5.png" alt="How to monetize a blog" width="490" height="256"></a> http://example.org/wp-content/uploads/2018/06/start-a-blog-1-5.png '
];

$content = wp_json_encode( $some_html_content );
$replaced_content = Optml_Manager::instance()->replace_content( $content );

$replaced_content2 = Optml_Manager::instance()->replace_content( $replaced_content );

$this->assertEquals( $replaced_content, $replaced_content2 );

$this->assertArrayHasKey( 'html', json_decode( $replaced_content2, true ) );

$this->assertEquals( 1, substr_count( $replaced_content, 'q:eco' ) );
$this->assertEquals( 4, substr_count( $replaced_content2, '/http:\/\/' ) );
}


public function test_lazyload_tag_sanity_check(){
$text = ' <a href="http://example.org/wp-content/uploads/2018/06/start-a-blog-1-5.png"><img class="alignnone wp-image-36442 size-full" src="http://example.org/wp-content/uploads/2018/06/start-a-blog-1-5.png" srcset="testsrcset" data-srcset="another" data-plugin-src="http://example.org/wp-content/uploads/2018/06/start-a-blog-1-5.png" alt="How to monetize a blog" width="490" height="256"></a>';

$replaced_content = Optml_Manager::instance()->replace_content( $text );

$this->assertContains( '</noscript></a>', $replaced_content, 'Noscript tag should be inside the wrapper tag and after image tag' );
$this->assertNotContains( '"http://example.org', $replaced_content );
$this->assertEquals( 1, substr_count( $replaced_content, 'q:eco' ) );
$this->assertEquals( 2, substr_count( $replaced_content, 'old-srcset' ) );


}
public function test_replacement_with_jetpack_photon() {
$content = '<div class="before-footer">
<div class="codeinwp-container">
Expand Down Expand Up @@ -165,9 +180,9 @@ public function test_lazyload_json_data_disabled() {
$some_html_content = [
'html' => '<a href="http://example.org/blog/how-to-monetize-a-blog/"><img class="alignnone wp-image-36442 size-full" src="http://example.org/wp-content/uploads/2018/06/start-a-blog-1-5.png" alt="How to monetize a blog" width="490" height="256"></a> http://example.org/wp-content/uploads/2018/06/start-a-blog-1-5.png '
];

$content = wp_json_encode( $some_html_content );
$replaced_content = Optml_Manager::instance()->replace_content( $content );

$replaced_content2 = Optml_Manager::instance()->replace_content( $replaced_content );

$this->assertEquals( $replaced_content, $replaced_content2 );
Expand Down

0 comments on commit 7e13a32

Please sign in to comment.