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 d9a5d85..847d9e9 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 ); @@ -232,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; } @@ -248,14 +253,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 +290,8 @@ public function picture_fallback_image( $args = [] ) { 'loading' => $this->loading( $args['loading'] ), ]; + $fallback_attributes = $this->add_data_attributes( $fallback_attributes, $args ); + return ''; } @@ -774,9 +783,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']; @@ -793,15 +828,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 fa46cdd..8a2175b 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,33 @@ 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 ); + } + + 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 ); } diff --git a/tests/test-webp.php b/tests/test-webp.php index 91f2770..203a59f 100644 --- a/tests/test-webp.php +++ b/tests/test-webp.php @@ -31,7 +31,32 @@ public function test_picture_webp() { ] ); $result = get_timber_picture_responsive( $attachment, 'picture-webp' ); - $expected = '' . PHP_EOL . '' . PHP_EOL . 'Burrito Wrap'; + $expected = sprintf( + '%2$s%2$sBurrito Wrap', + $this->get_upload_url(), + PHP_EOL + ); + + $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 ); } @@ -42,7 +67,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 +82,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 +99,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 +118,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 ); }