Add image aspect ratio to prevent page jumps

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>"
     }
 }

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.
 

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
         }

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,