100% PWA compatible and fix layout shift on load

cmd/fastgallery/assets/fastgallery.css

@@ -2,6 +2,12 @@
     cursor: pointer;
 }
 
+.thumbnail {
+    width: 100%;
+    height: auto;
+    aspect-ratio: 280/210;
+}
+
 #modalMedia {
     max-width: 100%;
     max-height: calc(100% - 74px);

cmd/fastgallery/assets/gallery.gohtml

@@ -5,8 +5,11 @@
   <title>{{ .Title }}</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta charset="utf-8">
-    {{if .ManifestFile }}
+    {{ if .ManifestFile }}
       <link href="{{ .ManifestFile }}" rel="manifest">
+      {{ if .AppleTouchIcon }}
+        <link href="{{ .AppleTouchIcon }}" rel="apple-touch-icon">
+      {{ end }}
     {{ end }}
 	{{ range .CSS }}
       <link href="{{ . }}" rel="stylesheet">
@@ -23,7 +26,7 @@
     {{if .BackIcon}}
             <div class="col-4 col-md-3 col-lg-2 float-left p-md-2 p-lg-3">
                 <a href="../">
-                    <img class="box border border-gray box-shadow width-fit" src="{{ .BackIcon }}" alt="Back">
+                    <img class="box border border-gray box-shadow width-fit thumbnail" src="{{ .BackIcon }}" alt="Back" width="{{ .ImageWidth }}" height="{{ .ImageHeight }}">
                 </a>
                 <span class="px-2 pb-2 width-fit css-truncate css-truncate-target">Back</span>
             </div>
@@ -32,7 +35,7 @@
 	{{range .Subdirectories}}
             <div class="col-4 col-md-3 col-lg-2 float-left p-md-2 p-lg-3">
                 <a href="{{ . }}">
-                    <img class="box border border-gray box-shadow width-fit" src="{{ $.FolderIcon }}" alt="{{ . }}">
+                    <img class="box border border-gray box-shadow width-fit thumbnail" src="{{ $.FolderIcon }}" alt="{{ . }}" width="{{ $.ImageWidth }}" height="{{ $.ImageHeight }}">
                 </a>
                 <span class="px-2 pb-2 width-fit css-truncate css-truncate-target">{{ . }}</span>
             </div>
@@ -40,7 +43,7 @@
 
 	{{range $i, $e := .Files}}
             <div class="col-4 col-md-3 col-lg-2 float-left p-md-2 p-lg-3">
-                <img class="box border border-gray box-shadow width-fit" src="{{ .Thumbnail }}" alt="{{ .Filename }}" onclick="changePicture({{ $i }});displayModal(true);">
+                <img class="box border border-gray box-shadow width-fit thumbnail" src="{{ .Thumbnail }}" alt="{{ .Filename }}" onclick="changePicture({{ $i }});displayModal(true);" width="{{ $.ImageWidth }}" height="{{ $.ImageHeight }}">
                 <span class="px-2 pb-2 width-fit css-truncate css-truncate-target">{{ .Filename }}</span>
 			</div>
 	{{end}}

cmd/fastgallery/main.go

@@ -138,11 +138,14 @@ type htmlData struct {
 		Fullsize  string
 		Original  string
 	}
-	CSS          []string
-	JS           []string
-	FolderIcon   string
-	BackIcon     string
-	ManifestFile string
+	CSS            []string
+	JS             []string
+	FolderIcon     string
+	BackIcon       string
+	AppleTouchIcon string
+	ManifestFile   string
+	ImageWidth     string
+	ImageHeight    string
 }
 
 // transformationJob struct is used to communicate needed image/video transformations to
@@ -850,6 +853,13 @@ func createHTML(depth int, source directory, galleryDirectory string, dryRun boo
 				thisHTML.JS = append(thisHTML.JS, filepath.Join(rootEscape, entry.Name()))
 			case ".css":
 				thisHTML.CSS = append(thisHTML.CSS, filepath.Join(rootEscape, entry.Name()))
+			case ".png":
+				if isIcon(entry.Name()) {
+					iconSize, _ := getIconSize(entry.Name())
+					if iconSize == "180x180" {
+						thisHTML.AppleTouchIcon = entry.Name()
+					}
+				}
 			}
 		}
 	}
@@ -867,6 +877,10 @@ func createHTML(depth int, source directory, galleryDirectory string, dryRun boo
 		thisHTML.ManifestFile = config.assets.manifestFile
 	}
 
+	// Add image height and width
+	thisHTML.ImageHeight = fmt.Sprint(config.media.thumbnailHeight)
+	thisHTML.ImageWidth = fmt.Sprint(config.media.thumbnailWidth)
+
 	// thisHTML struct has been filled in successfully, parse the HTML template,
 	// fill in the data and write it to the correct file
 	htmlFilePath := filepath.Join(galleryDirectory, config.assets.htmlFile)