Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support background css property #91

Open
wants to merge 6 commits into
base: develop
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion composer.json
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@
"@test-unit",
"@test-integration"
],
"phpcs": "phpcs --basepath=."
"phpcs": "phpcs --basepath=.",
"phpcs:fix": "phpcbf"
}
}
35 changes: 25 additions & 10 deletions src/Image.php
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ class Image {
public function lazyloadImages( $html, $buffer ) {
$clean_buffer = preg_replace( '/<script\b(?:[^>]*)>(?:.+)?<\/script>/Umsi', '', $html );
$clean_buffer = preg_replace( '#<noscript>(?:.+)</noscript>#Umsi', '', $clean_buffer );
if (! preg_match_all('#<img(?<atts>\s.+)\s?/?>#iUs', $clean_buffer, $images, PREG_SET_ORDER)) {
if ( ! preg_match_all( '#<img(?<atts>\s.+)\s?/?>#iUs', $clean_buffer, $images, PREG_SET_ORDER ) ) {
return $html;
}

Expand Down Expand Up @@ -62,17 +62,19 @@ public function lazyloadBackgroundImages( $html, $buffer ) {
continue;
}

if ( ! preg_match( '#background-image\s*:\s*(?<attr>\s*url\s*\((?<url>[^)]+)\))\s*;?#is', $element['styles'], $url ) ) {
if ( ! preg_match( '#(?<property>background(?:-image)?)\s*:(?<before>.*)(?<attr>\s*url\s*\((?<url>[^)]+)\))(?<after>[\w,\s*,-]*);?#is', $element['styles'], $url ) ) {
continue;
}

$url['url'] = esc_url(
trim(
strip_tags(
wp_strip_all_tags(
html_entity_decode(
$url['url'], ENT_QUOTES|ENT_HTML5
$url['url'],
ENT_QUOTES | ENT_HTML5
)
), '\'" '
),
'\'" '
)
);

Expand All @@ -81,7 +83,20 @@ public function lazyloadBackgroundImages( $html, $buffer ) {
}

$lazy_bg = $this->addLazyCLass( $element[0] );
$lazy_bg = str_replace( $url[0], '', $lazy_bg );
switch ( $url['property'] ) {
case 'background-image':
$lazy_bg = str_replace( $url[0], '', $lazy_bg );
break;

case 'background':
if ( empty( trim( $url['before'] ) ) && empty( trim( $url['after'] ) ) ) {
$lazy_bg = str_replace( $url[0], '', $lazy_bg );
}else {
$lazy_bg = str_replace( $url['attr'], '', $lazy_bg );
}
break;
}

$lazy_bg = str_replace( '<' . $element['tag'], '<' . $element['tag'] . ' data-bg="' . esc_attr( $url['url'] ) . '"', $lazy_bg );

$html = str_replace( $element[0], $lazy_bg, $html );
Expand All @@ -99,7 +114,7 @@ public function lazyloadBackgroundImages( $html, $buffer ) {
*/
private function addLazyClass( $element ) {
$class = $this->getClasses( $element );
if ( empty( $class ) ) {
if ( empty( $class ) ) {
return preg_replace( '#<(img|div|figure|section|li|span|a)([^>]*)>#is', '<\1 class="rocket-lazyload"\2>', $element );
}

Expand Down Expand Up @@ -132,7 +147,7 @@ private function addLazyClass( $element ) {
*/
private function getAttributeQuotes( $attribute_value ) {
$attribute_value = trim( $attribute_value );
$first_char = $attribute_value[0];
$first_char = $attribute_value[0];

if ( '"' === $first_char || "'" === $first_char ) {
return $first_char;
Expand Down Expand Up @@ -230,7 +245,7 @@ private function stringToArray( $string, $delimiter = ' ' ) {
}

$array = explode( $delimiter, $string );
$array = array_map('trim', $array );
$array = array_map( 'trim', $array );

// Remove empties.
return array_filter( $array );
Expand Down Expand Up @@ -286,7 +301,7 @@ public function lazyloadPictures( $html, $buffer ) {

$img_lazy = $this->replaceImage( $img );
$img_lazy .= $this->noscript( $img[0] );
$safe_img = str_replace('/', '\/', preg_quote( $img[0], '#' ));
$safe_img = str_replace( '/', '\/', preg_quote( $img[0], '#' ) );
$html = preg_replace( '#<noscript[^>]*>.*' . $safe_img . '.*<\/noscript>(*SKIP)(*FAIL)|' . $safe_img . '#i', $img_lazy, $html );

unset( $img_lazy );
Expand Down
12 changes: 12 additions & 0 deletions tests/Unit/Image/TestLazyloadBackgroundImages.php
Original file line number Diff line number Diff line change
Expand Up @@ -37,10 +37,22 @@ public function testShouldReturnSameWhenNoBackgroundImage() {

public function testShouldReturnBackgroundImagesLazyloaded() {
Functions\when('esc_attr')->returnArg();

Functions\expect('esc_url')->andReturnUsing( function ( $url ){
return str_replace(['"', "'"], ["&quot;", "&#39;"], $url );
} );

Functions\expect('wp_strip_all_tags')->andReturnUsing( function ( $string, $remove_breaks = false ){
$string = preg_replace( '@<(script|style)[^>]*?>.*?</\\1>@si', '', $string );
$string = strip_tags( $string );

if ( $remove_breaks ) {
$string = preg_replace( '/[\r\n\t ]+/', ' ', $string );
}

return trim( $string );
} );

$original = \file_get_contents( RLL_COMMON_TESTS_ROOT . '/fixtures/Image/bgimages.html');
$expected = \file_get_contents( RLL_COMMON_TESTS_ROOT . '/fixtures/Image/bgimageslazyloaded.html');

Expand Down
9 changes: 9 additions & 0 deletions tests/Unit/fixtures/Image/bgimages.html
Original file line number Diff line number Diff line change
Expand Up @@ -124,5 +124,14 @@
<div style="background-image: url(&#39;/wp-content/uploads/2018/04/&#39;telephonie-ip-couleur.jpg&#39;);" class="image_article bkgd-img"></div>
<div style="background-image: url(&quot;/wp-content/uploads/2018/04/&#39;telephonie-ip-couleur.jpg&quot;);" class="image_article bkgd-img"></div>
<div style="background-image: url(&#39;&apos;/wp-content/<br/><br%2F><p>&#x3C;br/&#x3E;</p>uploads/2018/04/&#39;telephonie-ip-couleur.jpg&quot;);" class="image_article bkgd-img"></div>
<a href="#" style="background: url(test1.jpg)">Test a</a>
<a href="#" style="background: url('test2.jpg')">Test a</a>
<a href="#" style='background: url("test3.jpg")'>Test a</a>
<a href="#" style="background: url(test4.jpg) red;">Test a</a>
<a href="#" style="background: green url(test5.jpg) red;">Test a</a>
<a href="#" style='background: lightblue url("test6.gif") no-repeat fixed center;'>Test a</a>
<a href="#" style='background: lightblue no-repeat fixed center url("test7.gif") ;'>Test a</a>
<span style="background: #ccc url('/wp-content/rocket-test-data/images/fixtheissue.jpg?span') no-repeat;"></span>
<span style="background: no-repeat url('/wp-content/rocket-test-data/images/fixtheissue.jpg?span') #ccc;"></span>
</body>
</html>
9 changes: 9 additions & 0 deletions tests/Unit/fixtures/Image/bgimageslazyloaded.html
Original file line number Diff line number Diff line change
Expand Up @@ -124,5 +124,14 @@
<div data-bg="/wp-content/uploads/2018/04/&#39;telephonie-ip-couleur.jpg" style="" class="image_article bkgd-img rocket-lazyload"></div>
<div data-bg="/wp-content/uploads/2018/04/&#39;telephonie-ip-couleur.jpg" style="" class="image_article bkgd-img rocket-lazyload"></div>
<div data-bg="/wp-content/uploads/2018/04/&#39;telephonie-ip-couleur.jpg" style="" class="image_article bkgd-img rocket-lazyload"></div>
<a data-bg="test1.jpg" class="rocket-lazyload" href="#" style="">Test a</a>
<a data-bg="test2.jpg" class="rocket-lazyload" href="#" style="">Test a</a>
<a data-bg="test3.jpg" class="rocket-lazyload" href="#" style=''>Test a</a>
<a data-bg="test4.jpg" class="rocket-lazyload" href="#" style="background: red;">Test a</a>
<a data-bg="test5.jpg" class="rocket-lazyload" href="#" style="background: green red;">Test a</a>
<a data-bg="test6.gif" class="rocket-lazyload" href="#" style='background: lightblue no-repeat fixed center;'>Test a</a>
<a data-bg="test7.gif" class="rocket-lazyload" href="#" style='background: lightblue no-repeat fixed center ;'>Test a</a>
<span data-bg="/wp-content/rocket-test-data/images/fixtheissue.jpg?span" class="rocket-lazyload" style="background: #ccc no-repeat;"></span>
<span data-bg="/wp-content/rocket-test-data/images/fixtheissue.jpg?span" class="rocket-lazyload" style="background: no-repeat #ccc;"></span>
</body>
</html>