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 … diff --git a/lib/Image.php b/lib/Image.php index 04c3c08..1218432 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,6 +349,10 @@ public function picture_fallback_image( $args = [] ) { 'loading' => $this->loading( $args['loading'] ), ]; + if (!empty($args['img_class'])) { + $fallback_attributes['class'] = $args['img_class']; + } + $fallback_attributes = $this->add_data_attributes( $fallback_attributes, $args ); return ''; 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 ); + } }