implement responsive image sizing for mr-worldwide posts (and all others going forward)

_config.yml

@@ -16,3 +16,11 @@ plugins:
  - jekyll-paginate
 
 date_format: "%b %-d, %Y"
+
+img_widths:
+    - 500
+    - 1000
+    - 1500
+    - 2000
+    - 2500
+    - 3000

_drafts/mr-worldwide-pt-1-europe.md

@@ -114,7 +114,7 @@ down to the center of the city, and she showed me around the sights, like
 Marienplatz and the Frauenkirche (one of many famous churches in Munich).
 
 {% include image.html
-    src="mr-worldwide/munich-victory-gate-2018.jpg"
+    dir="mr-worldwide" file="munich-victory-gate-2018.jpg" width=4048
     descr="Siegestor (Victory Gate), Munich, 2018"
     %}
 
@@ -127,7 +127,7 @@ all; like how even in a large city like Munich everything can still be closed on
 a Sunday.
 
 {% include image.html
-    src="mr-worldwide/munich-moosach-2018.jpg"
+    dir="mr-worldwide" file="munich-moosach-2018.jpg" width=3036
     descr="Moosach neighborhood, Munich, 2018"
     float="right"
     %}
@@ -405,12 +405,12 @@ constructed using private funds and donations since then.
 
 <div style="text-align: center;">
 {% include image.html
-    src="mr-worldwide/sagrada-familia-outside-2018-0.jpg"
+    dir="mr-worldwide" file="sagrada-familia-outside-2018-0.jpg" width=1080
     inline=true
     %}
 
 {% include image.html
-    src="mr-worldwide/sagrada-familia-outside-2018-1.jpg"
+    dir="mr-worldwide" file="sagrada-familia-outside-2018-1.jpg" width=1080
     inline=true
     %}
 <p><em>Outside faces of La Sagrada Familia, Barcelona, 2018</em></p>
@@ -423,19 +423,19 @@ be like.
 
 <div style="text-align: center;">
 {% include image.html
-    src="mr-worldwide/sagrada-familia-inside-2018-0.jpg"
+    dir="mr-worldwide" file="sagrada-familia-inside-2018-0.jpg" width=1080
     inline=true
     %}
 {% include image.html
-    src="mr-worldwide/sagrada-familia-inside-2018-1.jpg"
+    dir="mr-worldwide" file="sagrada-familia-inside-2018-1.jpg" width=1080
     inline=true
     %}
 {% include image.html
-    src="mr-worldwide/sagrada-familia-inside-2018-2.jpg"
+    dir="mr-worldwide" file="sagrada-familia-inside-2018-2.jpg" width=1080
     inline=true
     %}
 {% include image.html
-    src="mr-worldwide/sagrada-familia-inside-2018-3.jpg"
+    dir="mr-worldwide" file="sagrada-familia-inside-2018-3.jpg" width=1080
     inline=true
     %}
 <p><em>The incredible interior of La Sagrada Familia, Barcelona, 2018</em></p>
@@ -481,7 +481,7 @@ completely different. We saw some of the things a tourist is supposed to see,
 like the opera house, the palace, and whatever this building is:
 
 {% include image.html
-    src="mr-worldwide/madrid-2018.jpg"
+    dir="mr-worldwide" file="madrid-2018.jpg" width=3036
     descr="This Schweppes building is called the Edificio Carrión, and is famous for reasons. Madrid, 2018"
     %}
 
@@ -569,7 +569,7 @@ the people had dug out caves in the side of the mountain, and made them into
 homes. My hostel was in one of these caves.
 
 {% include image.html
-    src="mr-worldwide/granada-2018-0.jpg"
+    dir="mr-worldwide" file="granada-2018-0.jpg" width=1329
     descr="The view from my hostel, Alhambra on the left. Granada, 2018"
     %}
 
@@ -601,7 +601,7 @@ number of tickets per day to get inside the castle, so I missed a lot of it. So
 I went back to the peace and quiet of Sacromonte.
 
 {% include image.html
-    src="mr-worldwide/granada-2018-1.jpg"
+    dir="mr-worldwide" file="granada-2018-1.jpg" width=1329
     descr="Sacromonte and the valley below. Granada, 2018"
     %}
 
@@ -637,7 +637,7 @@ in the country, and 9th most visited city in Southern Europe, it still feels
 quiet and cozy.
 
 {% include image.html
-    src="mr-worldwide/lisbon-2018.jpg"
+    dir="mr-worldwide" file="lisbon-2018.jpg" width=1772
     descr="The facade of a museum I was too poor to go in. Lisbon, 2018"
     %}
 
@@ -669,11 +669,11 @@ spun his wheels on the same problems for most of his life.
 
 <div style="text-align: center;">
 {% include image.html
-    src="mr-worldwide/lisbon-escher-2018-0.jpg"
+    dir="mr-worldwide" file="lisbon-escher-2018-0.jpg" width=513
     inline=true
     %}
 {% include image.html
-    src="mr-worldwide/lisbon-escher-2018-1.jpg"
+    dir="mr-worldwide" file="lisbon-escher-2018-1.jpg" width=341
     inline=true
     %}
 <p><em>Tesselations, paradoxes, and tricks of perspective, Lisbon, 2018</em></p>

_includes/image.html

@@ -14,8 +14,26 @@
   display: inline-block;
   {% endif -%}
   ">
-  <a href="/img/{{ include.src }}" target="_blank">
+  <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.src }}" alt="{{ include.descr }}" /></a>
+           src="/img/{{ include.dir }}/{{ include.file }}"
+           alt="{{ include.descr }}" />
+    </picture>
+  </a>
   {%- if include.descr %}<br/><em>{{ include.descr }}</em>{%- endif %}
 </div>

_posts/2018-09-20-mr-worldwide-pt-0.md

@@ -13,7 +13,7 @@ for my entire life, up until that point, and it felt like a change was needed.
 Denver was certainly a change, and ultimately I think it was one in the right
 direction, but it turned out to not be enough.
 
-{% include image.html src="mr-worldwide/denver-2017.jpg" %}
+{% include image.html dir="mr-worldwide" file="denver-2017.jpg" width=1696 %}
 
 While in Denver I'd rented a tiny studio apartment, which over the
 course of two years I'd learned to live in. Living large is pretty easy; for
@@ -51,7 +51,7 @@ because of how much time I was able to spend exploring (rather than being cooped
 up working).
 
 {% include image.html
-    src="mr-worldwide/kyoto-2017.jpg"
+    dir="mr-worldwide" file="kyoto-2017.jpg" width=5257
     descr="Kyoto at sunset, 2017" %}
 
 By the end of 2016 I knew I wanted to travel and see as much as possible, while
@@ -78,7 +78,7 @@ gave me a small notebook to take notes in as I traveled, with some helpful
 phrases that might aid me along the way
 
 {% include image.html
-    src="mr-worldwide/notebook.jpg"
+    dir="mr-worldwide" file="notebook.jpg" width=3036
     descr="Ibrahim made sure I was covered if I ever found myself in a tight spot"
     %}
 
@@ -104,13 +104,13 @@ some things with you. The big bag/day bag combo is a classic amongst ~~the
 homeless~~ backpackers.
 
 {% include image.html
-    src="mr-worldwide/loadout-packed.jpg"
+    dir="mr-worldwide" file="loadout-packed.jpg" width=4048
     descr="All packed up, one for overhead and the other for under the seat"
     inline=true
     %}
 
 {% include image.html
-    src="mr-worldwide/loadout-unpacked.jpg"
+    dir="mr-worldwide" file="loadout-unpacked.jpg" width=4048
     descr="(Almost) everything, unpacked"
     inline=true
     %}

pic-resize.sh

@@ -0,0 +1,39 @@
+#!/bin/sh
+
+# requires imagemagick and perl-image-exiftool
+
+set -e
+
+widths="500 1000 1500 2000 2500 3000"
+
+for img in $@; do
+    echo $img
+
+    # make target directories
+    dir=$(dirname "$img") # gets directory
+    for targetWidth in $widths; do
+        mkdir -p $dir/${targetWidth}px
+    done
+
+    # get width
+    width=$(identify "$img" | awk '{print $3}' | cut -dx -f1)
+    echo -e "\toriginal width: $width"
+
+    echo -e "\tremoving metadata"
+    exiftool -all= "$img"
+    rm -f "${img}_original" # exiftool makes a copy of the original, delete it
+
+    for targetWidth in $widths; do
+        targetFile=$dir/${targetWidth}px/$(basename "$img")
+        echo -en "\tresizing into $targetFile... "
+        if [ "$targetWidth" -ge "$width" ]; then
+            echo "skipping, original image too small"
+            continue
+        elif [ -e "$targetFile" ]; then
+            echo "skipping, target file exists"
+            continue
+        fi
+        convert "$img" -resize $targetWidth "$targetFile"
+        echo "done"
+    done
+done