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
+
+```
+
+### img_class
+
+If you want to define the CSS class for the fallback ``, you can use the `img_class` parameter.
+
+**PHP**
+
+```php
+
+
+```
+
+**Twig**
+
+```twig
+
+```
+
+---
+
## 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 `
```
+If you want to add a CSS class to the fallback ``, then you can use the `img_class` parameter:
+
+```twig
+
+```
+
### Art directed picture with fallbacks
To be implemented …
diff --git a/lib/Image.php b/lib/Image.php
index 6456186..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,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(
+ '