technoduck/hugo-theme-stack-stars
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

refactor(article): better support for svg and external images (#326)

Browse source
This commit is contained in:
Jimmy Cai 2021-08-25 12:20:15 +02:00 committed by GitHub
parent fe94466ec4
commit 626265bcfd
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 46 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
assets/ts/gallery.ts
View file

@ -34,7 +34,7 @@ class StackGallery {
private loadItems(container: HTMLElement) { private loadItems(container: HTMLElement) {
this.items = []; this.items = [];
const figures = container.querySelectorAll('figure'); const figures = container.querySelectorAll('figure.gallery-image');
for (const el of figures) { for (const el of figures) {
const figcaption = el.querySelector('figcaption'), const figcaption = el.querySelector('figcaption'),
@ -57,7 +57,7 @@ class StackGallery {
} }
public static createGallery(container: HTMLElement) { public static createGallery(container: HTMLElement) {
const figuresEl = container.querySelectorAll('figure'); const figuresEl = container.querySelectorAll('figure.gallery-image');
let currentGallery = []; let currentGallery = [];

68
layouts/_default/_markup/render-image.html
View file

@ -1,30 +1,46 @@
{{- $image := .Page.Resources.GetMatch (printf "%s" (.Destination | safeURL)) -}} {{- $image := .Page.Resources.GetMatch (printf "%s" (.Destination | safeURL)) -}}
{{- if and $image (ne (path.Ext .Destination) ".svg") -}} {{- $Permalink := .Destination | relURL | safeURL -}}
{{- $alt := .PlainText | safeHTML -}} {{- $alt := .PlainText | safeHTML -}}
<figure style="flex-grow: {{ div (mul $image.Width 100) $image.Height }}; flex-basis: {{ div (mul $image.Width 240) $image.Height }}px"> {{- $Width := 0 -}}
<a href="{{ $image.RelPermalink }}" data-size="{{ $image.Width }}x{{ $image.Height }}"> {{- $Height := 0 -}}
{{- $Permalink := $image.RelPermalink -}} {{- $Srcset := "" -}}
{{- $Width := $image.Width -}}
{{- $Height := $image.Height -}}
{{- $Srcset := "" -}}
{{- if (default true .Page.Site.Params.imageProcessing.content.enabled) -}} {{/* SVG and external images won't work with gallery layout, because their width and height attributes are unknown */}}
{{- $small := $image.Resize "480x" -}} {{- $galleryImage := false -}}
{{- $big := $image.Resize "1024x" -}}
{{- $Srcset = printf "%s 480w, %s 1024w" $small.RelPermalink $big.RelPermalink -}}
{{- end -}}
<img src="{{ $Permalink }}" {{- if $image -}}
{{ with $Srcset }}srcset="{{ . }}"{{ end }} {{- $notSVG := ne (path.Ext .Destination) ".svg" -}}
width="{{ $Width }}" {{- $Permalink = $image.RelPermalink -}}
height="{{ $Height }}"
loading="lazy" {{- if $notSVG -}}
{{ with $alt }}alt="{{ . }}"{{ end }}> {{- $Width = $image.Width -}}
</a> {{- $Height = $image.Height -}}
{{ with $alt }} {{- $galleryImage = true -}}
<figcaption>{{ . | markdownify }}</figcaption>
{{ end }} {{- if (default true .Page.Site.Params.imageProcessing.content.enabled) -}}
</figure> {{- $small := $image.Resize `480x` -}}
{{- else -}} {{- $big := $image.Resize `1024x` -}}
<img src="{{ .Destination | relURL | safeURL }}" alt="{{ .Text }}" {{ with .Title }} title="{{ . }}"{{ end }} /> {{- $Srcset = printf `%s 480w, %s 1024w` $small.RelPermalink $big.RelPermalink -}}
{{- end -}}
{{- 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>