From 626265bcfd3ebfe4a528cd367964a34b3ed9c5ab Mon Sep 17 00:00:00 2001 From: Jimmy Cai 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 -}} -
- - {{- $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 -}} - - - - {{ with $alt }} -
{{ . | markdownify }}
- {{ end }} -
-{{- else -}} - {{ .Text }} -{{- 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 -}} + + \ No newline at end of file