Skip to content

Commit d4e63b6

Browse files
selulselul
committed
fix: ignore rescale on GIF and SVG when lazyload is active
1 parent 55a5952 commit d4e63b6

File tree

2 files changed

+59
-17
lines changed

2 files changed

+59
-17
lines changed

‎inc/lazyload_replacer.php

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -91,8 +91,8 @@ public static function get_background_lazyload_selectors() {
9191
$saved_watchers = str_replace( [ "\n", "\r" ], ',', $saved_watchers );
9292
$saved_watchers = explode( ',', $saved_watchers );
9393
$all_watchers = array_merge( $default_watchers, $saved_watchers );
94-
$all_watchers = apply_filters( 'optml_lazyload_bg_selectors', $all_watchers );
95-
$all_watchers = array_filter(
94+
$all_watchers = apply_filters( 'optml_lazyload_bg_selectors', $all_watchers );
95+
$all_watchers = array_filter(
9696
$all_watchers,
9797
function ( $value ) {
9898
return ! empty( $value ) && strlen( $value ) >= 2;
@@ -177,7 +177,9 @@ public function lazyload_tag_replace( $new_tag, $original_url, $new_url, $optml_
177177
if ( ! $this->can_lazyload_for( $original_url, $full_tag ) ) {
178178
return Optml_Tag_Replacer::instance()->regular_tag_replace( $new_tag, $original_url, $new_url, $optml_args, $is_slashed );
179179
}
180-
if ( ! self::$is_lazyload_placeholder && ! $this->is_valid_gif( $original_url ) ) {
180+
$should_ignore_rescale = ! $this->is_valid_mimetype_from_url( $original_url, [ 'gif' => true, 'svg' => true ] );
181+
182+
if ( ! self::$is_lazyload_placeholder && ! $should_ignore_rescale ) {
181183
$optml_args['quality'] = 'eco';
182184
$optml_args['resize'] = [];
183185
$low_url = apply_filters( 'optml_content_url', $is_slashed ? stripslashes( $original_url ) : $original_url, $optml_args );
@@ -193,9 +195,19 @@ public function lazyload_tag_replace( $new_tag, $original_url, $new_url, $optml_
193195

194196
if ( $this->should_add_data_tag( $full_tag ) ) {
195197
$opt_format = ' data-opt-src="%s" ';
198+
if ( $should_ignore_rescale ) {
199+
if ( strpos( $new_tag, 'class=' ) === false ) {
200+
$opt_format .= ' class="optimole-lazy-only" ';
201+
} else {
202+
$new_tag = str_replace(
203+
( $is_slashed ? 'class=\"' : 'class="' ),
204+
( $is_slashed ? 'class=\"optimole-lazy-only ' : 'class="optimole-lazy-only ' ),
205+
$new_tag
206+
);
207+
}
208+
}
196209
$opt_format = $is_slashed ? addslashes( $opt_format ) : $opt_format;
197210
}
198-
199211
$new_url = $is_slashed ? addcslashes( $new_url, '/' ) : $new_url;
200212

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

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

223-
if ( $this->is_valid_gif( $original_url ) ) {
224-
if ( strpos( $new_tag, 'class=' ) === - 1 ) {
225-
$new_tag = str_replace( '<img', '<img class="optimole-lazy-only"', $new_tag );
226-
} else {
227-
$new_tag = str_replace( 'class="', 'class="optimole-lazy-only ', $new_tag );
228-
}
229-
}
230-
231235
if ( ! $this->should_add_noscript( $new_tag ) ) {
232236
return $new_tag;
233237
}

‎tests/test-lazyload.php

Lines changed: 43 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,43 @@ public function test_replacement_with_jetpack_photon() {
107107
$this->assertNotContains( 'i0.wp.com', $replaced_content );
108108
}
109109

110+
public function test_lazyload_only_gif() {
111+
$content = '<div class="before-footer">
112+
<div class="codeinwp-container">
113+
<p class="featuredon">Featured On</p>
114+
<img class="sample-class" src="http://www.example.org/wp-content/uploads/2018/05/brands.gif">
115+
<img src="http://www.example.org/wp-content/uploads/2018/05/brands2.gif">
116+
<img src="http://www.example.org/wp-content/uploads/2018/05/brands.svg">
117+
</div>
118+
</div>';
119+
120+
$replaced_content = Optml_Manager::instance()->replace_content( $content );
121+
$this->assertEquals( 6, substr_count( $replaced_content, 'i.optimole.com' ) );
122+
$this->assertEquals( 4, substr_count( $replaced_content, 'optimole-lazy-only' ) );
123+
$this->assertEquals( 3, substr_count( $replaced_content, 'data:image/svg+xml' ) );
124+
}
125+
126+
public function test_lazyload_only_with_json() {
127+
$some_html_content = [
128+
'html' => '<div class="before-footer">
129+
<div class="codeinwp-container">
130+
<p class="featuredon">Featured On</p>
131+
<img class="sample-class" src="http://www.example.org/wp-content/uploads/2018/05/brands.gif">
132+
<img src="http://www.example.org/wp-content/uploads/2018/05/brands2.gif">
133+
<img src="http://www.example.org/wp-content/uploads/2018/05/brands.svg">
134+
</div>
135+
</div>'
136+
];
137+
$content = wp_json_encode( $some_html_content );
138+
$replaced_content = Optml_Manager::instance()->replace_content( $content );
139+
$this->assertEquals( $replaced_content, $replaced_content );
140+
$this->assertArrayHasKey( 'html', json_decode( $replaced_content, true ) );
141+
$this->assertEquals( 6, substr_count( $replaced_content, 'i.optimole.com' ) );
142+
$this->assertEquals( 4, substr_count( $replaced_content, 'optimole-lazy-only' ) );
143+
$this->assertEquals( 3, substr_count( $replaced_content, 'data:image/svg+xml' ) );
144+
145+
}
146+
110147
public function test_replacement_wrong_extension_with_query_string() {
111148
$content = '
112149
<img src="http://example.org/wp-content/plugins/test/generate-qr-code.php?3CRMB6qM1DvLswN6nxKjppX6W5ycjXpeZp">
@@ -191,6 +228,7 @@ public function test_check_with_no_script() {
191228
$this->assertEquals( 1, substr_count( $replaced_content, '<noscript>' ) );
192229
$this->assertEquals( 2, substr_count( $replaced_content, 'i.optimole.com' ) );
193230
}
231+
194232
public function test_check_with_multiple_images_in_no_script() {
195233
$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" />
196234
<noscript>
@@ -263,11 +301,11 @@ public function test_lazyload_json_data_disabled() {
263301
}
264302

265303
public function test_should_replace_query_string_url() {
266-
$content = '<img src="https://example.org/photos/814499/pexels-photo-814499.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">';
267-
$replaced_content = Optml_Manager::instance()->replace_content($content);
268-
$this->assertContains('i.optimole.com', $replaced_content);
269-
$this->assertContains('data-opt-src', $replaced_content);
270-
$this->assertContains('example.org', $replaced_content);
304+
$content = '<img src="https://example.org/photos/814499/pexels-photo-814499.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">';
305+
$replaced_content = Optml_Manager::instance()->replace_content( $content );
306+
$this->assertContains( 'i.optimole.com', $replaced_content );
307+
$this->assertContains( 'data-opt-src', $replaced_content );
308+
$this->assertContains( 'example.org', $replaced_content );
271309
}
272310

273311
}

0 commit comments

Comments
 (0)