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