allow to give source format as string (#5)

sulu · May 30, 2018 · 4989504 · 4989504
1 parent d49b579
commit 4989504
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 1 deletion.
diff --git a/docs/image.md b/docs/image.md
@@ -78,7 +78,28 @@ This could be:
 }) }}
 ```
 
-##### 3. Picture tag
+##### 3. Simple Picture Tag
+
+```twig
+<picture>
+    <source media="(max-width: 1024px)"
+            srcset="/uploads/media/sulu-170x170/01/image.jpg?v=1-0">
+    <source media="(max-width: 650px)"
+            srcset="/uploads/media/sulu-100x100/01/image.jpg?v=1-0">
+    <img alt="Title"
+         title="Description"
+         src="/uploads/media/sulu-400x400/01/image.jpg?v=1-0">
+</picture>
+```
+
+```twig
+{{ get_image(headerImage, 'sulu-400x400', {
+    '(max-width: 1024px)': 'sulu-170x170',
+    '(max-width: 650px)': 'sulu-100x100',
+}) }}
+```
+
+##### 4. Complex Picture tag
 
 ```twig
 <picture>

diff --git a/src/ImageTwigExtension.php b/src/ImageTwigExtension.php
@@ -66,6 +66,11 @@ public function getImage($media, $attributes = [], $sources = [])
 
         $sourceTags = '';
         foreach ($sources as $media => $sourceAttributes) {
+            if (is_string($sourceAttributes)) {
+                $sourceAttributes = [
+                    'srcset' => $sourceAttributes,
+                ];
+            }
             // Get the source tag with all given attributes.
             $sourceTags .= $this->createTag('source', array_merge(['media' => $media], $sourceAttributes), $thumbnails);
         }

diff --git a/tests/ImageTwigExtensionTest.php b/tests/ImageTwigExtensionTest.php
@@ -70,6 +70,29 @@ public function testComplexImageTag()
     }
 
     public function testPictureTag()
+    {
+        $this->assertEquals(
+            '<picture>' .
+            '<source media="(max-width: 1024px)"' .
+                ' srcset="/uploads/media/sulu-170x170/01/image.jpg?v=1-0">' .
+            '<source media="(max-width: 650px)"' .
+                ' srcset="/uploads/media/sulu-100x100/01/image.jpg?v=1-0">' .
+            '<img alt="Title"' .
+                ' title="Description"' .
+                ' src="/uploads/media/sulu-400x400/01/image.jpg?v=1-0">' .
+            '</picture>',
+            $this->imageTwigExtension->getImage(
+                $this->image,
+                'sulu-400x400',
+                [
+                    '(max-width: 1024px)' => 'sulu-170x170',
+                    '(max-width: 650px)' => 'sulu-100x100',
+                ]
+            )
+        );
+    }
+
+    public function testComplexPictureTag()
     {
         $this->assertEquals(
             '<picture>' .