Make some improvements to the fullwidth-image partial
- 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:
parent
accd1aceeb
commit
05956b83b8
1 changed files with 23 additions and 12 deletions
|
@ -1,28 +1,39 @@
|
|||
{{- $image := .resource -}}
|
||||
|
||||
{{-
|
||||
$resizedImages := dict
|
||||
"full" ($image.Fit "2560x2560")
|
||||
"half" ($image.Fit "1280x1280")
|
||||
"quarter" ($image.Fit "640x640")
|
||||
-}}
|
||||
{{- $isSVG := strings.Contains $image.MediaType.SubType "svg" -}}
|
||||
{{- $linksToFullSizeImage := and .linksToFullSizeImage (not $isSVG) -}}
|
||||
|
||||
{{- $resizedImages := dict "full" $image -}}
|
||||
{{- if not $isSVG -}}
|
||||
{{-
|
||||
$resizedImages := dict
|
||||
"full" ($image.Fit "2560x2560")
|
||||
"half" ($image.Fit "1280x1280")
|
||||
"quarter" ($image.Fit "640x640")
|
||||
-}}
|
||||
{{ end }}
|
||||
|
||||
{{- $classes := slice "figure" "figure--image" -}}
|
||||
{{- if eq .size "main" -}}
|
||||
{{ $classes = $classes | append "figure--main-column" }}
|
||||
{{- end -}}
|
||||
{{- with .class -}}
|
||||
{{ $classes = $classes | append . }}
|
||||
{{- end -}}
|
||||
|
||||
<figure class="{{ delimit $classes " " }}">
|
||||
{{ if .linksToFullSizeImage -}}
|
||||
{{ if $linksToFullSizeImage -}}
|
||||
<a href="{{ $image.RelPermalink }}">
|
||||
{{- end -}}
|
||||
<img
|
||||
src="{{ (index $resizedImages "full").RelPermalink }}"
|
||||
srcset="
|
||||
{{ (index $resizedImages "full").RelPermalink }} 2560w,
|
||||
{{ (index $resizedImages "half").RelPermalink }} 1280w,
|
||||
{{ (index $resizedImages "quarter").RelPermalink }} 640w,
|
||||
"
|
||||
{{ if gt (len $resizedImages) 1 -}}
|
||||
srcset="
|
||||
{{ (index $resizedImages "full").RelPermalink }} 2560w,
|
||||
{{ (index $resizedImages "half").RelPermalink }} 1280w,
|
||||
{{ (index $resizedImages "quarter").RelPermalink }} 640w,
|
||||
"
|
||||
{{ end }}
|
||||
{{ with $image.Params.alt | default $image.Title }} alt="{{ . }}"{{ end }}
|
||||
{{ with $image.Title }} title="{{ . }}"{{ end }}>
|
||||
{{ if .linksToFullSizeImage -}}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue