render image captions

AprilSylph · Nov 24, 2021 · 1d8c21e · 1d8c21e
1 parent 4e17d56
commit 1d8c21e
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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;