Resize images manually

.editorconfig

@@ -5,12 +5,15 @@ root = true
 [*]
 charset = utf-8
 end_of_line = lf
-indent_size = 2
+indent_size = 4
 indent_style = space
 insert_final_newline = true
 max_line_length = 80
 trim_trailing_whitespace = true
 
+[*.{html,js,md,toml,sass}]
+indent_size = 2
+
 [Makefile]
 indent_size = 8
 indent_style = tab

Makefile

@@ -1,4 +1,4 @@
-.PHONY: serve serve-static build setup
+.PHONY: serve serve-static build setup resize-image
 
 serve:
 	zola serve
@@ -12,3 +12,6 @@ build:
 
 setup:
 	cd static/assets && npm i --loglevel=error
+
+resize-images:
+	bin/resize-images < images.csv

bin/resize-images

@@ -0,0 +1,17 @@
+#!/bin/bash
+
+set -euo pipefail
+
+while read -r line; do
+  path_in=$(echo "$line" | awk -F ',' '{ print $1 }')
+  width=$(echo "$line" | awk -F ',' '{ print $2 }')
+  ext="${path_in##*.}"
+  path_out="${path_in%.*}--${width}x.${ext}"
+  echo "Converting $path_in"
+  gm convert "$path_in" -resize "${width}x>" "$path_out"
+  if [[ "$ext" == "jpg" ]]; then
+    jpegoptim --preserve "$path_out"
+  else
+    optipng -preserve "$path_out"
+  fi
+done

content/projects/2014-06-06-saloun/index.md

