From 474d7911e8d0e479c44488a029398d80522e1c8f Mon Sep 17 00:00:00 2001
From: Jimmy Cai <jimmehcai@gmail.com>
Date: Tue, 22 Dec 2020 19:24:41 +0100
Subject: [PATCH] refactor(gallery): calculate flex-basis & flex-grow on
 generation

Reduce layout shift
---
 assets/ts/gallery.ts                       | 9 +--------
 layouts/_default/_markup/render-image.html | 2 +-
 2 files changed, 2 insertions(+), 9 deletions(-)

diff --git a/assets/ts/gallery.ts b/assets/ts/gallery.ts
index cdf9979..8bce5a9 100644
--- a/assets/ts/gallery.ts
+++ b/assets/ts/gallery.ts
@@ -83,8 +83,7 @@ class StackGallery {
     }
 
     /**
-     * Wrap adjacent figure tags with div.gallery, and append style
-     * Reference: https://github.com/xieranmaya/blog/issues/6
+     * Wrap adjacent figure tags with div.gallery
      * @param figures 
      */
     public static wrap(figures: HTMLElement[]) {
@@ -97,12 +96,6 @@ class StackGallery {
         parentNode.insertBefore(galleryContainer, first)
 
         for (const figure of figures) {
-            const width = figure.querySelector('img').width,
-                height = figure.querySelector('img').height;
-
-            figure.style.flexGrow = `${width * 100 / height}`;
-            figure.style.flexBasis = `${width * 240 / height}px`;
-
             galleryContainer.appendChild(figure);
         }
     }
diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html
index dc57481..e912fcf 100644
--- a/layouts/_default/_markup/render-image.html
+++ b/layouts/_default/_markup/render-image.html
@@ -7,7 +7,7 @@
 	{{- with $alt -}}
 	{{- $caption = . | safeHTML -}}
 	{{- end -}}
-	<figure>
+	<figure style="flex-grow: {{ $image.Width * 100 / $image.Height }}; flex-basis: {{ $image.Width * 240 / $image.Height }}">
 		<a href="{{ $image.RelPermalink }}" data-size="{{ $image.Width }}x{{ $image.Height }}">
 			<img srcset="{{ $small.RelPermalink }} 480w, {{ $big.RelPermalink }} 1024w"
 				src="{{ $image.RelPermalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}" loading="lazy"