From 4b448f3415ba2f2ed86cbdab35afbfadc46dae31 Mon Sep 17 00:00:00 2001
From: Christoph Hagen <github@christophhagen.de>
Date: Tue, 14 Jan 2025 20:19:30 +0100
Subject: [PATCH] Add image aspect ratio to prevent page jumps

---
 CHDataManagement/Generator/ImageSet.swift         |  5 ++++-
 CHDataManagement/Main/MainView.swift              |  1 -
 CHDataManagement/Model/FileResource.swift         | 15 +++++++++++++--
 .../ContentElements/Images/ImageGallery.swift     |  6 +++++-
 4 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/CHDataManagement/Generator/ImageSet.swift b/CHDataManagement/Generator/ImageSet.swift
index 7d59567..e635f85 100644
--- a/CHDataManagement/Generator/ImageSet.swift
+++ b/CHDataManagement/Generator/ImageSet.swift
@@ -52,10 +52,13 @@ struct ImageSet: HtmlProducer {
         let prefix1x = "/\(image.outputImageFolder)/\(maxWidth)x\(maxHeight)"
         let prefix2x = "/\(image.outputImageFolder)/\(maxWidth*2)x\(maxHeight*2)"
 
+        let imageSize = (image.getImageDimensions()?.scaledToFit(in: .init(width: maxWidth, height: maxHeight)))
+            .map { " width='\(Int($0.width))' height='\(Int($0.height))'" }
+
         result += "<picture>"
         result += "<source type='image/avif' srcset='\(prefix1x).avif 1x, \(prefix2x).avif 2x'/>"
         result += "<source type='image/webp' srcset='\(prefix1x).webp 1x, \(prefix1x).webp 2x'/>"
-        result += "<img srcset='\(prefix2x)\(fileExtension) 2x' src='\(prefix1x)\(fileExtension)' loading='lazy'\(imageAltText)\(extraAttributes)/>"
+        result += "<img srcset='\(prefix2x)\(fileExtension) 2x' src='\(prefix1x)\(fileExtension)'\(imageSize ?? "") loading='lazy'\(imageAltText)\(extraAttributes)/>"
         result += "</picture>"
     }
 }
diff --git a/CHDataManagement/Main/MainView.swift b/CHDataManagement/Main/MainView.swift
index 085d700..e1684c7 100644
--- a/CHDataManagement/Main/MainView.swift
+++ b/CHDataManagement/Main/MainView.swift
@@ -21,7 +21,6 @@ import SFSafeSymbols
  - Graphs, Map, GPX for hikes
 
     **Generation**
- - ImageSet: Specify image aspect ratio (width, height) to prevent page jumps
  - Consistency: Check output folder for unused files
  - Empty properties: Show warnings for empty link previews, etc.
 
diff --git a/CHDataManagement/Model/FileResource.swift b/CHDataManagement/Model/FileResource.swift
index 0abfa8c..d656888 100644
--- a/CHDataManagement/Model/FileResource.swift
+++ b/CHDataManagement/Model/FileResource.swift
@@ -152,11 +152,22 @@ final class FileResource: Item, LocalizedItem {
     }
 
     func determineImageDimensions() {
-        let size = getImageDimensions()
+        let size = getCurrentImageDimensions()
         self.update(imageDimensions: size)
     }
 
-    private func getImageDimensions() -> CGSize? {
+    func getImageDimensions() -> CGSize? {
+        if let imageDimensions {
+            return imageDimensions
+        }
+        guard let size = getCurrentImageDimensions() else {
+            return nil
+        }
+        self.update(imageDimensions: size)
+        return size
+    }
+
+    private func getCurrentImageDimensions() -> CGSize? {
         guard type.isImage else {
             return nil
         }
diff --git a/CHDataManagement/Page Elements/ContentElements/Images/ImageGallery.swift b/CHDataManagement/Page Elements/ContentElements/Images/ImageGallery.swift
index 1fa9e0b..2129cc5 100644
--- a/CHDataManagement/Page Elements/ContentElements/Images/ImageGallery.swift	
+++ b/CHDataManagement/Page Elements/ContentElements/Images/ImageGallery.swift	
@@ -31,7 +31,8 @@ struct ImageGallery: HtmlProducer {
         let needsPagination = images.count > 1
 
         for image in images {
-            result += "<div class='swiper-slide'>"
+            let sizeText = image.image.getImageDimensions().map { " style='aspect-ratio: \(Int($0.width)) / \(Int($0.height))'"}
+            result += "<div class='swiper-slide'\(sizeText ?? "")>"
             result += image.content
             if needsPagination {
                 result += "<div class='swiper-lazy-preloader swiper-lazy-preloader-white'></div>"
@@ -57,6 +58,9 @@ struct ImageGallery: HtmlProducer {
         return """
         var swiper_\(id) = new Swiper("#\(id)", {
               loop: true,
+              lazy: {
+                  loadPrevNext: false,
+              },
               slidesPerView: 1,
               spaceBetween: 30,
               centeredSlides: true,