responsive-image.html 630 B

12345678910111213141516
  1. {% comment %}
  2. Render your responsive images using <picture>, with the original asset used as a fallback. Note: If your original assets are not web-friendly (e.g. they are very large), you can use a resized image as the fallback instead. See the srcset-resized-fallback.html template for how to do this.
  3. Usage:
  4. {% responsive_image path: assets/image.jpg alt: "A description of the image" %}
  5. (P.S. You can safely delete this comment block)
  6. {% endcomment %}
  7. <picture>
  8. {% for i in resized %}
  9. <source media="(min-width: {{ i.width }}px)" srcset="/{{ i.path }}">
  10. {% endfor %}
  11. <img src="/{{ path }}">
  12. </picture>