mirror of
https://github.com/tiennm99/HugoBlox-kit.git
synced 2026-10-07 04:14:31 +00:00
71 lines
3.5 KiB
HTML
71 lines
3.5 KiB
HTML
{{/* Figure Shortcode for Wowchemy. */}}
|
|
{{/* Load image from page dir falling back to media library at `assets/media/` and then to remote URI. */}}
|
|
{{/* Note: Uses `{{-` to unindent HTML so that Figure shortcode can be nested within a `{{%` Markdown shortcode,
|
|
such as Callout, without the HTML being rendered as a Markdown code block. */}}
|
|
|
|
{{ $destination := .Get "src" }}
|
|
{{ $is_remote := strings.HasPrefix $destination "http" }}
|
|
{{ $caption := .Get "caption" | default (.Get "title") | default "" }}{{/* Support legacy `title` option. */}}
|
|
{{ $zoom := eq (.Get "lightbox" | default "true") "true" }}
|
|
{{ $id := anchorize (.Get "id" | default ($caption | plainify)) }}
|
|
{{ $alt := .Get "alt" | default ($caption | plainify) }}
|
|
{{ $img_class := "" }}
|
|
{{ if eq (.Get "theme" | lower) "light" }}{{ $img_class = printf "%s img-light" $img_class }}{{end}}
|
|
{{ if eq (.Get "theme" | lower) "dark" }}{{ $img_class = printf "%s img-dark" $img_class }}{{end}}
|
|
|
|
{{/* Workaround Hugo v0.81 error on Windows when `resources.Get (path.Join "media" <URL>)` */}}
|
|
{{- $img := "" -}}
|
|
{{- if not $is_remote -}}
|
|
{{- $img = (.Page.Resources.ByType "image").GetMatch $destination -}}
|
|
{{- if not $img -}}
|
|
{{- $img = resources.Get (path.Join "media" $destination) -}}
|
|
{{- end -}}
|
|
{{- end -}}
|
|
|
|
<figure {{ with .Get "class" }}class="{{.}}"{{end}} {{ with $id }}id="figure-{{ . }}"{{ end }}>
|
|
<div class="d-flex justify-content-center">
|
|
<div class="w-100" {{ with .Get "max_width" }}style="max-width: {{.}}"{{end}}>
|
|
{{- if $img -}}
|
|
{{- $isSVG := eq $img.MediaType.SubType "svg" -}}
|
|
{{- $isGIF := eq $img.MediaType.SubType "gif" -}}
|
|
{{- if $isSVG | or $isGIF -}}
|
|
<img alt="{{ $alt }}"
|
|
src="{{ $img.RelPermalink }}"
|
|
loading="lazy"
|
|
{{- if $zoom }} data-zoomable{{end}}
|
|
{{- with .Get "width" }} width="{{.}}"{{end}}
|
|
{{- with .Get "height" }} height="{{.}}"{{end}}
|
|
{{- with $img_class }} class="{{.}}"{{end}} />
|
|
{{- else }}
|
|
{{- $img_lg := $img.Fit "1200x1200" -}}
|
|
{{- $img_md := $img_lg.Fit "760x760" -}}{{/* Match `.docs-article-container` max-width */}}
|
|
{{- $img_sm := $img_md.Fit "400x400" -}}
|
|
{{- $width := (.Get "width") | default $img_md.Width -}}
|
|
{{- $height := (.Get "height") | default $img_md.Height -}}
|
|
<img alt="{{ $alt }}" srcset="
|
|
{{ $img_sm.RelPermalink }} 400w,
|
|
{{ $img_md.RelPermalink }} 760w,
|
|
{{ $img_lg.RelPermalink }} 1200w"
|
|
src="{{ $img_sm.RelPermalink }}"
|
|
width="{{ $width }}"
|
|
height="{{ $height }}"
|
|
loading="lazy"
|
|
{{- if $zoom }} data-zoomable{{end}}
|
|
{{- with $img_class }} class="{{.}}"{{end}} />
|
|
{{- end }}
|
|
{{- else -}}
|
|
<img src="{{ $destination | safeURL }}" alt="{{ $alt }}" loading="lazy" {{ if $zoom }}data-zoomable{{end}}
|
|
{{- with .Get "width" }} width="{{.}}"{{end}} {{- with .Get "height" }} height="{{.}}"{{end}}
|
|
{{- with $img_class }} class="{{.}}"{{end}} />
|
|
{{- end -}}
|
|
</div>
|
|
</div>
|
|
|
|
{{- 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> |