Add number, numbered shortcode params

layouts/partials/paige/figure.html

@@ -8,6 +8,8 @@
 {{ $justify := .justify | default "center" }}
 {{ $maxheight := .maxheight }}
 {{ $maxwidth := .maxwidth }}
+{{ $number := .number }}
+{{ $numbered := .numbered }}
 {{ $width := .width }}
 
 {{ $table := false }}
@@ -70,7 +72,22 @@
     {{ end }}
 {{ end }}
 
-<figure class="align-items-{{ $align }} d-flex flex-column {{ with $float }} float-{{ . }} {{ end }} justify-content-{{ $justify }} {{ if $compact }} mb-0 {{ end }} {{ if $float }} {{ $sidemargin }} {{ end }} paige-figure" {{ if and $float $style }} style="{{ $style | safeCSS }}" {{ end }}>
+{{ $showcaption := $caption }}
+
+{{ if $caption }}
+    {{ if $number }}
+        {{ $caption = printf "%v %v: %v" (i18n "paige_figure") $number $caption }}
+    {{ end }}
+{{ else }}
+    {{ if $number }}
+        {{ $caption = printf "%v %v" (i18n "paige_figure") $number }}
+        {{ $showcaption = true }}
+    {{ else if $numbered }}
+        {{ $showcaption = true }}
+    {{ end }}
+{{ end }}
+
+<figure class="align-items-{{ $align }} d-flex flex-column {{ with $float }} float-{{ . }} {{ end }} justify-content-{{ $justify }} {{ if $compact }} mb-0 {{ end }} {{ if $float }} {{ $sidemargin }} {{ end }} paige-figure {{ if $numbered }} paige-figure-numbered {{ end }}" {{ if and $float $style }} style="{{ $style | safeCSS }}" {{ end }}>
     {{ if and (not $float) $style }}
         <div class="align-items-{{ $align }} d-flex flex-column {{ if $height }} h-100 {{ end }} justify-content-{{ $justify }}" style="{{ $style | safeCSS }}">
     {{ end }}
@@ -78,8 +95,8 @@
         <div class="d-table">
     {{ end }}
     <div class="text-{{ $align }}">{{ $content }}</div>
-    {{ with $caption }}
-        <figcaption class="figure-caption {{ with $gap }} mt-{{ . }} {{ end }} text-{{ $align }}" {{ if $table }} style="caption-side: bottom; display: table-caption" {{ end }}>{{ . }}</figcaption>
+    {{ if $showcaption }}
+        <figcaption class="figure-caption {{ with $gap }} mt-{{ . }} {{ end }} text-{{ $align }}" {{ if $table }} style="caption-side: bottom; display: table-caption" {{ end }}>{{ $caption }}</figcaption>
     {{ end }}
     {{ if $table }}
         </div>

layouts/partials/paige/image-figure.html

@@ -7,6 +7,8 @@
 {{ $maxheight := .maxheight }}
 {{ $maxwidth := .maxwidth }}
 {{ $method := .method }}
+{{ $number := .number }}
+{{ $numbered := .numbered }}
 {{ $options := .options }}
 {{ $page := .page }}
 {{ $raw := .raw }}
@@ -43,5 +45,7 @@
     "height" $height
     "maxheight" $maxheight
     "maxwidth" $maxwidth
+    "number" $number
+    "numbered" $numbered
     "width" $width
 ) }}

layouts/partials/paige/style.html

@@ -4,9 +4,22 @@ body, html {
 }
 
 section[class="paige-content"] {
+    counter-reset: paige-figure;
     max-width: 100%;
 }
 
+section[class="paige-content"] figure.paige-figure.paige-figure-numbered {
+    counter-increment: paige-figure;
+}
+
+section[class="paige-content"] figure.paige-figure.paige-figure-numbered figcaption:empty::before {
+    content: "{{ i18n `paige_figure` }} " counter(paige-figure);
+}
+
+section[class="paige-content"] figure.paige-figure.paige-figure-numbered figcaption::before {
+    content: "{{ i18n `paige_figure` }} " counter(paige-figure) ": ";
+}
+
 section[class="paige-content"] > blockquote {
     padding: 0.5rem 1rem;
     border-left: 0.25rem solid var(--bs-border-color);