Ajoute un mode de centrage des figures et améliore les légendes

config/_default/markup.yaml

@@ -1,6 +1,9 @@
 goldmark:
   parser:
     wrapStandAloneImageWithinParagraph: false
+    attribute:
+      block: true
+      title: true
   renderer:
     unsafe: true
 tableOfContents:

themes/2026/assets/css/content.css

@@ -671,14 +671,14 @@ main > article figure.figure-media {
     align-items: stretch;
 }
 
-main > article > figure.figure-media.figure-media-with-meta:nth-of-type(odd) {
+main > article > figure.figure-media.figure-media-with-meta:not(.figure-media-centered):nth-of-type(odd) {
     --figure-media-column: 2;
     --figure-meta-column: 1;
     --figure-media-justify: start;
     grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
 }
 
-main > article > figure.figure-media.figure-media-with-meta:nth-of-type(odd) > figcaption.figure-media-meta {
+main > article > figure.figure-media.figure-media-with-meta:not(.figure-media-centered):nth-of-type(odd) > figcaption.figure-media-meta {
     text-align: right;
     border-left: 0;
     padding-left: 0;
@@ -726,16 +726,33 @@ main > article figure.figure-media.figure-media-without-meta > :is(video, img, a
     grid-column: 1;
 }
 
+main > article figure.figure-media.figure-media-centered {
+    --figure-media-column: 1;
+    --figure-meta-column: 1;
+    --figure-media-justify: center;
+    grid-template-columns: minmax(0, 1fr);
+    gap: var(--space-2);
+}
+
+main > article figure.figure-media.figure-media-centered > :is(video, img, a) {
+    grid-column: 1;
+    grid-row: 1;
+}
+
 main > article figure.figure-media > figcaption.figure-media-meta {
     grid-column: var(--figure-meta-column);
     grid-row: 1;
     margin-top: 0;
+    border-top: 1px solid var(--color-border-strong);
     border-left: 1px solid var(--color-border-strong);
     padding-left: var(--space-6);
+    padding-top: var(--space-2);
+    padding-bottom: var(--space-2);
     display: flex;
     flex-direction: column;
     min-height: 100%;
     gap: var(--space-2);
+    background: color-mix(in srgb, var(--color-background-alt) 82%, transparent);
 }
 
 main > article figure.figure-media > figcaption.figure-media-meta > .figure-media-meta-main {
@@ -752,19 +769,62 @@ main > article figure.figure-media > figcaption.figure-media-meta > .figure-medi
     gap: var(--space-2);
 }
 
-main > article figure.figure-media > figcaption.figure-media-meta > .figure-media-meta-extra > p.cover-attribution {
-    border-top: var(--border-width-regular) solid var(--color-accent-2);
-    padding-top: var(--space-4);
-}
-
 main > article figure.figure-media > figcaption.figure-media-meta p {
     margin-top: 0;
 }
 
-main > article > figure.figure-media.figure-media-with-meta:nth-of-type(odd) > figcaption.figure-media-meta > .figure-media-meta-extra > p.cover-attribution {
+main > article figure.figure-media > figcaption.figure-media-meta .cover-title {
+    font-size: clamp(0.98rem, 1.15vw, 1.06rem);
+    letter-spacing: 0.03em;
+    text-transform: uppercase;
+}
+
+main > article figure.figure-media > figcaption.figure-media-meta .cover-description {
+    font-size: 0.95rem;
+    color: var(--color-text-muted);
+}
+
+main > article figure.figure-media > figcaption.figure-media-meta > .figure-media-meta-extra > p.cover-attribution {
+    border-top: 1px solid var(--color-border);
+    padding-top: var(--space-2);
+}
+
+main > article > figure.figure-media.figure-media-with-meta:not(.figure-media-centered):nth-of-type(odd) > figcaption.figure-media-meta > .figure-media-meta-extra > p.cover-attribution {
     justify-content: flex-end;
 }
 
+main > article figure.figure-media.figure-media-centered > figcaption.figure-media-meta {
+    grid-column: 1;
+    grid-row: 2;
+    width: min(100%, 72ch);
+    margin-inline: auto;
+    min-height: 0;
+    text-align: center;
+    border-left: 0;
+    border-right: 0;
+    padding-left: var(--space-2);
+    padding-right: var(--space-2);
+}
+
+main > article figure.figure-media.figure-media-centered > figcaption.figure-media-meta > .figure-media-meta-main,
+main > article figure.figure-media.figure-media-centered > figcaption.figure-media-meta > .figure-media-meta-extra {
+    align-items: center;
+}
+
+main > article figure.figure-media.figure-media-centered > figcaption.figure-media-meta > .figure-media-meta-main > :is(.cover-title, .cover-description),
+main > article figure.figure-media.figure-media-centered > figcaption.figure-media-meta > .figure-media-meta-extra > :is(.cover-attribution, details) {
+    width: min(100%, 68ch);
+}
+
+main > article figure.figure-media.figure-media-centered > figcaption.figure-media-meta > .figure-media-meta-extra > p.cover-attribution {
+    width: min(100%, 68ch);
+    justify-content: center;
+}
+
+main > article figure.figure-media.figure-media-centered > figcaption.figure-media-meta > .figure-media-meta-extra > details {
+    text-align: left;
+}
+
 main > article figure.figure-media > figcaption.figure-media-meta > .figure-media-meta-extra > details {
     margin-top: 0;
 }
@@ -981,13 +1041,17 @@ body:has(> header.article-header) > main > aside.article-toc nav[aria-label="Som
         gap: var(--space-2);
     }
 
-    main > article > figure.figure-media.figure-media-with-meta:nth-of-type(odd) {
+    main > article > figure.figure-media.figure-media-with-meta:not(.figure-media-centered):nth-of-type(odd) {
         --figure-media-column: 1;
         --figure-meta-column: 1;
         --figure-media-justify: start;
         grid-template-columns: minmax(0, 1fr);
     }
 
+    main > article figure.figure-media.figure-media-centered {
+        --figure-media-justify: center;
+    }
+
     main > article figure.figure-media > :is(video, img, a),
     main > article figure.figure-media > figcaption.figure-media-meta {
         grid-column: 1;
@@ -1006,11 +1070,11 @@ body:has(> header.article-header) > main > aside.article-toc nav[aria-label="Som
         margin-top: 0;
     }
 
-    main > article > figure.figure-media.figure-media-with-meta:nth-of-type(odd) > figcaption.figure-media-meta {
+    main > article > figure.figure-media.figure-media-with-meta:not(.figure-media-centered):nth-of-type(odd) > figcaption.figure-media-meta {
         text-align: left;
     }
 
-    main > article > figure.figure-media.figure-media-with-meta:nth-of-type(odd) > figcaption.figure-media-meta > .figure-media-meta-extra > p.cover-attribution {
+    main > article > figure.figure-media.figure-media-with-meta:not(.figure-media-centered):nth-of-type(odd) > figcaption.figure-media-meta > .figure-media-meta-extra > p.cover-attribution {
         justify-content: flex-start;
     }
 

themes/2026/layouts/_partials/media/render-image.html

@@ -19,11 +19,46 @@
 {{- end -}}
 {{- $metaTitle := index $data "title" -}}
 {{- $hasMeta := or $metaTitle (or $description (or $data.attribution $data.prompt)) -}}
-<figure class="figure-media{{ if $hasMeta }} figure-media-with-meta{{ else }} figure-media-without-meta{{ end }}">
+{{- $attributes := .Attributes | default dict -}}
+{{- $imageClasses := "" -}}
+{{- with index $attributes "class" -}}
+  {{- $imageClasses = lower (trim . " ") -}}
+{{- end -}}
+{{- $layout := "" -}}
+{{- with index $attributes "layout" -}}
+  {{- $layout = lower (trim . " ") -}}
+{{- end -}}
+{{- $hasCenterClass := gt (len (findRE `(^|\\s)(center|centered)(\\s|$)` $imageClasses)) 0 -}}
+{{- $hasFullClass := gt (len (findRE `(^|\\s)(full|full-width|wide)(\\s|$)` $imageClasses)) 0 -}}
+{{- $forceCentered := false -}}
+{{- if or (in (slice "center" "centered") $layout) $hasCenterClass -}}
+  {{- $forceCentered = true -}}
+{{- end -}}
+{{- if or (in (slice "full" "full-width" "wide") $layout) $hasFullClass -}}
+  {{- $forceCentered = true -}}
+{{- end -}}
+{{- $forceWithoutMeta := false -}}
+{{- if or (in (slice "full" "full-width" "wide") $layout) $hasFullClass -}}
+  {{- $forceWithoutMeta = true -}}
+{{- end -}}
+{{- $showMeta := and $hasMeta (not $forceWithoutMeta) -}}
+{{- $figureClasses := slice "figure-media" -}}
+{{- if $showMeta -}}
+  {{- $figureClasses = $figureClasses | append "figure-media-with-meta" -}}
+{{- else -}}
+  {{- $figureClasses = $figureClasses | append "figure-media-without-meta" -}}
+{{- end -}}
+{{- if $forceCentered -}}
+  {{- $figureClasses = $figureClasses | append "figure-media-centered" -}}
+{{- end -}}
+{{- with $imageClasses -}}
+  {{- $figureClasses = $figureClasses | append . -}}
+{{- end -}}
+<figure class="{{ delimit $figureClasses " " }}">
   <a href="{{ $image.RelPermalink }}" title="Cliquez pour agrandir l'image">
     <img src="{{ $display.RelPermalink }}" alt="{{ $alt }}" title="{{ $title }}">
   </a>
-  {{- if $hasMeta -}}
+  {{- if $showMeta -}}
   <figcaption class="figure-media-meta cover-meta">
     <div class="figure-media-meta-main">
       {{- with $metaTitle -}}