From 626265bcfd3ebfe4a528cd367964a34b3ed9c5ab Mon Sep 17 00:00:00 2001
From: Jimmy Cai <github@jimmycai.com>
Date: Wed, 25 Aug 2021 12:20:15 +0200
Subject: [PATCH] refactor(article): better support for svg and external images
 (#326)

---
 assets/ts/gallery.ts                       |  4 +-
 layouts/_default/_markup/render-image.html | 72 +++++++++++++---------
 2 files changed, 46 insertions(+), 30 deletions(-)

diff --git a/assets/ts/gallery.ts b/assets/ts/gallery.ts
index 8bce5a9..5de13a2 100644
--- a/assets/ts/gallery.ts
+++ b/assets/ts/gallery.ts
@@ -34,7 +34,7 @@ class StackGallery {
     private loadItems(container: HTMLElement) {
         this.items = [];
 
-        const figures = container.querySelectorAll('figure');
+        const figures = container.querySelectorAll('figure.gallery-image');
 
         for (const el of figures) {
             const figcaption = el.querySelector('figcaption'),
@@ -57,7 +57,7 @@ class StackGallery {
     }
 
     public static createGallery(container: HTMLElement) {
-        const figuresEl = container.querySelectorAll('figure');
+        const figuresEl = container.querySelectorAll('figure.gallery-image');
 
         let currentGallery = [];
 
diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html
index fbaba27..0325458 100644
--- a/layouts/_default/_markup/render-image.html
+++ b/layouts/_default/_markup/render-image.html
@@ -1,30 +1,46 @@
 {{- $image := .Page.Resources.GetMatch (printf "%s" (.Destination | safeURL)) -}}
-{{- if and $image (ne (path.Ext .Destination) ".svg") -}}
-	{{- $alt := .PlainText | safeHTML -}}
-	<figure style="flex-grow: {{ div (mul $image.Width 100) $image.Height }}; flex-basis: {{ div (mul $image.Width 240) $image.Height }}px">
-		<a href="{{ $image.RelPermalink }}" data-size="{{ $image.Width }}x{{ $image.Height }}">
-			{{- $Permalink := $image.RelPermalink -}}
-			{{- $Width := $image.Width -}}
-			{{- $Height := $image.Height -}}
-			{{- $Srcset := "" -}}
+{{- $Permalink := .Destination | relURL | safeURL -}}
+{{- $alt := .PlainText | safeHTML -}}
+{{- $Width := 0 -}}
+{{- $Height := 0 -}}
+{{- $Srcset := "" -}}
 
-			{{- if (default true .Page.Site.Params.imageProcessing.content.enabled) -}}
-				{{- $small := $image.Resize "480x" -}}
-				{{- $big := $image.Resize "1024x" -}}
-				{{- $Srcset = printf "%s 480w, %s 1024w" $small.RelPermalink $big.RelPermalink -}}
-			{{- end -}}
-			
-			<img src="{{ $Permalink }}"
-				{{ with $Srcset }}srcset="{{ . }}"{{ end }}
-				width="{{ $Width }}"
-				height="{{ $Height }}"
-				loading="lazy"
-				{{ with $alt }}alt="{{ . }}"{{ end }}>
-		</a>
-		{{ with $alt }}
-		<figcaption>{{ . | markdownify }}</figcaption>
-		{{ end }}
-	</figure>
-{{- else -}}
-	<img src="{{ .Destination | relURL | safeURL }}" alt="{{ .Text }}" {{ with .Title }} title="{{ . }}"{{ end }} />
-{{- end -}}
\ No newline at end of file
+{{/* SVG and external images won't work with gallery layout, because their width and height attributes are unknown */}}
+{{- $galleryImage := false -}}
+
+{{- if $image -}}
+	{{- $notSVG := ne (path.Ext .Destination) ".svg" -}}
+	{{- $Permalink = $image.RelPermalink -}}
+
+	{{- if $notSVG -}}
+		{{- $Width = $image.Width -}}
+		{{- $Height = $image.Height -}}
+		{{- $galleryImage = true -}}
+
+		{{- if (default true .Page.Site.Params.imageProcessing.content.enabled) -}}
+			{{- $small := $image.Resize `480x` -}}
+			{{- $big := $image.Resize `1024x` -}}
+			{{- $Srcset = printf `%s 480w, %s 1024w` $small.RelPermalink $big.RelPermalink -}}
+		{{- end -}}
+	{{- end -}}
+{{- end -}}
+
+<figure 
+	{{ if $galleryImage }}
+		class="gallery-image" 
+		style="
+			flex-grow: {{ div (mul $image.Width 100) $image.Height }}; 
+			flex-basis: {{ div (mul $image.Width 240) $image.Height }}px"
+	{{ end }}>
+	<a href="{{ $Permalink }}" {{ if $galleryImage }}data-size="{{ $image.Width }}x{{ $image.Height }}"{{ end }}>
+		<img src="{{ $Permalink }}"
+			{{ with $Width }}width="{{ . }}"{{ end }}
+			{{ with $Height }}height="{{ . }}"{{ end }}
+			{{ with $Srcset }}srcset="{{ . }}"{{ end }}
+			loading="lazy"
+			{{ with $alt }}alt="{{ . }}"{{ end }}>
+	</a>
+	{{ with $alt }}
+	<figcaption>{{ . | markdownify }}</figcaption>
+	{{ end }}
+</figure>
\ No newline at end of file