Refactor all the figures

There are two main sizes of figures: fullwidth and small. Full width figures take
the full content width. Usually they spread into the "wide" content area too.
Main size figures are also full width figures, but they stop at the edges of the
main content area. Small figures shrink to fit and are generally 480pts wide.

Break all these different types of figures down into separate templates for each
variant.

Add the ability for resources to specify a "source" with a link and title.

assets/css/010_structure.css

@@ -106,7 +106,7 @@ body {
   grid-column: main-start / main-end;
 }
 
-.content > :is(.figure--image, .codeblock) {
+.content > .codeblock) {
   grid-column: wide-gutter-start / wide-gutter-end;
 }
 

assets/css/050_figures.css

@@ -12,16 +12,7 @@
   display: grid;
   grid-template-columns: subgrid;
 
-  .figure__container {
-    align-items: center;
-    display: flex;
-    gap: var(--body-item-spacing);
-    grid-column: wide-gutter-start / wide-gutter-end;
-    justify-content: center;
-    min-width: fit-content;
-  }
-
-  &:has(> img:only-child, .figure__container > img:only-child) {
+  &:has(> img:only-child, .figure__container:only-child > img:only-child) {
     display: flex;
     justify-content: center;
   }
@@ -46,6 +37,26 @@
 }
 
 
+.figure--image img,
+.figure--video video
+{
+  grid-column: wide-gutter-start / wide-gutter-end;
+}
+
+
+.figure--small {
+  align-items: center;
+  display: flex;
+  grid-column: main-start / main-end;
+  justify-content: center;
+  min-width: fit-content;
+
+  img {
+    width: 480px;
+  }
+}
+
+
 .figure--main-column {
   grid-column: main-start / main-end;
 }
@@ -56,6 +67,11 @@
 }
 
 
+.figure--video video {
+  width: 100%;
+}
+
+
 .figure--youtube {
   grid-column: wide-gutter-start / wide-gutter-end;
 

i18n/en.yaml

@@ -5,10 +5,15 @@ draftYes: "YES"
 draftNo: "NO"
 
 home: Home
-tableOfContents: Table of Contents
+
+instagram: Instagram
 
 # Title of section of a list page where years older than
 # .Site.Params.blog.yearLimit are collapsed into a bulleted list.
 olderPagesSectionTitle: Older
 
+source: Source
+
+tableOfContents: Table of Contents
+
 yearsTagTitle: Years

layouts/partials/page/figures/caption.html

@@ -0,0 +1,6 @@
+<figcaption>
+  {{ .resource.Title | markdownify }}
+  {{ with .resource.Params.source -}}
+    {{ partial "page/figures/resource-source.html" . }}
+  {{- end -}}
+</figcaption>

layouts/partials/page/figures/fullwidth-image.html

@@ -0,0 +1,30 @@
+{{- $image := .resource -}}
+
+{{-
+  $resizedImages := dict
+    "full"    ($image.Fit "2560x2560")
+    "half"    ($image.Fit "1280x1280")
+    "quarter" ($image.Fit "640x640")
+-}}
+
+<figure class="figure  figure--image
+  {{- if eq .size "main" }}figure--main-column{{ end }}">
+  {{ 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>

layouts/partials/page/figures/fullwidth-video.html

@@ -0,0 +1,10 @@
+{{- $video := .resource -}}
+
+<figure class="figure  figure--video">
+  <video controls>
+    <source src="{{ $video.RelPermalink }}" type="{{ $video.MediaType.Type }}">
+  </video>
+  {{ if .shouldShowTitle }}
+    {{ partial "page/figures/caption.html" . }}
+  {{ end }}
+</figure>

layouts/partials/page/figures/fullwidth.html

@@ -0,0 +1,14 @@
+{{- $page := .page -}}
+
+{{- $shouldShowTitle := .shouldShowTitle -}}
+
+{{- $resource := $page.Resources.GetMatch .name -}}
+{{- if not $resource }}
+  {{ errorf "No resource named '%s'. %s" .name .page.Permalink }}
+{{ end -}}
+
+{{- if eq $resource.ResourceType "image" -}}
+  {{ partial "page/figures/fullwidth-image.html" (merge . (dict "resource" $resource))  }}
+{{- else if eq $resource.ResourceType "video" -}}
+  {{ partial "page/figures/fullwidth-video.html" (merge . (dict "resource" $resource)) }}
+{{- end -}}

layouts/partials/page/figures/resource-source.html

@@ -0,0 +1,19 @@
+<span class="figure__source">
+  {{ if and .title .url }}
+    {{ i18n "source" }}: <a href="{{ .url }}">{{ .title }}</a>.
+  {{ else if .title }}
+    {{ .title }}
+  {{ else }}
+    {{ $sourceTitle := "" }}
+    {{ $parsedURL := urls.Parse .url }}
+    {{ if strings.Contains $parsedURL.Hostname "instagram.com" }}
+      {{ $sourceTitle = i18n "instagram" }}
+    {{ end }}
+
+    {{ if gt (len $sourceTitle) 0 }}
+      {{ i18n "source" }}: <a href="{{ .url }}">{{ $sourceTitle }}</a>
+    {{ else }}
+      <a href="{{ .url }}">{{ i18n "source" }}</a>
+    {{ end }}
+  {{ end }}
+</span>

layouts/partials/page/figures/small-image.html

@@ -0,0 +1,29 @@
+{{- $image := .resource -}}
+
+{{-
+  $resizedImages := dict
+    "2x" ($image.Fit "960x960")
+    "1x" ($image.Fit "480x480")
+-}}
+
+<figure class="figure  figure--image  figure--small">
+  <div class="figure__container">
+    {{ if .linksToFullSizeImage -}}
+      <a href="{{ $image.RelPermalink }}">
+    {{- end -}}
+      <img
+        src="{{ (index $resizedImages "2x").RelPermalink }}"
+        srcset="
+          {{ (index $resizedImages "2x").RelPermalink }} 960w,
+          {{ (index $resizedImages "1x").RelPermalink }} 480w,
+        "
+        {{ 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 }}
+  </div>
+</figure>

layouts/partials/page/figures/small.html

@@ -0,0 +1,12 @@
+{{- $page := .page -}}
+
+{{- $shouldShowTitle := .shouldShowTitle -}}
+
+{{- $resource := $page.Resources.GetMatch .name -}}
+{{- if not $resource }}
+  {{ errorf "No resource named '%s'. %s" .name .page.Permalink }}
+{{ end -}}
+
+{{- if eq $resource.ResourceType "image" -}}
+  {{ partial "page/figures/small-image.html" (merge . (dict "resource" $resource))  }}
+{{- end -}}