Responsive Image Component

components/_patterns/01-atoms/04-images/00-image/image.yml → components/_patterns/01-atoms/04-images/00-image/00-responsive-image.yml

@@ -1,5 +1,5 @@
 img_src:
-  https://placeimg.com/1200/800/tech
+  https://placeimg.com/1200/500
 img_alt:
   "This is the alt text"
 img_url:

components/_patterns/01-atoms/04-images/00-image/02-figure.yml

@@ -0,0 +1,5 @@
+img_url: "#"
+img_src: "https://placeimg.com/1200/200/tech"
+img_alt: "This is the alt text"
+img_caption: "This is an image caption."
+output_image_tag: TRUE

components/_patterns/01-atoms/04-images/00-image/_image.scss

@@ -1,9 +1,18 @@
 @mixin img {
+  display: block;
   height: auto;
   max-width: 100%;
 }
 
-.img,
-.image__img {
+img,
+picture {
   @include img;
 }
+
+figure {
+  margin: 0; //override normalize
+}
+
+.figure__caption {
+  font-style: italic;
+}

components/_patterns/01-atoms/04-images/00-image/_image.twig

@@ -0,0 +1,18 @@
+{% set image_base_class = image_base_class|default('img') %}
+
+<img
+  {{ bem(image_base_class, (image_modifiers), image_blockname) }}
+  {% if img_srcset %}
+    srcset="{{ img_srcset }}"
+  {% endif %}
+  {% if img_sizes %}
+    sizes="{{ img_sizes }}"
+  {% endif %}
+  src="{{ img_src }}"
+  {% if img_alt %}
+    alt="{{ img_alt }}"
+  {% endif %}
+  {% if img_title %}
+    title="{{ img_title }}"
+  {% endif %}
+/>

components/_patterns/01-atoms/04-images/00-image/_picture.twig

@@ -0,0 +1,21 @@
+{% set picture_base_class = picture_base_class|default('picture') %}
+
+<picture
+  {{ bem(picture_base_class, (picture_modifiers), picture_blockname) }}
+>
+  {% if sources %}
+    {#
+    Internet Explorer 9 doesn't recognise source elements that are wrapped in
+    picture tags. See http://scottjehl.github.io/picturefill/#ie9
+    #}
+    <!--[if IE 9]><video style="display: none;"><![endif]-->
+    {% for source_attributes in sources %}
+      <source{{ source_attributes }}/>
+    {% endfor %}
+    <!--[if IE 9]></video><![endif]-->
+  {% endif %}
+  {# The controlling image, with the fallback image in srcset. #}
+  {% include "@atoms/04-images/00-image/_image.twig" with {
+    image_blockname: picture_image_blockname|default(picture_blockname),
+  } %}
+</picture>

components/_patterns/01-atoms/04-images/00-image/figure.md

@@ -0,0 +1,6 @@
+---
+title: Figure
+---
+### How to use the figure element
+
+The figure element includes the image element as well as an image caption.

components/_patterns/01-atoms/04-images/00-image/figure.twig

@@ -0,0 +1,24 @@
+{% set image_figure_base_class = image_figure_base_class|default('figure') %}
+{% set image_link_base_class = image_link_base_class|default('link') %}
+
+<figure
+  {{ bem(image_figure_base_class, (image_figure_modifiers), image_figure_blockname) }}
+>
+  {% if img_url %}
+    <a {{ bem(image_link_base_class, (image_link_modifiers), image_link_blockname|default(image_figure_base_class)) }} href="{{ img_url }}">
+  {% endif %}
+      {% block figure_content %}
+        {% include "@atoms/04-images/00-image/responsive-image.twig" with {
+          responsive_image_blockname: responsive_image_blockname|default(image_figure_base_class),
+        } %}
+      {% endblock %}
+  {% if img_url %}
+    </a>
+  {% endif %}
+
+  {% if img_caption %}
+    <figcaption {{ bem('caption', (figcaption_modifiers), figcaption_blockname|default(image_figure_base_class)) }}>
+      {{ img_caption }}
+    </figcaption>
+  {% endif %}
+</figure>

components/_patterns/01-atoms/04-images/00-image/responsive-image.md

@@ -0,0 +1,11 @@
+---
+title: Image (responsive support)
+---
+### Background
+There are two key files for controlling the output of images. The first is `_image.twig` (basic `<img>` tag) and `responsive-image.twig`, which relies on the first file. You can include either depending on your need.
+
+### Responsive (srcset)
+As in the past, any image element can include the basic img tag attributes (src, alt, title) as well as the following responsive attributes: `img_srcset` and `img_sizes`. However, in order to use the srcset approach, you need to set `output_image_tag` to TRUE (see `components/_patterns/01-atoms/04-images/00-image/02-figure.yml`) for an example.
+
+### Responsive (picture)
+If you don't set `output_image_tag`, then the responsive image usage will default to using the `<picture>` element.

components/_patterns/01-atoms/04-images/00-image/responsive-image.twig

@@ -0,0 +1,42 @@
+{#
+/**
+ * @file
+ * Default theme implementation of a responsive image.
+ *
+ * Available variables:
+ * - sources: The attributes of the <source> tags for this <picture> tag.
+ * - img_element: The controlling image, with the fallback image in srcset.
+ * - output_image_tag: Whether or not to output an <img> tag instead of a
+ *   <picture> tag.
+ *
+ * @see template_preprocess()
+ * @see template_preprocess_responsive_image()
+ *
+ * @ingroup themeable
+ */
+#}
+{% set responsive_image_base_class = responsive_image_base_class|default('image') %}
+
+{% if output_image_tag %}
+  {% include "@atoms/04-images/00-image/_image.twig" with {
+    image_base_class: responsive_image_base_class,
+    image_modifiers: responsive_image_modifiers,
+    image_blockname: responsive_image_blockname,
+    img_srcset: img_srcset|default(img_element['#attributes'].srcset),
+    img_sizes: img_sizes|default(img_element['#attributes'].sizes),
+    img_src: img_src|default(img_element['#uri']),
+    img_alt: img_alt|default(img_element['#alt']),
+    img_title: img_title|default(img_element['#title']),
+  } %}
+{% else %}
+  {% include "@atoms/04-images/00-image/_picture.twig" with {
+    picture_base_class: responsive_image_base_class,
+    picture_modifiers: responsive_image_modifiers,
+    picture_blockname: responsive_image_blockname,
+    img_srcset: img_srcset|default(img_element['#attributes'].srcset),
+    img_sizes: img_sizes|default(img_element['#attributes'].sizes),
+    img_src: img_src|default(img_element['#uri']),
+    img_alt: img_alt|default(img_element['#alt']),
+    img_title: img_title|default(img_element['#title']),
+  } %}
+{% endif %}

components/_patterns/02-molecules/card/01-card.twig

@@ -8,6 +8,7 @@
  * - card_img_src - the actual image file location
  * - card_img_alt - (optional) the alt text for screen readers and when the image cannot load
  * - card_img_url - Url the image should link to. Defaults to card_link_url
+ * - card_image_output_image_tag: whether to print the picture element or not
  *
  * - card_copy_base_class - base classname of the copy wrapper - defaults to 'card__copy'
  * - card_copy_modifiers - array of modifiers to add to the base classname of the copy wrapper
@@ -47,12 +48,13 @@
 
 <div {{ bem(card_base_class, (card_modifiers), card_blockname) }}>
   {% if card_img_src %}
-    {% include "@atoms/04-images/00-image/image.twig" with {
+    {% include "@atoms/04-images/00-image/responsive-image.twig" with {
       "img_url": card_img_url|default(card_link_url),
       "img_src": card_img_src,
       "img_alt": card_img_alt,
       "image_link_blockname": card_base_class,
       "image_blockname": card_base_class,
+      "output_image_tag": card_image_output_image_tag,
     } %}
   {% endif %}
   <div {{ bem(card_copy_base_class|default('card__copy'), (card_copy_modifiers), card_copy_blockname) }}>

components/_patterns/02-molecules/card/card.yml

@@ -5,6 +5,7 @@ card_img_src:
   "https://placeimg.com/1280/720/nature"
 card_img_alt:
   "This is the card image's alt text"
+card_image_output_image_tag: TRUE
 
 # Title
 card_label:

components/_patterns/03-organisms/card-grid/card-grid.twig

@@ -15,6 +15,7 @@
         "card_subtitle": card.card_subtitle,
         "card_body": card.card_body,
         "card_link_url": card.card_link_url,
+        "card_image_output_image_tag": card.card_image_output_image_tag,
       } %}
     {% endfor %}
   {% endif %}

components/_patterns/03-organisms/card-grid/card-grid.yml

@@ -8,6 +8,7 @@ cards:
       1: "grid-item"
     card_img_src:
       "https://placeimg.com/480/300/people"
+    card_image_output_image_tag: TRUE
     card_title:
       "This is a title too"
     card_title_modifiers:
@@ -24,6 +25,7 @@ cards:
       1: "grid-item"
     card_img_src:
       "https://placeimg.com/480/300/people"
+    card_image_output_image_tag: TRUE
     card_title:
       "This is a title too"
     card_title_modifiers:
@@ -38,6 +40,7 @@ cards:
       1: "grid-item"
     card_img_src:
       "https://placeimg.com/480/300/people"
+    card_image_output_image_tag: TRUE
     card_title:
       "This is a title too"
     card_title_modifiers:

components/_patterns/04-templates/example/example.twig

@@ -29,6 +29,7 @@
       1: {
         "card_modifiers": ["grid-item", "divider-3"],
         "card_img_src": img.square.src,
+        "card_image_output_image_tag": TRUE,
         "card_title": "Lorem ipsum dolor sit amet",
         "card_link_url": "#",
         "card_subtitle": "Dolor sit amet",
@@ -37,6 +38,7 @@
       2: {
         "card_modifiers": ["grid-item","divider-3"],
         "card_img_src": img.square.src,
+        "card_image_output_image_tag": TRUE,
         "card_title": "Lorem ipsum dolor sit amet",
         "card_link_url": "#",
         "card_subtitle": "Dolor sit amet",
@@ -45,6 +47,7 @@
       3: {
         "card_modifiers": ["grid-item","divider-3"],
         "card_img_src": img.square.src,
+        "card_image_output_image_tag": TRUE,
         "card_title": "Lorem ipsum dolor sit amet",
         "card_link_url": "#",
         "card_subtitle": "Dolor sit amet",

components/_patterns/05-pages/example/example.twig

@@ -29,6 +29,7 @@
       1: {
         "card_modifiers": ["grid-item", "divider-3"],
         "card_img_src": "https://placeimg.com/480/480/people",
+        "card_image_output_image_tag": TRUE,
         "card_title": "This is the first review",
         "card_link_url": "#",
         "card_subtitle": "About this thing",
@@ -37,6 +38,7 @@
       2: {
         "card_modifiers": ["grid-item","divider-3"],
         "card_img_src": "https://placeimg.com/480/480/people",
+        "card_image_output_image_tag": TRUE,
         "card_title": "This is the second review",
         "card_link_url": "#",
         "card_subtitle": "About this other thing",
@@ -45,6 +47,7 @@
       3: {
         "card_modifiers": ["grid-item","divider-3"],
         "card_img_src": "https://placeimg.com/480/480/people",
+        "card_image_output_image_tag": TRUE,
         "card_title": "The Final Review",
         "card_link_url": "#",
         "card_subtitle": "Is the most interesting",

emulsify.breakpoints.yml

@@ -1,16 +1,16 @@
 # Breakpoints - change based on site need
-emulsify.large:
-  label: large
-  mediaQuery: 'all and (min-width: 61.25em)'
-emulsify.medium:
-  label: medium
-  mediaQuery: 'all and (min-width: 48em)'
-emulsify.small-large:
-  label: small-large
-  mediaQuery: 'all and (min-width: 41em)'
-emulsify.small-med:
-  label: small-med
-  mediaQuery: 'all and (min-width: 26em)'
 emulsify.small:
   label: small
   mediaQuery: 'all and (min-width: 25em)'
+emulsify.small-med:
+  label: small-med
+  mediaQuery: 'all and (min-width: 26em)'
+emulsify.small-large:
+  label: small-large
+  mediaQuery: 'all and (min-width: 41em)'
+emulsify.medium:
+  label: medium
+  mediaQuery: 'all and (min-width: 48em)'
+emulsify.large:
+  label: large
+  mediaQuery: 'all and (min-width: 61.25em)'

templates/media/responsive-image.html.twig

@@ -0,0 +1,18 @@
+{#
+/**
+ * @file
+ * Default theme implementation of a responsive image.
+ *
+ * Available variables:
+ * - sources: The attributes of the <source> tags for this <picture> tag.
+ * - img_element: The controlling image, with the fallback image in srcset.
+ * - output_image_tag: Whether or not to output an <img> tag instead of a
+ *   <picture> tag.
+ *
+ * @see template_preprocess()
+ * @see template_preprocess_responsive_image()
+ *
+ * @ingroup themeable
+ */
+#}
+{% include "@atoms/04-images/00-image/responsive-image.twig" %}