From fb294e33486f8974b09627a154a73791c3150b6d Mon Sep 17 00:00:00 2001
From: Noah West <68435033+nWestie@users.noreply.github.com>
Date: Tue, 26 Dec 2023 13:00:38 -0500
Subject: [PATCH] Responsive image fix (#2014)

Fixes #1967

Update the way responsive images are used to only use one srcset, and
add corresponding `sizes` attribute to the relevant layouts and
templates.
I did not go through and add `sizes` to all the example posts/projects.
When `sizes` is not specified by the user, the `figure.html` template
defaults to 95% the width of the viewport which should work fine for
most cases; users can optimize further if they wish by feeding `sizes`
into the template.

Additionally:
 - Enabled support for .gif to .webp compression
- fix error in jekyll-imagemagick config where all images were resized
to be 800px or less. (for example img-1400.webp was actually only 800px
wide, etc.)
- added note about making sure imagemagick is installed before enabling
it in responsive images section of `_config.yml`
---
 _config.yml                        |  5 ++++-
 _includes/figure.html              | 23 +++++++++++------------
 _includes/projects.html            |  1 +
 _includes/projects_horizontal.html |  2 +-
 _layouts/about.html                | 12 ++++++++----
 _layouts/bib.html                  |  1 +
 _layouts/profiles.html             | 10 +++++++---
 7 files changed, 33 insertions(+), 21 deletions(-)

diff --git a/_config.yml b/_config.yml
index b06e842..0175857 100644
--- a/_config.yml
+++ b/_config.yml
@@ -329,6 +329,8 @@ external_links:
 # Responsive WebP Images
 # -----------------------------------------------------------------------------
 
+# MAKE SURE imagemagick is installed and on your PATH before enabling imagemagick. In a terminal, run:
+#   convert -version
 imagemagick:
   enabled: true # enables responsive images for your site (recommended, see https://github.com/alshedivat/al-folio/issues/537)
   widths:
@@ -342,8 +344,9 @@ imagemagick:
     - ".jpeg"
     - ".png"
     - ".tiff"
+    - ".gif"
   output_formats:
-    webp: "-resize 800x"
+    webp: "-quality 85 -strip"
 
 # -----------------------------------------------------------------------------
 # Jekyll Diagrams
diff --git a/_includes/figure.html b/_includes/figure.html
index eb3dc28..5bf766a 100644
--- a/_includes/figure.html
+++ b/_includes/figure.html
@@ -1,23 +1,22 @@
-{%- assign img_path = include.path | remove: ".jpg" | remove: ".jpeg" | remove: ".png" | remove: ".tiff" -%}
+{%- assign img_path = include.path | remove: ".jpg" | remove: ".jpeg" | remove: ".png" | remove: ".tiff" | remove: ".gif" -%}
 
 <figure>
-
   <picture>
+    <!-- Auto scaling with imagemagick -->
+    <!-- See https://www.debugbear.com/blog/responsive-images#w-descriptors-and-the-sizes-attribute and 
+      https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images for info on defining 'sizes' for responsive images-->
     {% if site.imagemagick.enabled %}
-    {% for i in site.imagemagick.widths -%}
-      <source
-        class="responsive-img-srcset"
-        media="(max-width: {{ i }}px)"
-        srcset="{{ img_path | relative_url }}-{{ i }}.webp"
-      />
-    {% endfor -%}
+      <source class = "responsive-img-srcset" srcset="
+      {% for i in site.imagemagick.widths -%}
+      {{ img_path | relative_url }}-{{ i }}.webp {{i}}w,
+      {% endfor -%}" 
+      {% if include.sizes %} sizes="{{include.sizes}}" {% else %} sizes="95vw" {% endif %}
+      type="image/webp"/>
     {% endif %}
-
-    <!-- Fallback to the original file -->
     <img
       src="{% if include.cache_bust %}{{ include.path | relative_url | bust_file_cache }}{% else %}{{ include.path | relative_url }}{% endif %}"
       {% if include.class %}class="{{ include.class }}"{% endif %}
-      {% if include.width %}width="{{ include.width }}"{% else %}width="auto"{% endif %}
+      {% if include.width %}width="{{ include.width }}"{% else %}width="100%"{% endif %}
       {% if include.height %}height="{{ include.height }}"{% else %}height="auto"{% endif %}
       {% if include.min-width %}min-width="{{ include.min-width }}"{% endif %}
       {% if include.min-height %}min-height="{{ include.min-height }}"{% endif %}
diff --git a/_includes/projects.html b/_includes/projects.html
index 36c2c34..67c22b0 100644
--- a/_includes/projects.html
+++ b/_includes/projects.html
@@ -10,6 +10,7 @@
         {%- if project.img %}
         {%- include figure.html
           path=project.img
+          sizes = "250px"
           alt="project thumbnail" -%}
         {%- endif %}
         <div class="card-body">
diff --git a/_includes/projects_horizontal.html b/_includes/projects_horizontal.html
index 5db8bcc..5df1ca9 100644
--- a/_includes/projects_horizontal.html
+++ b/_includes/projects_horizontal.html
@@ -8,7 +8,7 @@
       <div class="row g-0">
         {%- if project.img -%}
         <div class="card-img col-md-6">
-          {% include figure.html path=project.img alt="project thumbnail" %}
+          {% include figure.html path=project.img sizes="(min-width: 768px) 156px, 50vw" alt="project thumbnail" %}
         </div>
         <div class="col-md-6">
         {%- else -%}
diff --git a/_layouts/about.html b/_layouts/about.html
index 38d9c23..be84f6e 100644
--- a/_layouts/about.html
+++ b/_layouts/about.html
@@ -23,11 +23,15 @@ layout: default
                 {%- assign profile_image_class = "img-fluid z-depth-1 rounded" -%}
               {% endif %}
 
+              {% capture sizes %}(min-width: {{site.max_width}}) {{ site.max_width | minus: 30 | times: 0.3}}px, (min-width: 576px) 30vw, 95vw"{% endcapture %}
+              
               {% include figure.html
-              path=profile_image_path
-              class=profile_image_class
-              alt=page.profile.image
-              cache_bust=true -%}
+                path = profile_image_path
+                class = profile_image_class
+                sizes = sizes
+                alt = page.profile.image
+                cache_bust = true 
+              %}
             {% endif -%}
             {%- if page.profile.more_info %}
             <div class="more-info">
diff --git a/_layouts/bib.html b/_layouts/bib.html
index 2537fb9..6ef0648 100644
--- a/_layouts/bib.html
+++ b/_layouts/bib.html
@@ -11,6 +11,7 @@
             {%- assign entry_path = entry.preview | prepend: '/assets/img/publication_preview/' -%}
             {% include figure.html
             path=entry_path
+            sizes = "200px"
             class="preview z-depth-1 rounded"
             zoomable=false
             alt=entry.preview -%}
diff --git a/_layouts/profiles.html b/_layouts/profiles.html
index 40e9f38..4542fcb 100644
--- a/_layouts/profiles.html
+++ b/_layouts/profiles.html
@@ -19,10 +19,14 @@ layout: page
                 {%- assign profile_image_class = "img-fluid z-depth-1 rounded" -%}
               {% endif %}
 
+              {% capture sizes %}(min-width: {{site.max_width}}) {{ site.max_width | minus: 30 | times: 0.3}}px, (min-width: 576px) 30vw, 95vw"{% endcapture %}
+
               {% include figure.html
-              path=profile_image_path
-              class=profile_image_class
-              alt=profile.image -%}
+                path = profile_image_path
+                class = profile_image_class
+                sizes = sizes
+                alt = profile.image 
+              %}
             {% endif -%}
             {%- if profile.more_info %}
             <div class="more-info">