Eryn Wells
efae2acdea
Remove the .figure__container element. According to Tess, putting a <figcaption> inside a child of a <figure> "doesn't obey the content model" or some shit. Fiiiiine. Getting small figures to lay out the way I want them to without the container was a bit of a trick. Instead of letting the figure span the entire width of the grid column, let it fit the size of its contents, and then set margin-inline to auto so it centers. Doing this also allowed me to remove the .figure--image, etc styles because the styles and markup are a lot more similar among figures containing different kinds of elements. Nice!
34 lines
1 KiB
HTML
34 lines
1 KiB
HTML
{{- $image := .resource -}}
|
|
|
|
{{-
|
|
$resizedImages := dict
|
|
"full" ($image.Fit "2560x2560")
|
|
"half" ($image.Fit "1280x1280")
|
|
"quarter" ($image.Fit "640x640")
|
|
-}}
|
|
|
|
{{- $classes := slice "figure" "figure--image" -}}
|
|
{{- if eq .size "main" -}}
|
|
{{ $classes = $classes | append "figure--main-column" }}
|
|
{{- end -}}
|
|
|
|
<figure class="{{ delimit $classes " " }}">
|
|
{{ 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,
|
|
"
|
|
{{ with $image.Params.alt | default $image.Title }} alt="{{ . }}"{{ end }}
|
|
{{ with $image.Title }} title="{{ . }}"{{ end }}>
|
|
{{ if .linksToFullSizeImage -}}
|
|
</a>
|
|
{{- end -}}
|
|
{{ if .shouldShowTitle }}
|
|
{{ partial "page/figures/caption.html" . }}
|
|
{{ end }}
|
|
</figure>
|