Add number, numbered shortcode params

README.md

@@ -519,6 +519,8 @@ The `paige/figure` shortcode provides a figure with content.
     justify="center"
     maxheight="10rem"
     maxwidth="10rem"
+    number=0
+    numbered=false
     width="10rem"
 >}}
 My content
@@ -544,6 +546,10 @@ Parameters:
     <dd>Optional. String. CSS value. Maximum total height.</dd>
     <dt><code>maxwidth</code></dt>
     <dd>Optional. String. CSS value. Maximum total width.</dd>
+    <dt><code>number</code></dt>
+    <dd>Optional. Integer or string. Figure number. Displayed with the caption.</dd>
+    <dt><code>numbered</code></dt>
+    <dd>Optional. Boolean. Number the figure automatically. Displayed with the caption.</dd>
     <dt><code>width</code></dt>
     <dd>Optional. String. CSS value. Total width.</dd>
 </dl>

i18n/en.yaml

@@ -1,3 +1,6 @@
+paige_figure:
+  other: Figure
+
 paige_noscript:
   other: JavaScript is required.
 

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 }}
+    {{ if $showcaption }}
-        <figcaption class="figure-caption {{ with $gap }} mt-{{ . }} {{ end }} text-{{ $align }}" {{ if $table }} style="caption-side: bottom; display: table-caption" {{ end }}>{{ . }}</figcaption>
+        <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);

layouts/shortcodes/paige/code.html

@@ -6,6 +6,8 @@
 {{ $lang := .Get 0 | default (.Get "lang") | default "plaintext" }}
 {{ $maxheight := .Get "maxheight" }}
 {{ $maxwidth := .Get "maxwidth" }}
+{{ $number := .Get "number" }}
+{{ $numbered := .Get "numbered" }}
 {{ $options := .Get "options" }}
 {{ $width := .Get "width" }}
 
@@ -21,5 +23,7 @@
     "justify" $justify
     "maxheight" $maxheight
     "maxwidth" $maxwidth
+    "number" $number
+    "numbered" $numbered
     "width" $width
 ) }}

layouts/shortcodes/paige/figure.html

@@ -6,6 +6,8 @@
 {{ $justify := .Get "justify" }}
 {{ $maxheight := .Get "maxheight" }}
 {{ $maxwidth := .Get "maxwidth" }}
+{{ $number := .Get "number" }}
+{{ $numbered := .Get "numbered" }}
 {{ $width := .Get "width" }}
 
 {{ partial "paige/figure.html" (dict
@@ -18,5 +20,7 @@
     "justify" $justify
     "maxheight" $maxheight
     "maxwidth" $maxwidth
+    "number" $number
+    "numbered" $numbered
     "width" $width
 ) }}

layouts/shortcodes/paige/gallery.html

@@ -7,6 +7,8 @@
 {{ $maxheight := .Get "maxheight" }}
 {{ $maxwidth := .Get "maxwidth" }}
 {{ $method := .Get "method" | default "resize" }}
+{{ $number := .Get "number" }}
+{{ $numbered := .Get "numbered" }}
 {{ $options := .Get "options" | default "550x webp picture Lanczos" }}
 {{ $raw := .Get "raw" }}
 {{ $type := .Get "type" | default "rows" }}
@@ -61,6 +63,7 @@
 {{ else }}
     {{ $inner := chomp .Inner }}
     {{ $resources := slice }}
+    {{ $showcaption := $caption }}
 
     {{ with $images }}
         {{ with $.Page.Resources.Match . }}
@@ -76,6 +79,19 @@
         {{ end }}
     {{ end }}
 
+    {{ 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>
         {{ if eq $type "grid" }}
             <div class="container-fluid px-0">
@@ -128,8 +144,8 @@
         {{ else }}
             {{ errorf "invalid type: %q" $type }}
         {{ end }}
-        {{ with $caption }}
+        {{ if $showcaption }}
-            <figcaption class="figure-caption mt-2 text-center">{{ . }}</figcaption>
+            <figcaption class="figure-caption mt-2 text-center">{{ $caption }}</figcaption>
         {{ end }}
     </figure>
 {{ end }}

layouts/shortcodes/paige/image.html

@@ -8,6 +8,8 @@
 {{ $maxheight := .Get "maxheight" }}
 {{ $maxwidth := .Get "maxwidth" }}
 {{ $method := .Get "method" }}
+{{ $number := .Get "number" }}
+{{ $numbered := .Get "numbered" }}
 {{ $options := .Get "options" }}
 {{ $raw := .Get "raw" }}
 {{ $src := .Get 0 | default (.Get "src") }}
@@ -26,6 +28,8 @@
     "maxheight" $maxheight
     "maxwidth" $maxwidth
     "method" $method
+    "number" $number
+    "numbered" $numbered
     "options" $options
     "raw" $raw
     "src" $src

layouts/shortcodes/paige/quote.html

@@ -6,6 +6,8 @@
 {{ $justify := .Get "justify" }}
 {{ $maxheight := .Get "maxheight" }}
 {{ $maxwidth := .Get "maxwidth" }}
+{{ $number := .Get "number" }}
+{{ $numbered := .Get "numbered" }}
 {{ $width := .Get "width" }}
 
 {{ $content = printf `<blockquote class="blockquote mb-0">%v</blockquote>` $content }}
@@ -19,5 +21,7 @@
     "justify" $justify
     "maxheight" $maxheight
     "maxwidth" $maxwidth
+    "number" $number
+    "numbered" $numbered
     "width" $width
 ) }}