From 5cfce76ac1a3219fc30ae3227d1c912dd7122508 Mon Sep 17 00:00:00 2001
From: Brian Picciano <mediocregopher@gmail.com>
Date: Sat, 29 Sep 2018 15:52:27 -0400
Subject: implement responsive image sizing for mr-worldwide posts (and all
 others going forward)

---
 _includes/image.html | 24 +++++++++++++++++++++---
 1 file changed, 21 insertions(+), 3 deletions(-)

(limited to '_includes/image.html')

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>
-- 
cgit v1.2.3