Skip to content
Snippets Groups Projects
Commit 5aea6d44 authored by m26lebla's avatar m26lebla
Browse files

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

parent 389ca8e7
No related branches found
No related tags found
No related merge requests found
Showing
with 134 additions and 72 deletions
......@@ -6,6 +6,8 @@
date: date,
read_more: read_more,
tags: tags,
media: media,
sources: sources,
img_element: img_element,
alt: alt,
content: content
} %}
......@@ -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'
......@@ -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 %}
......
......@@ -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
......@@ -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 %}
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'
......@@ -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".
......
......@@ -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,
......
......@@ -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>
......@@ -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
......
......@@ -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',
......
......@@ -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>
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment