From 9cf977bf4d2afbdc86f6b49b94ae1c92f9f4ade8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Robin=20Sch=C3=BClein?= Date: Wed, 17 Jan 2024 17:12:47 +0100 Subject: [PATCH 1/4] preserve the class attribute when generating the JPG fallback img when rendering a picture --- lib/Image.php | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/lib/Image.php b/lib/Image.php index 6456186..1eb0dff 100644 --- a/lib/Image.php +++ b/lib/Image.php @@ -348,6 +348,10 @@ public function picture_fallback_image( $args = [] ) { 'loading' => $this->loading( $args['loading'] ), ]; + if (!empty($args['class'])) { + $fallback_attributes['class'] = $args['class']; + } + $fallback_attributes = $this->add_data_attributes( $fallback_attributes, $args ); return ''; From 6cb4f944f846d1a3d736be0133b2ccba76e7a295 Mon Sep 17 00:00:00 2001 From: Lukas Gaechter Date: Tue, 27 Aug 2024 14:39:29 +0200 Subject: [PATCH 2/4] feat: Add img_class argument to set CSS class for fallback image --- lib/Image.php | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/lib/Image.php b/lib/Image.php index 1eb0dff..ad55504 100644 --- a/lib/Image.php +++ b/lib/Image.php @@ -336,6 +336,7 @@ public function picture_fallback_image( $args = [] ) { */ $default_args = [ 'loading' => 'lazy', + 'img_class' => '', ]; $args = wp_parse_args( $args, $default_args ); @@ -348,8 +349,8 @@ public function picture_fallback_image( $args = [] ) { 'loading' => $this->loading( $args['loading'] ), ]; - if (!empty($args['class'])) { - $fallback_attributes['class'] = $args['class']; + if (!empty($args['img_class'])) { + $fallback_attributes['class'] = $args['img_class']; } $fallback_attributes = $this->add_data_attributes( $fallback_attributes, $args ); From b5796294e96d03f2df4a0e71d74f76b6ee75df47 Mon Sep 17 00:00:00 2001 From: Lukas Gaechter Date: Tue, 27 Aug 2024 14:41:02 +0200 Subject: [PATCH 3/4] docs: Add documentation for get_picture_image_responsive() --- docs/functions.md | 50 +++++++++++++++++++++++++++++++++++++++++++++++ docs/picture.md | 10 ++++++++++ 2 files changed, 60 insertions(+) diff --git a/docs/functions.md b/docs/functions.md index 6e6460d..a85a31a 100644 --- a/docs/functions.md +++ b/docs/functions.md @@ -12,6 +12,7 @@ You can use the following functions to get your images into your template: ## Responsive images +* [get_timber_picture_responsive()](#get_timber_picture_responsive) – Returns the picture markup used for modern image formats using a fallback source. * [get_timber_image_responsive()](#get_timber_image_responsive) – Returns the srcset, size and alt attributes for an image. * [get_timber_image_responsive_src()](#get_timber_image_responsive_src) – Returns the srcset and sizes for an image. This is practically the same as *get_timber_image_responsive*, just without the alt tag. * [get_timber_image_responsive_acf()](#get_timber_image_responsive_acf) – Takes the field name of an ACF image as the input and returns the same output as *get_timber_image_responsive()*. @@ -129,6 +130,55 @@ Returns the image height for an image size. If you use the [lazy loading functio --- +## get_timber_picture_responsive + +`get_timber_picture_responsive( int|Timber\Image $timber_image, string $size, array $args = [] )` + +Gets the picture markup used for modern image formats using a fallback source. + +### Usage in WordPress templates + +```php + + + +``` + +### Usage in Twig + +```twig + + {{ post.thumbnail|get_timber_picture_responsive('custom-6') }} + +``` + +### img_class + +If you want to define the CSS class for the fallback ``, you can use the `img_class` parameter. + +**PHP** + +```php + + + 'the-class', + ] ); ?> + +``` + +**Twig** + +```twig + + {{ post.thumbnail|get_timber_picture_responsive('custom-6', { + img_class: 'the-class', + }) }} + +``` + +--- + ## get_timber_image_responsive `get_timber_image_responsive( int $post_id|\Timber\Image $timber_image, string|array $size )` diff --git a/docs/picture.md b/docs/picture.md index 2555fe4..ce100a7 100644 --- a/docs/picture.md +++ b/docs/picture.md @@ -26,6 +26,16 @@ You will use a `` element instead of an `` ``` +If you want to add a CSS class to the fallback ``, then you can use the `img_class` parameter: + +```twig + + {{ post.thumbnail|get_timber_picture_responsive('webp-picture', { + img_class: 'the-class' + }) }} + +``` + ### Art directed picture with fallbacks To be implemented … From aaa517303552074d0cd97ddfdef33e0b6c649456 Mon Sep 17 00:00:00 2001 From: Lukas Gaechter Date: Tue, 27 Aug 2024 14:41:34 +0200 Subject: [PATCH 4/4] tests: Add a test --- tests/test-picture.php | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/tests/test-picture.php b/tests/test-picture.php index f56d24e..1194996 100644 --- a/tests/test-picture.php +++ b/tests/test-picture.php @@ -85,4 +85,25 @@ public function test_picture_with_lazy_attributes() { $this->assertEquals( $expected, $result ); } + + /** + * @since 2.1.0 + * @return void + */ + public function test_picture_img_class() { + $alt_text = 'Burrito Wrap'; + $attachment = $this->create_image( [ + 'alt' => $alt_text, + 'description' => 'Burritolino', + ] ); + $result = get_timber_picture_responsive( $attachment, 'picture', ['img_class' => 'the-class'] ); + + $expected = sprintf( + '%2$sBurrito Wrap', + $this->get_upload_url(), + PHP_EOL + ); + + $this->assertEquals( $expected, $result ); + } }