exp*: external image gallery

config.yaml

@@ -31,6 +31,14 @@ params:
     rssFullContent: true
     favicon:
 
+    imageProcessing:
+        content:
+            enabled: false
+    render:
+        image:
+            externalLink:
+                enabled: true
+
     footer:
         since: 2018
         customText: Made with ❤️ in Hangzhou <br> <a href="https://beian.miit.gov.cn/" target="_blank">浙ICP备2022025362号</a>
@@ -260,3 +268,5 @@ markup:
         lineNos: true
         lineNumbersInTable: true
         tabWidth: 4
+
+timeout: 60

layouts/_default/_markup/render-image.html

@@ -0,0 +1,58 @@
+{{- $Permalink := .Destination | safeURL -}}
+{{- $image := "" -}}
+
+{{- if and (hasPrefix $Permalink "http") (default false .Page.Site.Params.render.image.externalLink.enabled) -}}
+	{{- with resources.GetRemote $Permalink -}}
+		{{- with .Err -}}
+			{{- $warnMsg := printf "%s" $Permalink -}}
+			{{- warnf "%s.\nPlease check the link: %s\n" . $warnMsg -}}
+		{{- else -}}
+			{{- $image = . -}}
+		{{- end -}}
+	{{- else -}}
+	  {{- warnf "Unable to get remote resource %q" $Permalink -}}
+	{{- end -}}
+{{- else -}}
+	{{- $image = .Page.Resources.GetMatch (printf "%s" $Permalink) -}}
+	{{- if $image -}}
+		{{- $Permalink = $image.RelPermalink -}}
+	{{- end -}}
+{{- end -}}
+{{- $alt := .PlainText | safeHTML -}}
+{{- $Width := 0 -}}
+{{- $Height := 0 -}}
+{{- $Srcset := "" -}}
+
+{{/* 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" -}}
+
+	{{- 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 -}}
+
+<img src="{{ $Permalink }}"
+	{{ with $Width }}width="{{ . }}"{{ end }}
+	{{ with $Height }}height="{{ . }}"{{ end }}
+	{{ with $Srcset }}srcset="{{ . }}"{{ end }}
+	loading="lazy"
+	{{ with $alt }}
+		alt="{{ . }}"
+	{{ end }}
+	{{ if $galleryImage }}
+		class="gallery-image" 
+		data-flex-grow="{{ div (mul $image.Width 100) $image.Height }}"
+		data-flex-basis="{{ div (mul $image.Width 240) $image.Height }}px"
+	{{ end }}
+>