This repository has been archived by the owner on Mar 31, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 70
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #187 from fourkitchens/responsive-images
Responsive Image Component
- Loading branch information
Showing
19 changed files
with
183 additions
and
62 deletions.
There are no files selected for viewing
2 changes: 1 addition & 1 deletion
2
...rns/01-atoms/04-images/00-image/image.yml → ...4-images/00-image/00-responsive-image.yml
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
5 changes: 5 additions & 0 deletions
5
components/_patterns/01-atoms/04-images/00-image/02-figure.yml
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 |
13 changes: 11 additions & 2 deletions
13
components/_patterns/01-atoms/04-images/00-image/_image.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; | ||
} |
18 changes: 18 additions & 0 deletions
18
components/_patterns/01-atoms/04-images/00-image/_image.twig
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 %} | ||
/> |
21 changes: 21 additions & 0 deletions
21
components/_patterns/01-atoms/04-images/00-image/_picture.twig
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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. |
24 changes: 24 additions & 0 deletions
24
components/_patterns/01-atoms/04-images/00-image/figure.twig
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> |
46 changes: 0 additions & 46 deletions
46
components/_patterns/01-atoms/04-images/00-image/image.twig
This file was deleted.
Oops, something went wrong.
11 changes: 11 additions & 0 deletions
11
components/_patterns/01-atoms/04-images/00-image/responsive-image.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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. |
42 changes: 42 additions & 0 deletions
42
components/_patterns/01-atoms/04-images/00-image/responsive-image.twig
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 %} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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)' |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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" %} |