Adding the call to the responsive -image component to the card and then teaser

source/_patterns/04-components/card/card--feature/card--feature.twig

@@ -6,6 +6,8 @@
   date: date,
   read_more: read_more,
   tags: tags,
-  media: media,
+  sources: sources,
+  img_element: img_element,
+  alt: alt,
   content: content
 } %}

source/_patterns/04-components/card/card--feature/card--feature.yml

@@ -3,24 +3,40 @@ modifier_classes: 'card--feature'
 title: 'Feature Card title'
 header_level: '2'
 url: '#'
-footer: ''
+author_name: 'Author Lastname'
+author_link: '#'
+footer: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam et accumsan augue. Morbi non laoreet lorem.</p>'
 date: Thursday, September 28, 2018
 read_more: true
+show_hover: true
 tags:
   - url: '#'
     title: 'Tag 1'
+    type: 'simple'
   - url: '#'
     title: 'Tag 2'
+    type: 'simple'
   - url: '#'
     title: 'Tag 3'
+    type: 'simple'
   - url: '#'
     title: 'Tag 4'
-media: |-
-  <picture>
-     <source srcset="https://picsum.photos/1600/800?image=11" media="(min-width: 1024px)" type="image/jpeg">
-     <source srcset="https://picsum.photos/1200/600?image=11" media="(min-width: 760px)" type="image/jpeg">
-     <source srcset="https://picsum.photos/800/400?image=11" type="image/jpeg">
-     <img srcset="https://picsum.photos/1600/800?image=11" alt="Hero Image Alt Text">
-   </picture>
-content: |-
-  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam et accumsan augue. Morbi non laoreet lorem.</p>
+    type: 'simple'
+sources:
+  - srcset: '../../../../source/images/president/president_xlarge.jpg'
+    media: 'all and (min-width: 63.19rem)'
+    type: 'image/jpeg'
+  - srcset: '../../../../source/images/president/president_large.jpg'
+    media: 'all and (min-width: 49.81rem)'
+    type: 'image/jpeg'
+  - srcset: '../../../../source/images/president/president_medium.jpg'
+    media: 'all and (min-width: 30rem)'
+    type: 'image/jpeg'
+  - srcset: '../../../../source/images/president/president_small.jpg'
+    media: 'all and (min-width: 25rem)'
+    type: 'image/jpeg'
+  - srcset: '../../../../source/images/president/president_xsmall.jpg'
+    media: 'all and (min-width: 15rem)'
+    type: 'image/jpeg'
+img_element: '../../../../source/images/president/president_xlarge.jpg'
+alt: 'Alternative text'

source/_patterns/04-components/card/card.twig

@@ -28,12 +28,16 @@
                 {% endif %}
             </div>
         </div>
-        {% if media %}
+        {% if sources or img_element %}
         <div class="card__media">
             {% if url %}
             <a href="{{ url }}">
             {% endif %}
-            {{ media }}
+            {% include "@components/responsive-image/responsive-image.twig" with {
+                sources: sources,
+                img_element: img_element,
+                alt: alt
+            }%}
             {% if url %}
             </a>
             {% endif %}

source/_patterns/04-components/card/card.yml

@@ -5,7 +5,7 @@ header_level: '2'
 url: '#'
 author_name: 'Author Lastname'
 author_link: '#'
-footer: ''
+footer: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam et accumsan augue. Morbi non laoreet lorem.</p>'
 date: Thursday, September 28, 2018
 read_more: true
 show_hover: true
@@ -22,25 +22,35 @@ tags:
   - url: '#'
     title: 'Tag 4'
     type: 'simple'
-media: |-
-  <picture>
-     <source srcset="https://picsum.photos/1600/800?image=11" media="(min-width: 1024px)" type="image/jpeg">
-     <source srcset="https://picsum.photos/1200/600?image=11" media="(min-width: 760px)" type="image/jpeg">
-     <source srcset="https://picsum.photos/800/400?image=11" type="image/jpeg">
-     <img srcset="https://picsum.photos/1600/800?image=11" alt="Hero Image Alt Text">
-   </picture>
-content: |-
-  <p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be 600 characters or less.Ea sit vide commodo ancillae, pro eu quidam ancillae offendit. Odio ferri officiis an his, sit id causae partiendo accusamus, has discere expetendis ne. Per at wisi homero voluptaria, vis vidit ornatus vituperatoribus no. Labores maiestatis mei ad, cum cu exerci appareat.</p>
+sources:
+  - srcset: '../../../../source/images/president/president_xlarge.jpg'
+    media: 'all and (min-width: 63.19rem)'
+    type: 'image/jpeg'
+  - srcset: '../../../../source/images/president/president_large.jpg'
+    media: 'all and (min-width: 49.81rem)'
+    type: 'image/jpeg'
+  - srcset: '../../../../source/images/president/president_medium.jpg'
+    media: 'all and (min-width: 30rem)'
+    type: 'image/jpeg'
+  - srcset: '../../../../source/images/president/president_small.jpg'
+    media: 'all and (min-width: 25rem)'
+    type: 'image/jpeg'
+  - srcset: '../../../../source/images/president/president_xsmall.jpg'
+    media: 'all and (min-width: 15rem)'
+    type: 'image/jpeg'
+img_element: '../../../../source/images/president/president_xlarge.jpg'
+alt: 'Alternative text'
+content: '<p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be 600 characters or less.Ea sit vide commodo ancillae, pro eu quidam ancillae offendit. Odio ferri officiis an his, sit id causae partiendo accusamus, has discere expetendis ne. Per at wisi homero voluptaria, vis vidit ornatus vituperatoribus no. Labores maiestatis mei ad, cum cu exerci appareat.</p>'
 social_media:
   menu_tree:
-    - text: "Facebook"
-      url: "https://www.facebook.com/university.waterloo"
-    - text: "Twitter"
-      url: "https://twitter.com/uWaterloo"
-    - text: "YouTube"
-      url: "https://www.youtube.com/user/uwaterloo"
-    - text: "Instagram"
-      url: "https://www.instagram.com/uofwaterloo/"
-    - text: "LinkedIn"
-      url: "https://www.linkedin.com/edu/school?id=10875"
-social_media_placement: "card-footer"
\ No newline at end of file
+    - text: 'Facebook'
+      url: 'https://www.facebook.com/university.waterloo'
+    - text: 'Twitter'
+      url: 'https://twitter.com/uWaterloo'
+    - text: 'YouTube'
+      url: 'https://www.youtube.com/user/uwaterloo'
+    - text: 'Instagram'
+      url: 'https://www.instagram.com/uofwaterloo/'
+    - text: 'LinkedIn'
+      url: 'https://www.linkedin.com/edu/school?id=10875'
+social_media_placement: 'card-footer'
\ No newline at end of file

source/_patterns/04-components/responsive-image/responsive-image.twig

@@ -14,6 +14,6 @@
       <!--[if IE 9]></video><![endif]-->
     {% endif %}
     {# The controlling image, with the fallback image in srcset. #}
-    <img class="contextual-region" src="{{ img_element }}" alt="{{ alt }}">
+    <img class="uw-picture__fallback" src="{{ img_element }}" alt="{{ alt }}">
   </picture>
 {% endif %}

source/_patterns/04-components/responsive-image/responsive-image.yml

 sources:
-  - srcset: "../../../../source/images/president/president_xlarge.jpg"
-    media: "all and (min-width: 63.19em)"
-    type: "image/jpeg"
-  - srcset: "../../../../source/images/president/president_large.jpg"
-    media: "all and (min-width: 49.81em)"
-    type: "image/jpeg"
-  - srcset: "../../../../source/images/president/president_medium.jpg"
-    media: "all and (min-width: 30em)"
-    type: "image/jpeg"
-  - srcset: "../../../../source/images/president/president_small.jpg"
-    media: "all and (min-width: 25em)"
-    type: "image/jpeg"
-  - srcset: "../../../../source/images/president/president_xsmall.jpg"
-    media: "all and (min-width: 15em)"
-    type: "image/jpeg"
-img_element: "../../../../source/images/president/president_xlarge.jpg"
-alt: "Alternative text"
+  - srcset: '../../../../source/images/president/president_xlarge.jpg'
+    media: 'all and (min-width: 63.19rem)'
+    type: 'image/jpeg'
+  - srcset: '../../../../source/images/president/president_large.jpg'
+    media: 'all and (min-width: 49.81rem)'
+    type: 'image/jpeg'
+  - srcset: '../../../../source/images/president/president_medium.jpg'
+    media: 'all and (min-width: 30rem)'
+    type: 'image/jpeg'
+  - srcset: '../../../../source/images/president/president_small.jpg'
+    media: 'all and (min-width: 25rem)'
+    type: 'image/jpeg'
+  - srcset: '../../../../source/images/president/president_xsmall.jpg'
+    media: 'all and (min-width: 15rem)'
+    type: 'image/jpeg'
+img_element: '../../../../source/images/president/president_xlarge.jpg'
+alt: 'Alternative text'

source/_patterns/04-components/teaser/teaser--blog/teaser--blog.md

@@ -12,7 +12,9 @@ __Variables: (same form card)__
 * author_link:  [string] URL for the author link.
 * show_hover: [boolean] to show outline and shadow on hover
 * date: [string] Date of the card.
-* media: [string] URL for the image.
+* sources: [string] URL for the srcset of picture tag inside of responsive-image.
+* img_element: [string] Url to source of fall back image.
+* alt: [string] Alt text to the image used in the picture tag or fallback image.
 * content: [string] Content of the card.  
 * tags: [array] List of taxonomy tags
     * type: [string] Type of the tag, it will add class ".tag--type".

source/_patterns/04-components/teaser/teaser--blog/teaser--blog.twig

@@ -2,15 +2,17 @@
     card--teaser teaser--blog {{ modifier_classes }}
 {%- endset %}
 
-{% include "@components/card/card.twig" with {
+{% include "@components/teaser/teaser.twig" with {
   modifier_classes: teaser_modifier_classes,
   title: title,
   url: url,
   date: date,
   tags: tags,
-  media: media,
+  sources: sources,
+  img_element: img_element,
+  alt: alt,
+  show_hover: show_hover,
   content: content,
-  show_hover: false,
   header_level: '2',
   url: url,
   author_name: author_name,

source/_patterns/04-components/teaser/teaser--blog/teaser--blog.yml

@@ -17,13 +17,24 @@ tags:
   - url: '#'
     title: 'Tag 4'
     type: 'simple'
-media: |-
-  <picture>
-     <source srcset="https://picsum.photos/1600/800?image=11" media="(min-width: 1024px)" type="image/jpeg">
-     <source srcset="https://picsum.photos/1200/600?image=11" media="(min-width: 760px)" type="image/jpeg">
-     <source srcset="https://picsum.photos/800/400?image=11" type="image/jpeg">
-     <img srcset="https://picsum.photos/1600/800?image=11" alt="Hero Image Alt Text">
-   </picture>
+sources:
+  - srcset: '../../../../source/images/president/president_xlarge.jpg'
+    media: 'all and (min-width: 63.19rem)'
+    type: 'image/jpeg'
+  - srcset: '../../../../source/images/president/president_large.jpg'
+    media: 'all and (min-width: 49.81rem)'
+    type: 'image/jpeg'
+  - srcset: '../../../../source/images/president/president_medium.jpg'
+    media: 'all and (min-width: 30rem)'
+    type: 'image/jpeg'
+  - srcset: '../../../../source/images/president/president_small.jpg'
+    media: 'all and (min-width: 25rem)'
+    type: 'image/jpeg'
+  - srcset: '../../../../source/images/president/president_xsmall.jpg'
+    media: 'all and (min-width: 15rem)'
+    type: 'image/jpeg'
+img_element: '../../../../source/images/president/president_xlarge.jpg'
+alt: 'Alternative text for blog teaser photo'
 content: |-
   <p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be 600 characters or less.Ea sit vide commodo ancillae, pro eu quidam ancillae offendit. Odio ferri officiis an his, sit id causae partiendo accusamus, has discere expetendis ne. Per at wisi homero voluptaria, vis vidit ornatus vituperatoribus no. Labores maiestatis mei ad, cum cu exerci appareat.</p>
 

source/_patterns/04-components/teaser/teaser.md

@@ -13,7 +13,9 @@ __Variables: (same form card)__
 * date: [string] Date of the card.
 * read_more: [boolean] Whether to show the read more link.
 * footer: [string] Footer content of the card.
-* media: [string] URL for the image.
+* sources: [string] URL for the srcset of picture tag inside of responsive-image.
+* img_element: [string] Url for the fallback image.
+* alt: [string] Alt text to the image used in the picture tag or fallback image.
 * content: [string] Content of the card.
 * social_media: [array] Social media icons that can be included to card
     * text 

source/_patterns/04-components/teaser/teaser.twig

@@ -8,7 +8,9 @@
   url: url,
   date: date,
   tags: tags,
-  media: media,
+  sources: sources,
+  img_element: img_element,
+  alt: alt,
   show_hover: show_hover,
   content: content,
   header_level: '2',

source/_patterns/04-components/teaser/teaser.yml

@@ -17,12 +17,23 @@ tags:
   - url: '#'
     title: 'Tag 4'
     type: 'simple'
-media: |-
-  <picture>
-     <source srcset="https://picsum.photos/1600/800?image=11" media="(min-width: 1024px)" type="image/jpeg">
-     <source srcset="https://picsum.photos/1200/600?image=11" media="(min-width: 760px)" type="image/jpeg">
-     <source srcset="https://picsum.photos/800/400?image=11" type="image/jpeg">
-     <img srcset="https://picsum.photos/1600/800?image=11" alt="Hero Image Alt Text">
-   </picture>
+sources:
+  - srcset: '../../../../source/images/president/president_xlarge.jpg'
+    media: 'all and (min-width: 63.19rem)'
+    type: 'image/jpeg'
+  - srcset: '../../../../source/images/president/president_large.jpg'
+    media: 'all and (min-width: 49.81rem)'
+    type: 'image/jpeg'
+  - srcset: '../../../../source/images/president/president_medium.jpg'
+    media: 'all and (min-width: 30rem)'
+    type: 'image/jpeg'
+  - srcset: '../../../../source/images/president/president_small.jpg'
+    media: 'all and (min-width: 25rem)'
+    type: 'image/jpeg'
+  - srcset: '../../../../source/images/president/president_xsmall.jpg'
+    media: 'all and (min-width: 15rem)'
+    type: 'image/jpeg'
+img_element: '../../../../source/images/president/president_xlarge.jpg'
+alt: 'Alternative text'
 content: |-
   <p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be 600 characters or less.Ea sit vide commodo ancillae, pro eu quidam ancillae offendit. Odio ferri officiis an his, sit id causae partiendo accusamus, has discere expetendis ne. Per at wisi homero voluptaria, vis vidit ornatus vituperatoribus no. Labores maiestatis mei ad, cum cu exerci appareat.</p>