systemausfall.org/hugo-theme-hilfe
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

feat: add basic svg support to the img shortcode (#554)

Browse source
This commit is contained in:
Robert Kaussow 2022-12-11 15:05:30 +01:00 • committed by GitHub
parent 8a5e030dc8
commit 5d4370b617
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 141 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

54
layouts/shortcodes/img.html
View file

@ -2,18 +2,26 @@
{{- $customAlt := .Get "alt" }}
{{- $customSize := .Get "size" | lower }}
{{- $lazyLoad := default (default true $.Site.Params.GeekdocImageLazyLoading) (.Get "lazy") }}
{{- $data := newScratch }}
{{- with $source }}
{{- $caption := default .Title $customAlt }}
{{- $isSVG := (eq .MediaType.SubType "svg") }}
{{- $origin := .Permalink }}
{{- $profile := (.Fill "180x180 Center").Permalink }}
{{- $tiny := (.Resize "320x").Permalink }}
{{- $small := (.Resize "600x").Permalink }}
{{- $medium := (.Resize "1200x").Permalink }}
{{- $large := (.Resize "1800x").Permalink }}
{{- $size := dict "origin" $origin "profile" $profile "tiny" $tiny "small" $small "medium" $medium "large" $large }}
{{ if $isSVG }}
{{- $data.SetInMap "size" "profile" "180" }}
{{- $data.SetInMap "size" "tiny" "320" }}
{{- $data.SetInMap "size" "small" "600" }}
{{- $data.SetInMap "size" "medium" "1200" }}
{{- $data.SetInMap "size" "large" "1800" }}
{{ else }}
{{- $data.SetInMap "size" "profile" (.Fill "180x180 Center").Permalink }}
{{- $data.SetInMap "size" "tiny" (.Resize "320x").Permalink }}
{{- $data.SetInMap "size" "small" (.Resize "600x").Permalink }}
{{- $data.SetInMap "size" "medium" (.Resize "1200x").Permalink }}
{{- $data.SetInMap "size" "large" (.Resize "1800x").Permalink }}
{{ end }}
<div class="flex justify-center">
@ -23,21 +31,29 @@
>
<a class="gdoc-markdown__link--raw" href="{{ .Permalink }}">
<picture>
<source
{{- with $customSize }}
srcset="{{ index $size $customSize }}"
{{- else }}
srcset="{{ $size.small }} 600w, {{ $size.medium }} 1200w" sizes="100vw"
{{- end }}
/>
{{- $size := $data.Get "size" }}
{{- if not $isSVG }}
<source
{{- with $customSize }}
srcset="{{ index $size $customSize }}"
{{- else }}
srcset="{{ $size.small }} 600w, {{ $size.medium }} 1200w" sizes="100vw"
{{- end }}
/>
{{- end }}
<img
{{- if $lazyLoad }}{{ print " loading=\"lazy\"" | safeHTMLAttr }}{{- end }}
{{- if eq $customSize "origin" }}
src="{{ $size.origin }}"
{{- if $isSVG }}
src="{{ $origin }}" width="{{ index $size (default "medium" $customSize) }}"
{{- else }}
src="{{ $size.large }}"
{{- if $lazyLoad }}{{ print " loading=\"lazy\"" | safeHTMLAttr }}{{- end }}
{{- if eq $customSize "origin" }}
src="{{ $origin }}"
{{- else }}
src="{{ $size.large }}"
{{- end }}
alt="{{ $caption }}"
{{- end }}
alt="{{ $caption }}"
/>
</picture>
</a>