From 863cf8b90e0f8798a4a9bf1010669c7fcf9b3480 Mon Sep 17 00:00:00 2001 From: Lukas Gaechter Date: Fri, 14 Oct 2022 17:50:35 +0200 Subject: [PATCH 1/4] Use sprintf for some tests --- tests/test-picture.php | 25 +++++++++++++++++++------ 1 file changed, 19 insertions(+), 6 deletions(-) diff --git a/tests/test-picture.php b/tests/test-picture.php index fa46cdd..8675c7b 100644 --- a/tests/test-picture.php +++ b/tests/test-picture.php @@ -11,8 +11,11 @@ public function test_picture() { ] ); $result = get_timber_picture_responsive( $attachment, 'picture' ); - $expected = '' . PHP_EOL . - 'Burrito Wrap'; + $expected = sprintf( + '%2$sBurrito Wrap', + $this->get_upload_url(), + PHP_EOL + ); $this->assertEquals( $expected, $result ); } @@ -21,8 +24,11 @@ public function test_picture_loading_false() { $attachment = $this->create_image(); $result = get_timber_picture_responsive( $attachment, 'picture', [ 'loading' => false ] ); - $expected = '' . PHP_EOL . - ''; + $expected = sprintf( + '%2$s', + $this->get_upload_url(), + PHP_EOL + ); $this->assertEquals( $expected, $result ); } @@ -33,8 +39,15 @@ public function test_picture_loading_false_timmy_image() { $image = Timmy::get_image( $attachment->ID, 'picture' ); $result = $image->picture_responsive( [ 'loading' => false ] ); - $expected = '' . PHP_EOL . - ''; + $expected = sprintf( + '%2$s', + $this->get_upload_url(), + PHP_EOL + ); + + $this->assertEquals( $expected, $result ); + } + $this->assertEquals( $expected, $result ); } From 2bee3a2433aa3973c9ecfc9efad75a1c8ed3a820 Mon Sep 17 00:00:00 2001 From: Lukas Gaechter Date: Fri, 14 Oct 2022 17:55:19 +0200 Subject: [PATCH 2/4] Allow lazy_* options to be used with the picture markup --- functions-images.php | 5 +++- lib/Image.php | 66 ++++++++++++++++++++++++++++-------------- tests/test-picture.php | 19 ++++++++++++ 3 files changed, 68 insertions(+), 22 deletions(-) diff --git a/functions-images.php b/functions-images.php index 15bd84c..79b77fc 100644 --- a/functions-images.php +++ b/functions-images.php @@ -160,7 +160,7 @@ function get_timber_image_description( $timber_image ) { * @param string $size Size key of the image to return the * attributes for. * @param array $args Optional. Array of options. See - * get_timber_image_responsive() for possible + * get_timber_image_responsive_src() for possible * options. * * @return bool|array An associative array of HTML attributes. False if image can’t be found. @@ -194,6 +194,9 @@ function get_timber_image_attributes_responsive( $timber_image, $size, $args = a * * @param int|\Timber\Image $timber_image Instance of Timber\Image or Attachment ID. * @param string|array $size Timmy image size. + * @param array $args Optional. Array of options. See + * get_timber_image_responsive_src() for possible + * options. * * @return false|string */ diff --git a/lib/Image.php b/lib/Image.php index 78e993b..be8cded 100644 --- a/lib/Image.php +++ b/lib/Image.php @@ -211,7 +211,10 @@ public function picture_responsive( $args = [] ) { * Default arguments for image markup. */ $default_args = [ - 'loading' => 'lazy', + 'loading' => 'lazy', + 'lazy_srcset' => false, + 'lazy_src' => false, + 'lazy_sizes' => false, ]; $args = wp_parse_args( $args, $default_args ); @@ -248,14 +251,16 @@ public function picture_responsive( $args = [] ) { 'type' => $mime_type, ]; - $source_attributes = array_merge( $source_attributes, $this->responsive_attributes( [ - 'attr_width' => false, - 'attr_height' => false, - 'src_default' => false, - 'loading' => false, - 'webp' => false, - 'is_source' => true, - ] ) ); + $source_attributes = array_merge( $source_attributes, $this->responsive_attributes( + array_merge( $args, [ + 'attr_width' => false, + 'attr_height' => false, + 'src_default' => false, + 'loading' => false, + 'webp' => false, + 'is_source' => true, + ] ) + ) ); $html .= '' . PHP_EOL; @@ -283,6 +288,8 @@ public function picture_fallback_image( $args = [] ) { 'loading' => $this->loading( $args['loading'] ), ]; + $fallback_attributes = $this->add_data_attributes( $fallback_attributes, $args ); + return ''; } @@ -756,9 +763,35 @@ public function responsive_attributes( $args = [] ) { // Lazy-loading. $attributes['loading'] = $this->loading( $args['loading'] ); - /** - * Maybe rename attributes with "data-" prefixes. - */ + // Maybe update attributes with "data-" prefixes. + $attributes = $this->add_data_attributes( $attributes, $args ); + + // Maybe rename src attribute to srcset + if ( $args['is_source'] && ! empty( $attributes['src'] ) ) { + $attributes['srcset'] = $attributes['src']; + unset( $attributes['src'] ); + } + + // Remove any falsy attributes. + $attributes = array_filter( $attributes ); + + return $attributes; + } + + /** + * Adds "data-" attributes for usage with JavaScript lazy loading libraries. + * + * @param array $args Args. + * @param array $attributes Updated attributes. + * + * @return mixed + */ + protected function add_data_attributes( array $attributes, array $args ) { + $args = wp_parse_args( $args, [ + 'lazy_srcset' => false, + 'lazy_src' => false, + 'lazy_sizes' => false, + ] ); if ( $args['lazy_srcset'] && ! empty( $attributes['srcset'] ) ) { $attributes['data-srcset'] = $attributes['srcset']; @@ -775,15 +808,6 @@ public function responsive_attributes( $args = [] ) { unset( $attributes['sizes'] ); } - // Maybe rename src attribute to srcset - if ( $args['is_source'] && ! empty( $attributes['src'] ) ) { - $attributes['srcset'] = $attributes['src']; - unset( $attributes['src'] ); - } - - // Remove any falsy attributes. - $attributes = array_filter( $attributes ); - return $attributes; } diff --git a/tests/test-picture.php b/tests/test-picture.php index 8675c7b..3af948a 100644 --- a/tests/test-picture.php +++ b/tests/test-picture.php @@ -1,5 +1,6 @@ assertEquals( $expected, $result ); } + public function test_picture_with_lazy_attributes() { + $alt_text = 'Burrito Wrap'; + $attachment = $this->create_image( [ + 'alt' => $alt_text, + 'description' => 'Burritolino', + ] ); + + $result = get_timber_picture_responsive( $attachment, 'picture', [ + 'lazy_srcset' => true, + 'lazy_src' => true, + 'lazy_sizes' => true, + ] ); + + $expected = sprintf( + '%2$sBurrito Wrap', + $this->get_upload_url(), + PHP_EOL + ); $this->assertEquals( $expected, $result ); } From fcadbf6a748c2f6d82ee53291da213b4a0b55689 Mon Sep 17 00:00:00 2001 From: Lukas Gaechter Date: Fri, 14 Oct 2022 18:09:45 +0200 Subject: [PATCH 3/4] More sprintf --- tests/test-picture.php | 1 - tests/test-webp.php | 30 +++++++++++++++++++++++++----- 2 files changed, 25 insertions(+), 6 deletions(-) diff --git a/tests/test-picture.php b/tests/test-picture.php index 3af948a..8a2175b 100644 --- a/tests/test-picture.php +++ b/tests/test-picture.php @@ -1,6 +1,5 @@ get_upload_url() . '/test-560x0-c-default.webp 560w, ' . $this->get_upload_url() . '/test-1400x0-c-default.webp 1400w" sizes="100vw">' . PHP_EOL . '' . PHP_EOL . 'Burrito Wrap'; + $expected = sprintf( + '%2$s%2$sBurrito Wrap', + $this->get_upload_url(), + PHP_EOL + ); $this->assertEquals( $expected, $result ); } @@ -42,7 +46,11 @@ public function test_picture_webp_with_small_image() { ] ); $result = get_timber_picture_responsive( $attachment, 'picture-webp-with-small-image' ); - $expected = '' . PHP_EOL . '' . PHP_EOL . ''; + $expected = sprintf( + '%2$s%2$s', + $this->get_upload_url(), + PHP_EOL + ); $this->assertEquals( $expected, $result ); } @@ -53,7 +61,11 @@ public function test_picture_webp_with_small_image_square() { ] ); $result = get_timber_picture_responsive( $attachment, 'picture-webp-resize-square' ); - $expected = '' . PHP_EOL . '' . PHP_EOL . ''; + $expected = sprintf( + '%2$s%2$s', + $this->get_upload_url(), + PHP_EOL + ); $this->assertEquals( $expected, $result ); } @@ -66,7 +78,11 @@ public function test_picture_webp_args_array_with_srcset_descriptors() { 'webp' => true, ] ); - $expected = '' . PHP_EOL . '' . PHP_EOL . ''; + $expected = sprintf( + '%2$s%2$s', + $this->get_upload_url(), + PHP_EOL + ); $this->assertEquals( $expected, $result ); } @@ -81,7 +97,11 @@ public function test_picture_webp_args_array_with_srcset_descriptors_timmy_image $result = $image->picture_responsive(); - $expected = '' . PHP_EOL . '' . PHP_EOL . ''; + $expected = sprintf( + '%2$s%2$s', + $this->get_upload_url(), + PHP_EOL + ); $this->assertEquals( $expected, $result ); } From 9eca0dd046d9469a55eec8a650c29f37b98eadf3 Mon Sep 17 00:00:00 2001 From: Lukas Gaechter Date: Fri, 14 Oct 2022 18:11:08 +0200 Subject: [PATCH 4/4] Add lazy attributes WebP picture --- lib/Image.php | 18 ++++++++++-------- tests/test-webp.php | 21 +++++++++++++++++++++ 2 files changed, 31 insertions(+), 8 deletions(-) diff --git a/lib/Image.php b/lib/Image.php index be8cded..8eb40df 100644 --- a/lib/Image.php +++ b/lib/Image.php @@ -235,14 +235,16 @@ public function picture_responsive( $args = [] ) { 'type' => 'image/webp', ]; - $source_attributes = array_merge( $source_attributes, $this->responsive_attributes( [ - 'attr_width' => false, - 'attr_height' => false, - 'src_default' => false, - 'loading' => false, - 'webp' => true, - 'is_source' => true, - ] ) ); + $source_attributes = array_merge( $source_attributes, $this->responsive_attributes( + array_merge( $args, [ + 'attr_width' => false, + 'attr_height' => false, + 'src_default' => false, + 'loading' => false, + 'webp' => true, + 'is_source' => true, + ] ) + ) ); $html .= '' . PHP_EOL; } diff --git a/tests/test-webp.php b/tests/test-webp.php index d7fd090..203a59f 100644 --- a/tests/test-webp.php +++ b/tests/test-webp.php @@ -40,6 +40,27 @@ public function test_picture_webp() { $this->assertEquals( $expected, $result ); } + public function test_picture_webp_with_lazy_attributes() { + $alt_text = 'Burrito Wrap'; + $attachment = $this->create_image( [ + 'alt' => $alt_text, + 'description' => 'Burritolino', + ] ); + $result = get_timber_picture_responsive( $attachment, 'picture-webp', [ + 'lazy_srcset' => true, + 'lazy_src' => true, + 'lazy_sizes' => true, + ] ); + + $expected = sprintf( + '%2$s%2$sBurrito Wrap', + $this->get_upload_url(), + PHP_EOL + ); + + $this->assertEquals( $expected, $result ); + } + public function test_picture_webp_with_small_image() { $attachment = $this->create_image( [ 'file' => 'test-200px.jpg',