blog/2025
1
Fork 0
Code Issues Activity

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

Browse Source
This commit is contained in:
Richard Dern
2026-03-03 01:10:02 +01:00
parent 208a873d80
commit 6745469841
3 changed files with 115 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
config/_default/markup.yaml
View File

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

86
themes/2026/assets/css/content.css
View File

@@ -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;
}

39
themes/2026/layouts/_partials/media/render-image.html
View File

@@ -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 -}}