44 lines
1.4 KiB
HTML
44 lines
1.4 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;"
|
|
{% if include.width < 1000 %}
|
|
src="/img/{{ include.dir }}/{{ include.file }}"
|
|
{% else %}
|
|
src="/img/{{ include.dir }}/1000px/{{ include.file }}"
|
|
{% endif %}
|
|
alt="{{ include.descr }}" />
|
|
</picture>
|
|
</a>
|
|
{%- if include.descr %}<br/><em>{{ include.descr }}</em>{%- endif %}
|
|
</div>
|