mirror of
https://github.com/tiennm99/HugoBlox-kit.git
synced 2026-10-20 00:14:48 +00:00
George Cushen
7b235ea453
New shortcode supports - enable re-usable *optimized* image assets from new primary media library location at `assets/images/` - new behavior: load image from page dir falling back to media library at `assets/images/` and then to remote URI. - multi-res support. leading to increased perf. - custom ID for cross-refs - efficient, vanilla (non-jQuery), MIT licensed image zooming - FancyBox now only loaded for Gallery shortcode - themeable SVG support - native lazy loading Experimental, may change. BREAKING CHANGE: Move any figure images (i.e. not the `sharing.*` image) from `static/media/` to `assets/images/` See #2164
48 lines
2.0 KiB
HTML
48 lines
2.0 KiB
HTML
{{/* Figure Shortcode for Wowchemy. */}}
|
|
{{/* Load image from page dir falling back to media library at `assets/images/` and then to remote URI. */}}
|
|
|
|
{{ $destination := .Get "src" }}
|
|
{{ $caption := .Get "title" | default (.Get "caption") | default "" }}
|
|
{{ $id := .Get "id" | default $caption }}
|
|
{{ $alt := .Get "alt" | default ($caption | plainify) }}
|
|
|
|
{{- $img := (.Page.Resources.ByType "image").GetMatch $destination -}}
|
|
{{- if and (not $img) .Page.File -}}
|
|
{{ $path := $destination }}
|
|
{{- $img = resources.Get (path.Join "images" $path) -}}
|
|
{{- end -}}
|
|
|
|
<figure {{ with .Get "class" }}class="{{.}}"{{ end }} {{ with $id }}id="figure-{{ anchorize . }}"{{ end }}>
|
|
|
|
{{- if $img -}}
|
|
{{ $isSVG := eq $img.MediaType.SubType "svg" }}
|
|
{{ if $isSVG }}
|
|
{{ $img.Content | safeHTML }}
|
|
{{ else }}
|
|
{{- $img_lg := $img.Fit "1200x1200" -}}
|
|
{{- $img_md := $img_lg.Fit "760x760" -}}{{/* Match `.docs-article-container` max-width */}}
|
|
{{- $img_sm := $img_md.Fit "400x400" -}}
|
|
<img alt="{{ $alt }}" srcset="
|
|
{{ $img_sm.RelPermalink }} 400w,
|
|
{{ $img_md.RelPermalink }} 760w,
|
|
{{ $img_lg.RelPermalink }} 1200w"
|
|
src="{{ $img_sm.RelPermalink }}"
|
|
width="{{ (.Get "width") | default $img_md.Width }}"
|
|
height="{{ (.Get "height") | default $img_md.Height }}"
|
|
loading="lazy"
|
|
data-zoomable />
|
|
{{ end }}
|
|
{{- else -}}
|
|
<img src="{{ $destination | safeURL }}" alt="{{ $alt }}" loading="lazy" data-zoomable
|
|
{{ with .Get "width" }}width="{{.}}"{{end}} {{ with .Get "height" }}height="{{.}}"{{end}} />
|
|
{{- end -}}
|
|
|
|
{{ if $caption }}
|
|
{{/* Localize the figure numbering (if enabled). */}}
|
|
{{ $figure := split (i18n "figure" | default "Figure %d:") "%d" }}
|
|
<figcaption{{ if eq (.Get "numbered") "true" }} data-pre="{{- trim (index $figure 0) " " -}} " data-post="{{ index $figure 1 }} " class="numbered"{{ end }}>
|
|
{{ $caption | markdownify | emojify }}
|
|
</figcaption>
|
|
{{ end }}
|
|
</figure>
|