Add example template with <picture> tag
This commit is contained in:
parent
9572aec2ea
commit
e997361cb5
13
README.md
13
README.md
|
@ -101,7 +101,7 @@ You can use Liquid variables as attributes with the `responsive_image_block` tag
|
||||||
|
|
||||||
You will need to create a template in order to use the `responsive_image` tag. Below are some sample templates to get you started.
|
You will need to create a template in order to use the `responsive_image` tag. Below are some sample templates to get you started.
|
||||||
|
|
||||||
#### Basic image tag with `srcset`
|
#### Responsive images with `srcset`
|
||||||
|
|
||||||
```twig
|
```twig
|
||||||
<img src="/{{ path }}"
|
<img src="/{{ path }}"
|
||||||
|
@ -111,6 +111,17 @@ You will need to create a template in order to use the `responsive_image` tag. B
|
||||||
">
|
">
|
||||||
```
|
```
|
||||||
|
|
||||||
|
#### Responsive images with `<picture>`
|
||||||
|
|
||||||
|
```twig
|
||||||
|
<picture>
|
||||||
|
{% for i in resized %}
|
||||||
|
<source media="(min-width: {{ i.width }}px)" srcset="/{{ i.path }}">
|
||||||
|
{% endfor %}
|
||||||
|
<img src="/{{ path }}">
|
||||||
|
</picture>
|
||||||
|
```
|
||||||
|
|
||||||
#### Responsive images using [Imager.js](https://github.com/BBC-News/Imager.js/)
|
#### Responsive images using [Imager.js](https://github.com/BBC-News/Imager.js/)
|
||||||
|
|
||||||
> This template assumes an `output_path_format` of `assets/resized/%{width}/%{basename}`
|
> This template assumes an `output_path_format` of `assets/resized/%{width}/%{basename}`
|
||||||
|
|
Loading…
Reference in New Issue