website-public/_includes/responsive-image.html

22 lines
1.0 KiB
HTML

{% capture srcset %}
{% for i in resized %}
/{{ i.path }} {{ i.width }}w,
{% endfor %}
{% endcapture %}
{% assign smallest = resized | sort: 'width' | first %}^
{% if figure -%}
<figure role="group">
{% if target_width -%}
<img style="max-width: {{ target_width }};" src="/{{ smallest.path }}" alt="{{ alt }}" srcset="{{ srcset | strip_newlines }} /{{ path }} {{ original.width }}w" sizes="(min-width: 1150px) 1150px, (min-width: 600px) 600px" class="{{ class }}" />
{% else -%}
<img src="/{{ smallest.path }}" alt="{{ alt }}" srcset="{{ srcset | strip_newlines }} /{{ path }} {{ original.width }}w" sizes="(min-width: 1150px) 1150px, (min-width: 600px) 600px" class="{{ class }}" />
{% endif -%}
<figcaption>{% if caption %}{{ caption }}{% else %}{{ alt }}{% endif %}</figcaption>
</figure>
{% else -%}
<img src="/{{ smallest.path }}" alt="{{ alt }}" srcset="{{ srcset | strip_newlines }} /{{ path }} {{ original.width }}w" sizes = "(min-width: 1150px) 1150px, (min-width: 600px) 600px" class="{{ class }}" />
{% endif -%}