Skip to content

Commit

Permalink
fix: ignore rescale on GIF and SVG when lazyload is active
Browse files Browse the repository at this point in the history
  • Loading branch information
@selul
selul committed Oct 31, 2019
1 parent 55a5952 commit d4e63b6
Show file tree
Hide file tree
Showing 2 changed files with 59 additions and 17 deletions.
28 changes: 16 additions & 12 deletions inc/lazyload_replacer.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,8 +91,8 @@ public static function get_background_lazyload_selectors() {
$saved_watchers = str_replace( [ "\n", "\r" ], ',', $saved_watchers );
$saved_watchers = explode( ',', $saved_watchers );
$all_watchers = array_merge( $default_watchers, $saved_watchers );
$all_watchers = apply_filters( 'optml_lazyload_bg_selectors', $all_watchers );
$all_watchers = array_filter(
$all_watchers = apply_filters( 'optml_lazyload_bg_selectors', $all_watchers );
$all_watchers = array_filter(
$all_watchers,
function ( $value ) {
return ! empty( $value ) && strlen( $value ) >= 2;
Expand Down Expand Up @@ -177,7 +177,9 @@ public function lazyload_tag_replace( $new_tag, $original_url, $new_url, $optml_
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 );
}
if ( ! self::$is_lazyload_placeholder && ! $this->is_valid_gif( $original_url ) ) {
$should_ignore_rescale = ! $this->is_valid_mimetype_from_url( $original_url, [ 'gif' => true, 'svg' => true ] );

if ( ! self::$is_lazyload_placeholder && ! $should_ignore_rescale ) {
$optml_args['quality'] = 'eco';
$optml_args['resize'] = [];
$low_url = apply_filters( 'optml_content_url', $is_slashed ? stripslashes( $original_url ) : $original_url, $optml_args );
Expand All @@ -193,9 +195,19 @@ public function lazyload_tag_replace( $new_tag, $original_url, $new_url, $optml_

if ( $this->should_add_data_tag( $full_tag ) ) {
$opt_format = ' data-opt-src="%s" ';
if ( $should_ignore_rescale ) {
if ( strpos( $new_tag, 'class=' ) === false ) {
$opt_format .= ' class="optimole-lazy-only" ';
} else {
$new_tag = str_replace(
( $is_slashed ? 'class=\"' : 'class="' ),
( $is_slashed ? 'class=\"optimole-lazy-only ' : 'class="optimole-lazy-only ' ),
$new_tag
);
}
}
$opt_format = $is_slashed ? addslashes( $opt_format ) : $opt_format;
}

$new_url = $is_slashed ? addcslashes( $new_url, '/' ) : $new_url;

$opt_src = sprintf( $opt_format, $new_url );
Expand All @@ -220,14 +232,6 @@ public function lazyload_tag_replace( $new_tag, $original_url, $new_url, $optml_

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

if ( $this->is_valid_gif( $original_url ) ) {
if ( strpos( $new_tag, 'class=' ) === - 1 ) {
$new_tag = str_replace( '<img', '<img class="optimole-lazy-only"', $new_tag );
} else {
$new_tag = str_replace( 'class="', 'class="optimole-lazy-only ', $new_tag );
}
}

if ( ! $this->should_add_noscript( $new_tag ) ) {
return $new_tag;
}
Expand Down
48 changes: 43 additions & 5 deletions tests/test-lazyload.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,6 +107,43 @@ public function test_replacement_with_jetpack_photon() {
$this->assertNotContains( 'i0.wp.com', $replaced_content );
}

public function test_lazyload_only_gif() {
$content = '<div class="before-footer">
<div class="codeinwp-container">
<p class="featuredon">Featured On</p>
<img class="sample-class" src="http://www.example.org/wp-content/uploads/2018/05/brands.gif">
<img src="http://www.example.org/wp-content/uploads/2018/05/brands2.gif">
<img src="http://www.example.org/wp-content/uploads/2018/05/brands.svg">
</div>
</div>';

$replaced_content = Optml_Manager::instance()->replace_content( $content );
$this->assertEquals( 6, substr_count( $replaced_content, 'i.optimole.com' ) );
$this->assertEquals( 4, substr_count( $replaced_content, 'optimole-lazy-only' ) );
$this->assertEquals( 3, substr_count( $replaced_content, 'data:image/svg+xml' ) );
}

public function test_lazyload_only_with_json() {
$some_html_content = [
'html' => '<div class="before-footer">
<div class="codeinwp-container">
<p class="featuredon">Featured On</p>
<img class="sample-class" src="http://www.example.org/wp-content/uploads/2018/05/brands.gif">
<img src="http://www.example.org/wp-content/uploads/2018/05/brands2.gif">
<img src="http://www.example.org/wp-content/uploads/2018/05/brands.svg">
</div>
</div>'
];
$content = wp_json_encode( $some_html_content );
$replaced_content = Optml_Manager::instance()->replace_content( $content );
$this->assertEquals( $replaced_content, $replaced_content );
$this->assertArrayHasKey( 'html', json_decode( $replaced_content, true ) );
$this->assertEquals( 6, substr_count( $replaced_content, 'i.optimole.com' ) );
$this->assertEquals( 4, substr_count( $replaced_content, 'optimole-lazy-only' ) );
$this->assertEquals( 3, substr_count( $replaced_content, 'data:image/svg+xml' ) );

}

public function test_replacement_wrong_extension_with_query_string() {
$content = '
<img src="http://example.org/wp-content/plugins/test/generate-qr-code.php?3CRMB6qM1DvLswN6nxKjppX6W5ycjXpeZp">
Expand Down Expand Up @@ -191,6 +228,7 @@ 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>
Expand Down Expand Up @@ -263,11 +301,11 @@ public function test_lazyload_json_data_disabled() {
}

public function test_should_replace_query_string_url() {
$content = '<img src="https://example.org/photos/814499/pexels-photo-814499.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">';
$replaced_content = Optml_Manager::instance()->replace_content($content);
$this->assertContains('i.optimole.com', $replaced_content);
$this->assertContains('data-opt-src', $replaced_content);
$this->assertContains('example.org', $replaced_content);
$content = '<img src="https://example.org/photos/814499/pexels-photo-814499.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">';
$replaced_content = Optml_Manager::instance()->replace_content( $content );
$this->assertContains( 'i.optimole.com', $replaced_content );
$this->assertContains( 'data-opt-src', $replaced_content );
$this->assertContains( 'example.org', $replaced_content );
}

}

0 comments on commit d4e63b6

Please sign in to comment.