exp*: test remote image gallery

config.yaml

@@ -185,8 +185,14 @@ params:
         cover:
             enabled: true
         content:
+            enabled: false
+
+    render:
+        image:
+            externalLink:
                 enabled: true
 
+
 ### Custom menu
 ### See https://docs.stack.jimmycai.com/configuration/custom-menu.html
 ### To remove about, archive and search page menu item, remove `menu` field from their FrontMatter

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