Hugo-theme-stack/layouts/_default/_markup/render-image.html

22 lines
1.0 KiB
HTML

{{- $image := .Page.Resources.GetMatch (printf "%s" (.Destination | safeURL)) -}}
{{- if $image -}}
{{- $small := $image.Resize "480x" -}}
{{- $big := $image.Resize "1024x" -}}
{{- $alt := .PlainText | safeHTML -}}
{{- $caption := "" -}}
{{- with $alt -}}
{{- $caption = . | safeHTML -}}
{{- end -}}
<figure style="flex-grow: {{ div (mul $image.Width 100) $image.Height }}; flex-basis: {{ div (mul $image.Width 240) $image.Height }}px">
<a href="{{ $image.RelPermalink }}" data-size="{{ $image.Width }}x{{ $image.Height }}">
<img srcset="{{ $small.RelPermalink }} 480w, {{ $big.RelPermalink }} 1024w"
src="{{ $image.RelPermalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}" loading="lazy"
alt="{{ if $alt }}{{ $alt }}{{ else if $caption }}{{ $caption | markdownify | plainify }}{{ else }}&nbsp;{{ end }}">
</a>
{{ with $caption }}
<figcaption>{{ . | markdownify }}</figcaption>
{{ end }}
</figure>
{{- else -}}
<img src="{{ .Destination | safeURL }}" alt="{{ .Text }}" {{ with .Title }} title="{{ . }}"{{ end }} />
{{- end -}}