cedaei.com/layouts/shortcodes/fitfigure.html

54 lines
3.0 KiB
HTML

{{- $path := (.Get "src") -}}
{{- $original := .Page.Resources.GetMatch $path -}}
{{- if not $original -}}
{{- errorf "couldn't find resource for src: %s" $path -}}
{{- else if and (ne "jpeg" $original.MediaType.SubType) (ne "png" $original.MediaType.SubType) -}}
{{- errorf "src %s is a '%s', expected 'jpeg' or 'png'" $path $original.MediaType.SubType -}}
{{- else -}}
{{- /* Below is a copy paste of https://github.com/gohugoio/hugo/blob/master/tpl/tplimpl/embedded/templates/shortcodes/figure.html from Hugo commit aba2647c152ffff927f42523b77ee6651630cd67, with the img tag modified to use srcsets */ -}}
{{- /* Note that it presently uses `markdownify` instead of $.Page.RenderString for consistency with Hugo's `figure` shortcode. */ -}}
<figure{{ with .Get "class" }} class="{{ . }}"{{ end }}>
{{- if .Get "link" -}}
<a href="{{ .Get "link" }}"{{ with .Get "target" }} target="{{ . }}"{{ end }}{{ with .Get "rel" }} rel="{{ . }}"{{ end }}>
{{- end }}
{{ if (or (ge $original.Width 1304) (ge $original.Height 1304)) -}}
{{/* Add the original to the droplist, so it will get removed later. */}}
{{- if not (.Page.Scratch.Get "droplist") -}}
{{- .Page.Scratch.Set "droplist" (slice) -}}
{{- end -}}
{{- .Page.Scratch.Add "droplist" $original.RelPermalink -}}
{{/* Note: 652px is the max width of an img in article content. I measured this using dev tools; but it's dependent on the styles for the page. */}}
{{- $resized_1x := $original.Fit "652x652 q95" -}}
{{- $resized_2x := $original.Fit "1304x1304 q95" -}}
<img srcset="{{ $resized_1x.RelPermalink }},
{{ $resized_2x.RelPermalink }} 2x"
{{- /* Use small one by default to be kind to old browsers */}}
src="{{ $resized_1x.RelPermalink }}"
{{ else }}
<img src="{{ $original.RelPermalink }}"
{{ end }}
{{- if or (.Get "alt") (.Get "caption") -}}
alt="{{ with .Get "alt" }}{{ . }}{{ else }}{{ .Get "caption" | markdownify| plainify }}{{ end }}"
{{- end -}}
{{- with .Get "width" }} width="{{ . }}"{{ end -}}
{{- with .Get "height" }} height="{{ . }}"{{ end -}}
/> <!-- Closing img tag -->
{{- if .Get "link" }}</a>{{ end -}}
{{- if or (or (.Get "title") (.Get "caption")) (.Get "attr") }}
<figcaption>
{{ with (.Get "title") -}}
<h4>{{ . }}</h4>
{{- end -}}
{{- if or (.Get "caption") (.Get "attr") -}}<p>
{{- .Get "caption" | markdownify -}}
{{- with .Get "attrlink" }}
<a href="{{ . }}">
{{- end -}}
{{- .Get "attr" | markdownify -}}
{{- if .Get "attrlink" }}</a>{{ end }}</p>
{{- end }}
</figcaption>
{{- end }}
</figure>
{{- end -}}