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.
|
||||
|
||||
#### Basic image tag with `srcset`
|
||||
#### Responsive images with `srcset`
|
||||
|
||||
```twig
|
||||
<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/)
|
||||
|
||||
> This template assumes an `output_path_format` of `assets/resized/%{width}/%{basename}`
|
||||
|
|
Loading…
Reference in New Issue