@@ -17,7 +17,7 @@ of 2014.
 - [Follow new posts using RSS](https://www.saloun.cz/feed.xml).
 
 <div>
-  {{ image(link='projects/saloun/jakub-valenta-saloun-cz.png', path='projects/2014-06-06-saloun/jakub-valenta-saloun-cz.png', width=300, alt='Šaloun AVU 2014 Żmijewski, archive, since 2014, website screenshot') }}
+  {{ image(link='projects/saloun/jakub-valenta-saloun-cz.png', path='projects/saloun/jakub-valenta-saloun-cz--300x.png', width=300, alt='Šaloun AVU 2014 Żmijewski, archive, since 2014, website screenshot') }}
 </div>
 
 <!-- more -->

content/projects/2015-02-01-papiry/index.md

@@ -12,8 +12,8 @@ In 2014 and 2015, I was printing booklets with short texts and images commenting
 on various bizarre aspects of the everyday live.
 
 <div>
-  {{ image(link='projects/papiry/jakub-valenta-papiry-galerie-1.jpg', path='projects/2015-02-01-papiry/jakub-valenta-papiry-galerie-1.jpg', width=300, alt='Jakub Valenta - Sešit = knížka = papíry = portfolio, 2014-2015, page photo') }}
-  {{ image(link='projects/papiry/jakub-valenta-papiry-galerie-2.jpg', path='projects/2015-02-01-papiry/jakub-valenta-papiry-galerie-2.jpg', width=300, alt='Jakub Valenta - Sešit = knížka = papíry = portfolio, 2014-2015, page photo') }}
+  {{ image(link='projects/papiry/jakub-valenta-papiry-galerie-1.jpg', path='projects/papiry/jakub-valenta-papiry-galerie-1--300x.jpg', width=300, alt='Jakub Valenta - Sešit = knížka = papíry = portfolio, 2014-2015, page photo') }}
+  {{ image(link='projects/papiry/jakub-valenta-papiry-galerie-2.jpg', path='projects/papiry/jakub-valenta-papiry-galerie-2--300x.jpg', width=300, alt='Jakub Valenta - Sešit = knížka = papíry = portfolio, 2014-2015, page photo') }}
 </div>
 
 <!-- more -->

content/projects/2015-02-03-notes/index.md

@@ -12,8 +12,8 @@ In 2015, I published all my notes online, specifically all the notes I made
 while working on my diploma work at the Academy of Fine Arts in Prague.
 
 <div>
-  {{ image(link='projects/notes/jakub-valenta-notes-col-1.png', path='projects/2015-02-03-notes/jakub-valenta-notes-col-1.png', width=120, alt='Jakub Valenta - Notes, 2015, website screensthot') }}
-  {{ image(link='projects/notes/jakub-valenta-notes-col-2.png', path='projects/2015-02-03-notes/jakub-valenta-notes-col-2.png', width=120, alt='Jakub Valenta - Notes, 2015, website screensthot') }}
+  {{ image(link='projects/notes/jakub-valenta-notes-col-1.png', path='projects/notes/jakub-valenta-notes-col-1--120x.png', width=120, alt='Jakub Valenta - Notes, 2015, website screensthot') }}
+  {{ image(link='projects/notes/jakub-valenta-notes-col-2.png', path='projects/notes/jakub-valenta-notes-col-2--120x.png', width=120, alt='Jakub Valenta - Notes, 2015, website screensthot') }}
 </div>
 
 <!-- more -->

content/projects/2015-06-02-strategie/index.md

@@ -14,7 +14,7 @@ meta_image = "projects/2015-06-02-strategie/jakub-valenta-strategie-website.png"
 - [View a web version of the work](https://strategie.jakubvalenta.cz/cs/).
 
 <div>
-  {{ image(link='projects/strategie/jakub-valenta-strategie-website.png', path='projects/2015-06-02-strategie/jakub-valenta-strategie-website.png', width=300, alt='Jakub Valenta - Strategie pro nezačlenění. K vašemu svobodnému užití., diplomová práce, AVU, screenshot webové verze') }}
+  {{ image(link='projects/strategie/jakub-valenta-strategie-website.png', path='projects/strategie/jakub-valenta-strategie-website--300x.png', width=300, alt='Jakub Valenta - Strategie pro nezačlenění. K vašemu svobodnému užití., diplomová práce, AVU, screenshot webové verze') }}
 </div>
 
 <!-- more -->

content/projects/2015-06-22-zku/index.md

@@ -15,7 +15,7 @@ stream from Viktor's studio in his institution *Institute for Art and
 Architecture in Zentrum für Kunst und Urbanistik* (IAUZK/U), Berlin.
 
 <div>
-  {{ image(link='projects/zku/jakub-valenta-zku-webcam.jpg', path='projects/2015-06-22-zku/jakub-valenta-zku-webcam.jpg', width=300, alt='Jakub Valenta and Viktor Vejvoda - Live broadcast from Z/KU Berlin, 2015, webcam still frame') }}
+  {{ image(link='projects/zku/jakub-valenta-zku-webcam.jpg', path='projects/zku/jakub-valenta-zku-webcam--300x.jpg', width=300, alt='Jakub Valenta and Viktor Vejvoda - Live broadcast from Z/KU Berlin, 2015, webcam still frame') }}
 </div>
 
 <!-- more -->

content/projects/2015-12-18-karlin-studios/index.md

@@ -15,9 +15,9 @@ December 18, 2015 – March 6, 2016
   text](@/projects/2015-12-18-karlin-studios/index.md#exhibition-text).
 
 <div>
-  {{ image(link='projects/karlin-studios/jakub-valenta-karlin-studios-ten-dum-sem-nepatri-video-lide-odchazeji-z-mistnosti-2.jpg', path='projects/2015-12-18-karlin-studios/jakub-valenta-karlin-studios-ten-dum-sem-nepatri-video-lide-odchazeji-z-mistnosti-2.jpg', width=250, alt='Jakub Valenta - The voice of the main and supporting characters, 2015, exhibition view, video') }}
+  {{ image(link='projects/karlin-studios/jakub-valenta-karlin-studios-ten-dum-sem-nepatri-video-lide-odchazeji-z-mistnosti-2.jpg', path='projects/karlin-studios/jakub-valenta-karlin-studios-ten-dum-sem-nepatri-video-lide-odchazeji-z-mistnosti-2--250x.jpg', width=250, alt='Jakub Valenta - The voice of the main and supporting characters, 2015, exhibition view, video') }}
   <br />
-  {{ image(link='projects/karlin-studios/jakub-valenta-karlin-studios-ten-dum-sem-nepatri-novinky-ankety-1.jpg', path='projects/2015-12-18-karlin-studios/jakub-valenta-karlin-studios-ten-dum-sem-nepatri-novinky-ankety-1.jpg', width=250, alt='Jakub Valenta - The voice of the main and supporting characters, 2015, exhibition view, installation') }}
+  {{ image(link='projects/karlin-studios/jakub-valenta-karlin-studios-ten-dum-sem-nepatri-novinky-ankety-1.jpg', path='projects/karlin-studios/jakub-valenta-karlin-studios-ten-dum-sem-nepatri-novinky-ankety-1--250x.jpg', width=250, alt='Jakub Valenta - The voice of the main and supporting characters, 2015, exhibition view, installation') }}
 </div>
 
 <!-- more -->

content/projects/2016-01-16-leaving/index.md

@@ -22,13 +22,13 @@ of privacy.
   scenes](https://github.com/jakubvalenta/tv-series-tools).
 
 <div>
-  {{ image(link='projects/leaving/jakub-valenta-leaving-website-1030x1000.jpg', path='projects/2016-01-16-leaving/jakub-valenta-leaving-website-1030x1000.jpg', width=550, alt='Jakub Valenta - People leaving the room, since 2016, website screenshot') }}
+  {{ image(link='projects/leaving/jakub-valenta-leaving-website-1030x1000.jpg', path='projects/leaving/jakub-valenta-leaving-website-1030x1000--550x.jpg', width=550, alt='Jakub Valenta - People leaving the room, since 2016, website screenshot') }}
   <br>
-  {{ image(link='projects/leaving/jakub-valenta-leaving-clip-a7bf846.jpg', path='projects/2016-01-16-leaving/jakub-valenta-leaving-clip-a7bf846.jpg', width=260, alt='Jakub Valenta - People leaving the room, since 2016, clip still frame') }}
-  {{ image(link='projects/leaving/jakub-valenta-leaving-clip-3d00110.jpg', path='projects/2016-01-16-leaving/jakub-valenta-leaving-clip-3d00110.jpg', width=260, alt='Jakub Valenta - People leaving the room, since 2016, clip still frame') }}
+  {{ image(link='projects/leaving/jakub-valenta-leaving-clip-a7bf846.jpg', path='projects/leaving/jakub-valenta-leaving-clip-a7bf846--260x.jpg', width=260, alt='Jakub Valenta - People leaving the room, since 2016, clip still frame') }}
+  {{ image(link='projects/leaving/jakub-valenta-leaving-clip-3d00110.jpg', path='projects/leaving/jakub-valenta-leaving-clip-3d00110--260x.jpg', width=260, alt='Jakub Valenta - People leaving the room, since 2016, clip still frame') }}
   <br>
-  {{ image(link='projects/leaving/jakub-valenta-leaving-clip-5e799dc.jpg', path='projects/2016-01-16-leaving/jakub-valenta-leaving-clip-5e799dc.jpg', width=260, alt='Jakub Valenta - People leaving the room, since 2016, clip still frame') }}
-  {{ image(link='projects/leaving/jakub-valenta-leaving-clip-5116f9b.jpg', path='projects/2016-01-16-leaving/jakub-valenta-leaving-clip-5116f9b.jpg', width=260, alt='Jakub Valenta - People leaving the room, since 2016, clip still frame') }}
+  {{ image(link='projects/leaving/jakub-valenta-leaving-clip-5e799dc.jpg', path='projects/leaving/jakub-valenta-leaving-clip-5e799dc--260x.jpg', width=260, alt='Jakub Valenta - People leaving the room, since 2016, clip still frame') }}
+  {{ image(link='projects/leaving/jakub-valenta-leaving-clip-5116f9b.jpg', path='projects/leaving/jakub-valenta-leaving-clip-5116f9b--260x.jpg', width=260, alt='Jakub Valenta - People leaving the room, since 2016, clip still frame') }}
 </div>
 
 <!-- more -->

content/projects/2016-01-27-novinky/index.md

@@ -17,8 +17,8 @@ January 1, 2015.
 - [Follow latest polls using RSS](https://novinky.jakubvalenta.cz/cs/feed.xml).
 
 <div>
-  {{ image(link='projects/novinky/jakub-valenta-novinky-main.png', path='projects/2016-01-27-novinky/jakub-valenta-novinky-main.png', width=400, alt='Jakub Valenta - Ankety z Novinky.cz, od 2015, screenshot webu, detail') }}
-  {{ image(link='projects/novinky/jakub-valenta-novinky-5x4.png', path='projects/2016-01-27-novinky/jakub-valenta-novinky-5x4.png', width=400, alt='Jakub Valenta - Ankety z Novinky.cz, od 2015, screenshot webu, celek') }}
+  {{ image(link='projects/novinky/jakub-valenta-novinky-main.png', path='projects/novinky/jakub-valenta-novinky-main--400x.png', width=400, alt='Jakub Valenta - Ankety z Novinky.cz, od 2015, screenshot webu, detail') }}
+  {{ image(link='projects/novinky/jakub-valenta-novinky-5x4.png', path='projects/novinky/jakub-valenta-novinky-5x4--400x.png', width=400, alt='Jakub Valenta - Ankety z Novinky.cz, od 2015, screenshot webu, celek') }}
 </div>
 
 <!-- more -->

content/projects/2016-03-24-video-pi/index.md

@@ -13,7 +13,7 @@ meta_image = "projects/2016-03-24-video-pi/jakub-valenta-video-pi.jpg"
 Video player for artists based on the RaspberryPi mini computer.
 
 <div>
-  {{ image(link='projects/video-pi/jakub-valenta-video-pi.jpg', path='projects/2016-03-24-video-pi/jakub-valenta-video-pi.jpg', width=300, alt='Jakub Valenta - Video Pi, since 2016, device photo') }}
+  {{ image(link='projects/video-pi/jakub-valenta-video-pi.jpg', path='projects/video-pi/jakub-valenta-video-pi--300x.jpg', width=300, alt='Jakub Valenta - Video Pi, since 2016, device photo') }}
 </div>
 
 <!-- more -->

content/projects/2016-06-09-account/index.md

@@ -23,9 +23,9 @@ my bank in an automated way.*
 - [View my bank account](/account).
 
 <div>
-  {{ image(link='projects/account/jakub-valenta-account-website-page-1500.png', path='projects/2016-06-09-account/jakub-valenta-account-website-page-1500.png', width=550, alt='Jakub Valenta - Account, since 2016, spreadsheet screenshot detail') }}
+  {{ image(link='projects/account/jakub-valenta-account-website-page-1500.png', path='projects/account/jakub-valenta-account-website-page-1500--550x.png', width=550, alt='Jakub Valenta - Account, since 2016, spreadsheet screenshot detail') }}
   <br>
-  {{ image(link='projects/account/jakub-valenta-account-website-detail-960.png', path='projects/2016-06-09-account/jakub-valenta-account-website-detail-960.png', width=500, alt='Jakub Valenta - Account, since 2016, spreadsheet screenshot') }}
+  {{ image(link='projects/account/jakub-valenta-account-website-detail-960.png', path='projects/account/jakub-valenta-account-website-detail-960--500x.png', width=500, alt='Jakub Valenta - Account, since 2016, spreadsheet screenshot') }}
 </div>
 
 <!-- more -->

content/projects/2019-03-12-automatic-diary/index.md

@@ -25,7 +25,7 @@ sleep, feelings, what other people did*.
   program](https://github.com/jakubvalenta/automatic-diary).
 
 <div>
-  {{ image(link='projects/automatic-diary/jakub-valenta-automatic-diary.png', path='projects/2019-03-12-automatic-diary/jakub-valenta-automatic-diary.png', width=400, alt='Jakub Valenta - Automatic Diary, 2019, timeline screenshot') }}
+  {{ image(link='projects/automatic-diary/jakub-valenta-automatic-diary.png', path='projects/automatic-diary/jakub-valenta-automatic-diary--400x.png', width=400, alt='Jakub Valenta - Automatic Diary, 2019, timeline screenshot') }}
 </div>
 
 <!-- more -->

content/projects/2019-09-06-moved/index.md

@@ -15,7 +15,7 @@ A public calendar in which I make a note every time I'm moved by something.
   phone](@/projects/2019-09-06-moved/index.md#how-to-add-the-calendar-to-your-phone).
 
 <div>
-  {{ image(link='projects/moved/jakub-valenta-moved.png', path='projects/2019-09-06-moved/jakub-valenta-moved.png', width=400, alt='Jakub Valenta - Moved, 2019, calendar app screenshot') }}
+  {{ image(link='projects/moved/jakub-valenta-moved.png', path='projects/moved/jakub-valenta-moved--400x.png', width=400, alt='Jakub Valenta - Moved, 2019, calendar app screenshot') }}
 </div>
 
 <!-- more -->

content/projects/2019-10-28-real-emoji/index.md

@@ -25,7 +25,7 @@ overly specific, too weird, too local, too personal or just forgotten.
     href="/projects/real-emoji/jakub-valenta-real-emoji-5x7.png"
     title="View the image in full size"
   >
-  {{ image(link='projects/real-emoji/jakub-valenta-real-emoji-5x7.png', path='projects/2019-10-28-real-emoji/jakub-valenta-real-emoji-5x7.png', width=500, alt='Jakub Valenta - Real Emoji, 2019, all signs') }}
+  {{ image(link='projects/real-emoji/jakub-valenta-real-emoji-5x7.png', path='projects/real-emoji/jakub-valenta-real-emoji-5x7--500x.png', width=500, alt='Jakub Valenta - Real Emoji, 2019, all signs') }}
   </a>
 </div>
 

content/projects/2020-01-27-human-activities/index.md

@@ -26,7 +26,7 @@ individuals in the current production relationships.
   information](https://github.com/jakubvalenta/human-activities).
 
 <div>
-  {{ image(link='projects/human-activities/jakub-valenta-human-activities.png', path='projects/2020-01-27-human-activities/jakub-valenta-human-activities.png', width=400, alt='Jakub Valenta and Jiří Skála - Human Activities, desktop app screenshot composition') }}
+  {{ image(link='projects/human-activities/jakub-valenta-human-activities.png', path='projects/human-activities/jakub-valenta-human-activities--400x.png', width=400, alt='Jakub Valenta and Jiří Skála - Human Activities, desktop app screenshot composition') }}
 </div>
 
 <!-- more -->

images.csv

@@ -0,0 +1,23 @@
+content/projects/2015-06-02-strategie/jakub-valenta-strategie-website.png,300
+content/projects/2019-10-28-real-emoji/jakub-valenta-real-emoji-5x7.png,500
+content/projects/2016-03-24-video-pi/jakub-valenta-video-pi.jpg,300
+content/projects/2016-06-09-account/jakub-valenta-account-website-page-1500.png,550
+content/projects/2016-06-09-account/jakub-valenta-account-website-detail-960.png,500
+content/projects/2016-01-16-leaving/jakub-valenta-leaving-website-1030x1000.jpg,550
+content/projects/2016-01-16-leaving/jakub-valenta-leaving-clip-a7bf846.jpg,260
+content/projects/2016-01-16-leaving/jakub-valenta-leaving-clip-3d00110.jpg,260
+content/projects/2016-01-16-leaving/jakub-valenta-leaving-clip-5e799dc.jpg,260
+content/projects/2016-01-16-leaving/jakub-valenta-leaving-clip-5116f9b.jpg,260
+content/projects/2020-01-27-human-activities/jakub-valenta-human-activities.png,400
+content/projects/2019-09-06-moved/jakub-valenta-moved.png,400
+content/projects/2019-03-12-automatic-diary/jakub-valenta-automatic-diary.png,400
+content/projects/2014-06-06-saloun/jakub-valenta-saloun-cz.png,300
+content/projects/2015-02-01-papiry/jakub-valenta-papiry-galerie-1.jpg,300
+content/projects/2015-02-01-papiry/jakub-valenta-papiry-galerie-2.jpg,300
+content/projects/2016-01-27-novinky/jakub-valenta-novinky-main.png,400
+content/projects/2016-01-27-novinky/jakub-valenta-novinky-5x4.png,400
+content/projects/2015-12-18-karlin-studios/jakub-valenta-karlin-studios-ten-dum-sem-nepatri-video-lide-odchazeji-z-mistnosti-2.jpg,250
+content/projects/2015-12-18-karlin-studios/jakub-valenta-karlin-studios-ten-dum-sem-nepatri-novinky-ankety-1.jpg,250
+content/projects/2015-02-03-notes/jakub-valenta-notes-col-1.png,120
+content/projects/2015-02-03-notes/jakub-valenta-notes-col-2.png,120
+content/projects/2015-06-22-zku/jakub-valenta-zku-webcam.jpg,300

templates/shortcodes/image.html

@@ -1,5 +1,3 @@
-{% set arg_width = width | default(value=10000) %}
-{% set arg_height = height | default(value=10000) %}
 {% if link -%}
 <a
   href="{{ config.base_url ~ '/' ~ link | safe }}"
@@ -7,11 +5,7 @@
 >
 {%- endif %}
   <img
-    {% if path is matching('[.](jpg|png)$') -%}
-    src="{{ resize_image(path=path, width=arg_width, height=arg_height, op='fit') | safe }}"
-    {% else -%}
     src="{{ config.base_url ~ '/' ~ path | safe }}"
-    {% endif -%}
     alt="{{ alt }}"
     {% if width %}width="{{ width }}"{% endif %}
     {% if height %}height="{{ height }}"{% endif %}