Hopiu/wagtail
1
0
Fork 0
mirror of https://github.com/Hopiu/wagtail.git synced 2026-05-01 20:14:55 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add documentation for how to use alternative image tags

Browse source 
This adds documentation for alternative image tags such as `<picture>`
and `<amp-img>`.
This commit is contained in:
Karl Hobley 2019-09-27 14:14:05 +01:00 committed by Matt Westcott
parent 302d22e252
commit abbbceb389
1 changed files with 23 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
docs/topics/images.rst
View file

@ -204,6 +204,29 @@ Therefore, if you'd added the field ``author`` to your AbstractImage in the abov
The image property used for the ``src`` attribute is actually ``image.url``, not ``image.src``.
Alternative HTML tags
`````````````````````
The `as` syntax also allows alternative HTML image tags (such as `<picture>` or `<amp-img>`) to be used.
For example, to use the `<picture>` tag.
.. code-block:: html+django
<picture>
{% image page.photo width-800 as wide_photo %}
<source srcset="{{ wide_photo.url }}" media="(min-width: 800px)">
{% image page.photo width-400 %}
</picture>
And to use the `<amp-img>` tag.
.. code-block:: html+django
{% image page.photo width-400 as photo %}
<amp-img src="{{ photo.url }}" width="{{ photo.width }}"
height="{{ photo.height }}" alt="{{ photo.alt }}">
The ``attrs`` shortcut
-----------------------