content, css, replacer: <img align="center"> in content

3 files changed, 11 insertions, 0 deletions

diff --git a/src/content/dependencies/transformContent.js b/src/content/dependencies/transformContent.js
index 69030224..faae35aa 100644
--- a/src/content/dependencies/transformContent.js
+++ b/src/content/dependencies/transformContent.js
@@ -232,6 +232,7 @@ export default {
               warnings,
               width,
               height,
+              align,
               pixelate,
             } = node;
 
@@ -258,6 +259,9 @@ export default {
               inline: false,
               data:
                 html.tag('div', {class: 'content-image-container'},
+                  align === 'center' &&
+                    {class: 'align-center'},
+
                   image.slots({
                     src,
 
diff --git a/src/static/site6.css b/src/static/site6.css
index 686b3c40..e718791b 100644
--- a/src/static/site6.css
+++ b/src/static/site6.css
@@ -778,6 +778,12 @@ ul.image-details li {
   margin-bottom: 1em;
 }
 
+.content-image-container.align-center {
+  text-align: center;
+  margin-top: 1.5em;
+  margin-bottom: 1.5em;
+}
+
 .content-image {
   display: inline-block !important;
 }
diff --git a/src/util/replacer.js b/src/util/replacer.js
index f692b068..9779f84e 100644
--- a/src/util/replacer.js
+++ b/src/util/replacer.js
@@ -510,6 +510,7 @@ export function postprocessImages(inputNodes) {
         if (attributes.get('style')) imageNode.style = attributes.get('style');
         if (attributes.get('width')) imageNode.width = parseInt(attributes.get('width'));
         if (attributes.get('height')) imageNode.height = parseInt(attributes.get('height'));
+        if (attributes.get('align')) imageNode.align = attributes.get('align');
         if (attributes.get('pixelate')) imageNode.pixelate = true;
 
         if (attributes.get('warning')) {