From 4da5b6d6fde1c3529cc7196085e5b9ee2cad56c2 Mon Sep 17 00:00:00 2001
From: Hoernschen <julian.hoernschemeyer@mailbox.org>
Date: Sat, 13 Jan 2024 17:15:24 +0100
Subject: [PATCH] ADD resize to images script, CHANGE quality in images script,
 FIX image template to always use the optimize images if possible

---
 assets/build/images.sh                 | 15 +++++++++++++--
 layouts/partials/components/image.html | 20 +++++++++++++++++---
 2 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/assets/build/images.sh b/assets/build/images.sh
index 6e03820..515e623 100755
--- a/assets/build/images.sh
+++ b/assets/build/images.sh
@@ -1,6 +1,8 @@
 #!/bin/bash
 
-PARAMS=('-quality 90')
+# Libary needed: ImageMagick
+
+PARAMS=('-quality 60')
 
 if [ $# -ne 0 ]; then
 	PARAMS=$@;
@@ -12,9 +14,18 @@ shopt -s nullglob nocaseglob extglob
 shopt -s globstar
 
 # Resize
+sizes=(320 640 960 1280)
+for FILE in static/**/*.@(jpg|jpeg|tif|tiff|png|gif); do
+    DIR=$(dirname "$FILE")
+    NAME=$(basename "$FILE" | cut -d. -f1)
+    EXTENSION=$(basename "$FILE" | cut -d. -f2)
+    for size in ${sizes[@]}; do
+        convert "$FILE" -resize ${size}x${size}\> "${DIR}/${NAME}-${size}.${EXTENSION}" 
+    done
+done
 
 # Web Optimized Formats
-for FILE in static/**/*.@(jpg|jpeg|tif|tiff|png); do 
+for FILE in static/**/*.@(jpg|jpeg|tif|tiff|png|gif); do 
     convert $PARAMS "$FILE" "${FILE}".webp;
     convert $PARAMS "$FILE" "${FILE}".avif;
 done
\ No newline at end of file
diff --git a/layouts/partials/components/image.html b/layouts/partials/components/image.html
index ec0fb6b..4e45c45 100644
--- a/layouts/partials/components/image.html
+++ b/layouts/partials/components/image.html
@@ -4,18 +4,32 @@ url: string
 alt: string
 -->
 {{ $avatar := "avatar"}}
+{{ $sizes := slice "320" "640" "960" "1280" }}
+{{ $ext := path.Ext .url }}
+{{ $name := path.Base (replace .url $ext "") }}
+{{ $dir := path.Dir .url }}
 
 <picture>
   <source 
     type="image/avif"
-    src="{{ .url }}.avif"
+    srcset="
+      {{ range $i, $size := $sizes }}
+        {{ $dir }}/{{ $name }}-{{ $size }}{{ $ext }}.avif {{ $size }}w, 
+      {{ end }}
+      {{ .url }}.avif
+    "
   />
   <source 
     type="image/webp"
-    src="{{ .url }}.webp"
+    srcset="
+      {{ range $i, $size := $sizes }}
+        {{ $dir }}/{{ $name }}-{{ $size }}{{ $ext }}.webp {{ $size }}w, 
+      {{ end }}
+      {{ .url }}.webp
+    "
   />
   <img 
-    class="{{if eq .type $avatar}} avatar {{end}}" 
+    class="{{if eq .type $avatar}}avatar{{end}}" 
     alt="{{ .alt }}" 
     src="{{ .url }}"
     loading="lazy"