Merge pull request #852 from massgov/feature/dp-7363-image-srcset

DP-7363: Image srcset

changelogs/DP-7363.txt

@@ -0,0 +1,4 @@
+___DESCRIPTION___
+Added
+Minor
+- DP-7363: Enable srcset on the image pattern and demonstrate usage on Press Release with Image Page

styleguide/source/_patterns/01-atoms/09-media/image.md

@@ -14,10 +14,14 @@ image {
     type: string / required
   src:
     type: string (url) / required
+  srcset:
+    type: string / optional
+  sizes:
+    type: string / optional
   height:
-    type: string / required
+    type: string / optional
   width:
-    type: string / required
+    type: string / optional
   shape:
     type: string / optional
 }

styleguide/source/_patterns/01-atoms/09-media/image.twig

@@ -1,6 +1,24 @@
-<img
-    class="ma__image{% if image.shape %} {{ image.shape }}{% endif %}"
-    alt="{{ image.alt }}"
-    src="{{ image.src }}"
-    height="{{ image.height }}"
-    width="{{ image.width }}" />
+<img
+  class="ma__image{% if image.shape %} {{ image.shape }}{% endif %}"
+  alt="{{ image.alt }}"
+  src="{{ image.src }}"
+  {% if image.versions %}
+    srcset="
+    {% for version in image.versions %}
+      {% if version.url and version.width %}
+        {{ version.url }} {{ version.width }}{% if not loop.last %},{% endif %}
+      {% endif %}
+    {% endfor %}
+    "
+    {% if image.sizes %}
+      {# Only use sizes if certain breakpoints limit the width of the image to less than approximately full width #}
+      sizes="{{ image.sizes }}"
+    {% endif %}
+  {% endif %}
+  {% if image.height %}
+    height="{{ image.height }}"
+  {% endif %}
+  {% if image.width %}
+    width="{{ image.width }}"
+  {% endif %}
+/>

styleguide/source/_patterns/01-atoms/09-media/image~responsive.json

@@ -0,0 +1,20 @@
+{
+  "image": {
+    "alt": "alt text",
+    "src": "../../assets/images/placeholder/800x400.png",
+    "versions": [
+      {
+        "url": "../../assets/images/placeholder/400x200.png",
+        "width": "620w"
+      },
+      {
+        "url": "../../assets/images/placeholder/700x350.png",
+        "width": "780w"
+      },
+      {
+        "url": "../../assets/images/placeholder/800x400.png",
+        "width": "910w"
+      }
+    ]
+  }
+}

styleguide/source/_patterns/05-pages/press-release~with-image.json

@@ -56,8 +56,25 @@
       "image": { 
         "alt": "alt text", 
         "src": "../../assets/images/placeholder/820x460.png",
-        "height": "",
-        "width": ""
+        "versions": [
+          {
+            "url": "../../assets/images/placeholder/565x282.png",
+            "width": "565w"
+          },
+          {
+            "url": "../../assets/images/placeholder/820x460.png",
+            "width": "820w"
+          },
+          {
+            "url": "../../assets/images/placeholder/835x467.png",
+            "width": "835w"
+          },
+          {
+            "url": "../../assets/images/placeholder/1670x835.png",
+            "width": "1670w"
+          }
+        ],
+        "sizes": "(min-width: 910px) 820px, 100vw"
       },
       "caption": "This is an optional caption that can wrap to multiple lines."
     },