Created
June 20, 2019 09:55
-
-
Save zerolab/373732895794bb6ad8a96c61b68fb02a to your computer and use it in GitHub Desktop.
Wagtail responsive image tag
This file contains hidden or 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
<div class="my-responsive-image"> | |
{% comment %} | |
Use the responsive image tag to generate an image object with various sources. | |
Declare the image tag separately to strip out width and height attributes that get added by default and which aren't appropriate | |
for a responsive image | |
{% endcomment %} | |
{% responsiveimage value.responsiveimage width-1000 srcset="width-200 200w, width-500 500w, width-750 750w" sizes="(min-width: 1025px) 60vw, 100vw" %} | |
{% comment %} | |
{% responsiveimage value.responsiveimage width-1000 as responsive_image %} | |
<img src="{{responsive_image.url}}" alt="{{ responsive_image.alt }}" srcset="width-200 200w, width-500 500w, width-750 750w" sizes="(min-width: 1025px) 60vw, 100vw" /> | |
{% endcomment %} | |
</div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment