fix: captions on images (#87)

* fix: captions on images Signed-off-by: james-a-morris <[email protected]> * nit: lint Signed-off-by: james-a-morris <[email protected]> --------- Signed-off-by: james-a-morris <[email protected]>
across-protocol · Nov 13, 2024 · 2064db8 · 2064db8
1 parent 309eb0b
commit 2064db8
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 3 deletions.
diff --git a/src/app/(routes)/blog/[slug]/_components/article-content.tsx b/src/app/(routes)/blog/[slug]/_components/article-content.tsx
@@ -137,7 +137,7 @@ const nodeRenderers: RenderNode = {
     const mimeGroup = file?.contentType.split("/")[0]; // image / video etc
     switch (mimeGroup) {
       case "image":
-        return <ContentfulImage image={data} />;
+        return <ContentfulImage image={data} displayDescription />;
       // TODO: test this, make custom component if necessary
       case "video":
         return (

diff --git a/src/app/(routes)/blog/[slug]/_components/contentful-image.tsx b/src/app/(routes)/blog/[slug]/_components/contentful-image.tsx
@@ -34,7 +34,7 @@ export default function ContentfulImage({
       };
 
   return (
-    <div className="relative flex h-full w-full flex-col items-center gap-4">
+    <div className="relative flex h-full w-full flex-col items-center gap-2 pb-2">
       <Image
         src={urlWithProtocol}
         alt={description ?? "description"}
@@ -43,7 +43,9 @@ export default function ContentfulImage({
         aria-description={description}
         {...props}
       />
-      {description && displayDescription && <p>{description}</p>}
+      {description && displayDescription && (
+        <p className="font-extralight">{description}</p>
+      )}
     </div>
   );
 }