[refs #422] add size and srcset attributes to the images component fo…

…r responsive loading of images

CHANGELOG.md

@@ -1,5 +1,11 @@
 # NHS.UK frontend Changelog
 
+## 2.3.3 - Unreleased
+
+:wrench: **Fixes**
+
+- Images - Add `size` and `srcset` attributes to the images component for responsive loading of images. ([Issue 422](https://github.com/nhsuk/nhsuk-frontend/issues/422))
+
 ## 2.3.2 - 30th September 2019
 
 :wrench: **Fixes**

app/components/images/index.njk

@@ -12,6 +12,8 @@
         <div class="nhsuk-grid-column-two-thirds">
           {{ image({
             "src": "https://assets.nhs.uk/prod/images/S_1017_allergic-conjunctivitis_M15.2e16d0ba.fill-320x213.jpg",
+            "sizes": "(min-width: 1020px) 320px, (min-width: 768px) 50vw, 100vw",
+            "srcset": "https://assets.nhs.uk/prod/images/S_1017_allergic-conjunctivitis_M15.2e16d0ba.fill-640x427.jpg 640w, https://assets.nhs.uk/prod/images/S_1017_allergic-conjunctivitis_M15.2e16d0ba.fill-767x511.jpg 767w",
             "alt": "Picture of allergic conjunctivitis",
             "caption": "Itchy, red, watering eyes"
           }) }}

packages/components/images/README.md

@@ -12,12 +12,11 @@ Find out more about the images component and when to use it in the [NHS digital
 
 ```html
 <figure class="nhsuk-image">
-  <img class="nhsuk-image__img" src="https://assets.nhs.uk/prod/images/S_1017_allergic-conjunctivitis_M15.2e16d0ba.fill-320x213.jpg" alt="Picture of allergic conjunctivitis">
+  <img class="nhsuk-image__img" src="https://assets.nhs.uk/prod/images/S_1017_allergic-conjunctivitis_M15.2e16d0ba.fill-320x213.jpg" alt="Picture of allergic conjunctivitis" sizes="(min-width: 1020px) 320px, (min-width: 768px) 50vw, 100vw" srcset="https://assets.nhs.uk/prod/images/S_1017_allergic-conjunctivitis_M15.2e16d0ba.fill-640x427.jpg 640w, https://assets.nhs.uk/prod/images/S_1017_allergic-conjunctivitis_M15.2e16d0ba.fill-767x511.jpg 767w">
   <figcaption class="nhsuk-image__caption">
     Itchy, red, watering eyes
   </figcaption>
 </figure>
-
 <figure class="nhsuk-image">
   <img class="nhsuk-image__img" src="https://assets.nhs.uk/prod/images/S_1017_allergic-conjunctivitis_M15.2e16d0ba.fill-320x213.jpg" alt="Picture of allergic conjunctivitis">
 </figure>
@@ -30,13 +29,15 @@ Find out more about the images component and when to use it in the [NHS digital
 
 {{ image({
   "src": "https://assets.nhs.uk/prod/images/S_1017_allergic-conjunctivitis_M15.2e16d0ba.fill-320x213.jpg",
+  "sizes": "(min-width: 1020px) 320px, (min-width: 768px) 50vw, 100vw",
+  "srcset": "https://assets.nhs.uk/prod/images/S_1017_allergic-conjunctivitis_M15.2e16d0ba.fill-640x427.jpg 640w, https://assets.nhs.uk/prod/images/S_1017_allergic-conjunctivitis_M15.2e16d0ba.fill-767x511.jpg 767w",
   "alt": "Picture of allergic conjunctivitis",
   "caption": "Itchy, red, watering eyes"
 }) }}
 
 {{ image({
   "src": "https://assets.nhs.uk/prod/images/S_1017_allergic-conjunctivitis_M15.2e16d0ba.fill-320x213.jpg",
-  "alt": "Picture of allergic conjunctivitis" 
+  "alt": "Picture of allergic conjunctivitis"
 }) }}
 ```
 
@@ -49,7 +50,7 @@ The images Nunjucks macro takes the following arguments:
 | **src**                 | string   | Yes       | The source location of the image. |
 | **alt**                 | string   | Yes       | The alt text of the image. |
 | **caption**             | string   | No        | Optional caption text for the image. |
+| **sizes**               | string   | No        | A list of screen sizes for the browser to load the correct image from the srcset images. |
+| **srcset**              | string   | No        | A list of image source URLs and their respective sizes. Separate each image with a comma. |
 | **classes**             | string   | No        | Optional additional classes to add to the image container. Separate each class with a space. |
 | **attributes**          | object   | No        | Any extra HTML attributes (for example data attributes) to add to the image container. |
-
-If you are using Nunjucks macros in production be aware that using `html` arguments, or ones ending with `html` can be a [security risk](https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting). Read more about this in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning).

packages/components/images/template.njk

@@ -1,7 +1,11 @@
 <figure class="nhsuk-image
 {%- if params.classes %} {{ params.classes }}{% endif %}"
 {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
-  <img class="nhsuk-image__img" src="{{ params.src }}" alt="{{ params.alt }}">
+  <img class="nhsuk-image__img" src="{{ params.src }}" alt="{{ params.alt }}" 
+  {%- if params.sizes and params.srcset -%}
+    sizes="{{ params.sizes }}" srcset="{{ params.srcset }}"
+  {%- endif -%}
+  >
   {%- if params.caption %}
   <figcaption class="nhsuk-image__caption">
     {{ params.caption | safe }}