diff --git a/src/lib/npf.css b/src/lib/npf.css index 7402eb6..a63bda2 100644 --- a/src/lib/npf.css +++ b/src/lib/npf.css @@ -126,6 +126,10 @@ width: 100%; } +[data-block="image"] figcaption { + text-align: center; +} + [data-row] > [data-block="image"] img { width: 100%; height: 100%; diff --git a/src/lib/npf.js b/src/lib/npf.js index 57c522a..6836d24 100644 --- a/src/lib/npf.js +++ b/src/lib/npf.js @@ -83,7 +83,7 @@ const blockRenderers = { return element; }, - image ({ attribution, alt_text, media }) { + image ({ attribution, alt_text, caption, media }) { return document.createElement('figure').tap(figure => { figure.append(document.createElement('img').tap(img => { alt_text && (img.alt = img.title = alt_text); @@ -94,6 +94,7 @@ const blockRenderers = { .map(({ url, width }) => `${url} ${width}w`) .join(',\n'); })); + if (attribution?.url) { figure.append(document.createElement('a').tap(a => { a.href = attribution.url; @@ -110,6 +111,10 @@ const blockRenderers = { } })); } + + if (caption) { + figure.append(Object.assign(document.createElement('figcaption'), { textContent: caption })); + } }); }, diff --git a/src/outbox.css b/src/outbox.css index b7f548a..e063f88 100644 --- a/src/outbox.css +++ b/src/outbox.css @@ -383,6 +383,11 @@ article footer button { margin-right: 0; } +[data-block="image"] figcaption { + padding: 0 var(--post-padding); + margin: calc(var(--post-vertical-spacing) / 2) 0; +} + [data-block="image"] a { display: block; overflow: hidden;