mediocre-blog/_includes/image.html

40 lines
1.2 KiB
HTML

<div style="
box-sizing: border-box;
text-align: center;
padding-left: 2em;
padding-right: 2em;
margin-bottom: 1em;
{%- if include.float %}
float: {{ include.float }};
{% endif -%}
{%- if include.float or include.inline %}
max-width: 49%;
{% endif -%}
{%- if include.inline %}
display: inline-block;
{% endif -%}
">
<a href="/img/{{ include.dir }}/{{ include.file }}" target="_blank">
<picture>
{%- if include.width %}
{%- for targetWidth in site.img_widths reversed -%}
{% if include.width <= targetWidth %}{% continue %}{% endif %}
{%- if targetWidth > 1000 %}
<source media="(min-width: 1000px) and (min-resolution: {{ targetWidth | divided_by: 1000.0 }}dppx)"
{%- elsif targetWidth > 500 %}
<source media="(min-width: 500px), (min-resolution: 1.1dppx)"
{%- else %}
<source
{% endif %}
srcset="/img/{{ include.dir }}/{{ targetWidth }}px/{{ include.file }}"
>
{%- endfor %}
{%- endif %}
<img style="max-height: 60vh;"
src="/img/{{ include.dir }}/{{ include.file }}"
alt="{{ include.descr }}" />
</picture>
</a>
{%- if include.descr %}<br/><em>{{ include.descr }}</em>{%- endif %}
</div>