eryn/hugo-theme-termlite
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Make some improvements to the fullwidth-image partial

Browse source 
- Add some handling of SVGs so the template doesn't attempt to resize them.
- Include custom classes in the <figure class> attribute
- Do not link to SVG images
- Only include <img srcset> if there are multiple sized images. This mostly supports
  SVG figures where there's only ever one.
This commit is contained in:
Eryn Wells 2024-12-31 09:37:19 -08:00
parent accd1aceeb
commit 05956b83b8
1 changed files with 23 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

35
layouts/partials/page/figures/fullwidth-image.html
View file

@ -1,28 +1,39 @@
{{- $image := .resource -}} {{- $image := .resource -}}
{{- {{- $isSVG := strings.Contains $image.MediaType.SubType "svg" -}}
$resizedImages := dict {{- $linksToFullSizeImage := and .linksToFullSizeImage (not $isSVG) -}}
"full" ($image.Fit "2560x2560")
"half" ($image.Fit "1280x1280") {{- $resizedImages := dict "full" $image -}}
"quarter" ($image.Fit "640x640") {{- if not $isSVG -}}
-}} {{-
$resizedImages := dict
"full" ($image.Fit "2560x2560")
"half" ($image.Fit "1280x1280")
"quarter" ($image.Fit "640x640")
-}}
{{ end }}
{{- $classes := slice "figure" "figure--image" -}} {{- $classes := slice "figure" "figure--image" -}}
{{- if eq .size "main" -}} {{- if eq .size "main" -}}
{{ $classes = $classes | append "figure--main-column" }} {{ $classes = $classes | append "figure--main-column" }}
{{- end -}} {{- end -}}
{{- with .class -}}
{{ $classes = $classes | append . }}
{{- end -}}
<figure class="{{ delimit $classes " " }}"> <figure class="{{ delimit $classes " " }}">
{{ if .linksToFullSizeImage -}} {{ if $linksToFullSizeImage -}}
<a href="{{ $image.RelPermalink }}"> <a href="{{ $image.RelPermalink }}">
{{- end -}} {{- end -}}
<img <img
src="{{ (index $resizedImages "full").RelPermalink }}" src="{{ (index $resizedImages "full").RelPermalink }}"
srcset=" {{ if gt (len $resizedImages) 1 -}}
{{ (index $resizedImages "full").RelPermalink }} 2560w, srcset="
{{ (index $resizedImages "half").RelPermalink }} 1280w, {{ (index $resizedImages "full").RelPermalink }} 2560w,
{{ (index $resizedImages "quarter").RelPermalink }} 640w, {{ (index $resizedImages "half").RelPermalink }} 1280w,
" {{ (index $resizedImages "quarter").RelPermalink }} 640w,
"
{{ end }}
{{ with $image.Params.alt | default $image.Title }} alt="{{ . }}"{{ end }} {{ with $image.Params.alt | default $image.Title }} alt="{{ . }}"{{ end }}
{{ with $image.Title }} title="{{ . }}"{{ end }}> {{ with $image.Title }} title="{{ . }}"{{ end }}>
{{ if .linksToFullSizeImage -}} {{ if .linksToFullSizeImage -}}