From 1e4e147d8fa346804bc36f71ca546185300c7576 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                   |  2 ++
 _includes/responsive_img.html | 14 ++++++--------
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/_config.yml b/_config.yml
index 935b69d0d02d..81e858db3fa8 100644
--- a/_config.yml
+++ b/_config.yml
@@ -232,6 +232,7 @@ jekyll-diagrams:
     # configuration, see https://github.com/zhustec/jekyll-diagrams.
     # feel free to comment out this section if not using jekyll diagrams.
 
+
 # -----------------------------------------------------------------------------
 # Optional Features
 # -----------------------------------------------------------------------------
@@ -249,6 +250,7 @@ enable_project_categories:  true   # enables categorization of projects into
                                    # multiple categories
 enable_medium_zoom:         true   # enables image zoom feature (as on medium.com)
 
+
 # -----------------------------------------------------------------------------
 # 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>