summaryrefslogtreecommitdiff
path: root/_includes
diff options
context:
space:
mode:
Diffstat (limited to '_includes')
-rw-r--r--_includes/image.html24
1 files changed, 21 insertions, 3 deletions
diff --git a/_includes/image.html b/_includes/image.html
index 4c5afc5..30af037 100644
--- a/_includes/image.html
+++ b/_includes/image.html
@@ -14,8 +14,26 @@
display: inline-block;
{% endif -%}
">
- <a href="/img/{{ include.src }}" target="_blank">
- <img style="max-height: 60vh;"
- src="/img/{{ include.src }}" alt="{{ include.descr }}" /></a>
+ <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>