From bf4a8e847169596b9463a3098a32ecc4923bc638 Mon Sep 17 00:00:00 2001
From: Maruan Al-Shedivat <maruan@genesistherapeutics.ai>
Date: Thu, 25 Nov 2021 21:48:52 -0500
Subject: [PATCH] Switch to uing <picture> for responsive images

---
 _config.yml                   |  1 +
 _includes/responsive_img.html | 14 ++++++--------
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/_config.yml b/_config.yml
index 80a81ddf1911..444655ab3fda 100644
--- a/_config.yml
+++ b/_config.yml
@@ -401,6 +401,7 @@ enable_project_categories:  false   # enables categorization of projects into
 enable_medium_zoom:         true   # enables image zoom feature (as on medium.com)
 enable_progressbar:         true   # enables a horizontal progress bar linked to the vertical scroll position
 
+
 # -----------------------------------------------------------------------------
 # Library versions
 # -----------------------------------------------------------------------------
diff --git a/_includes/responsive_img.html b/_includes/responsive_img.html
index 941a851875c3..bbb45cf6519e 100644
--- a/_includes/responsive_img.html
+++ b/_includes/responsive_img.html
@@ -1,8 +1,6 @@
-{% assign largest = resized | sort: 'width' | last %}
-{% capture srcset %}
-{% for i in resized %}
-    {{ i.path | relative_url }} {{ i.width }}w,
-{% endfor %}
-{% endcapture %}
-
-<img {% if class %}class="{{ class }}"{% endif %}  src="{{ largest.path | relative_url }}" srcset="{{ srcset | strip_newlines }} {{ path | relative_url }} {{ original.width }}w" {% if alt %}alt="{{ alt }}"{% endif %} {% if title %}title="{{ title }}"{% endif %} {% if zoomable %}data-zoomable{% endif %}/>
+<picture>
+    {% for i in resized %}
+    <source media="(max-width: {{ i.width }}px)" srcset="{{ i.path | relative_url }}">
+    {% endfor %}
+    <img {% if class %}class="{{ class }}"{% endif %} src="{{ path | relative_url }}" {% if alt %}alt="{{ alt }}"{% endif %} {% if title %}title="{{ title }}"{% endif %} {% if zoomable %}data-zoomable{% endif %} />
+</picture>