Add alignment option to images without captions

NASA-IMPACT · Jun 16, 2023 · 8e7f0c4 · 8e7f0c4
1 parent a44d741
commit 8e7f0c4
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 11 deletions.
diff --git a/app/scripts/components/common/blocks/images/index.js b/app/scripts/components/common/blocks/images/index.js
@@ -29,17 +29,26 @@ Caption.propTypes = {
 export default function Image(props) {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const { align, caption, attrAuthor, ...propsWithoutAttrs } = props;
-  const imageAlign = align ? align : 'center';
-  return caption || attrAuthor ? (
-    // if it is an inline image with a caption
-    <Figure className={`align-${imageAlign}`}>
-      <img loading='lazy' {...propsWithoutAttrs} />
-      <Caption attrAuthor={attrAuthor} attrUrl={props.attrUrl}>
-        {caption}
-      </Caption>
-    </Figure>
-  ) : (
-    <img loading='lazy' {...propsWithoutAttrs} />
+  if (caption || attrAuthor) {
+    const imageAlign = align ? align : 'center';
+    return (
+      // if it is an inline image with a caption
+      <Figure className={`align-${imageAlign}`}>
+        <img loading='lazy' {...propsWithoutAttrs} />
+        <Caption attrAuthor={attrAuthor} attrUrl={props.attrUrl}>
+          {caption}
+        </Caption>
+      </Figure>
+    );
+  }
+
+  const imageAlign = align ? align : 'left';
+  return (
+    <img
+      className={`img-align-${imageAlign}`}
+      loading='lazy'
+      {...propsWithoutAttrs}
+    />
   );
 }
 

diff --git a/app/scripts/styles/content-block.js b/app/scripts/styles/content-block.js
@@ -99,6 +99,15 @@ const ContentBlockProse = styled(VarProse)`
       text-align: center;
     }
   }
+
+  .img-align-right {
+    margin-left: auto;
+  }
+
+  .img-align-center {
+    margin-left: auto;
+    margin-right: auto;
+  }
 `;
 
 // assign displayName that a block can tell