[C] re-write image shaper, wire up captions, etc.

components/content-blocks/Image/Image.tsx

@@ -1,8 +1,10 @@
 import { FunctionComponent } from "react";
 import { graphql, useFragment, FragmentType } from "@/gql/public-schema";
+import { useTranslation } from "react-i18next";
 import withModal from "@/components/hoc/withModal/withModal";
 import { BaseContentBlockProps } from "@/components/shapes";
 import { imageShaper } from "@/helpers";
+import { fluidScale } from "@rubin-epo/epo-react-lib/styles";
 import * as Styled from "./styles";
 
 const Fragment = graphql(`
@@ -13,12 +15,20 @@ const Fragment = graphql(`
     image {
       url {
         directUrlPreview
+        directUrlOriginal
+        PNG
+        HighJPG
+        LowJPG
+        preview
       }
       width
       height
-      additional {
+      metadata: additional {
         AltTextEN
         AltTextES
+        CaptionEN
+        CaptionES
+        Credit
       }
     }
   }
@@ -35,12 +45,42 @@ interface ImageContentBlockProps extends BaseContentBlockProps {
 const ImageContentBlock: FunctionComponent<ImageContentBlockProps> = (
   props
 ) => {
+  const { t } = useTranslation();
   const { data, site, isOpen, openModal } = props;
-  const { caption, layout, image } = useFragment(Fragment, data);
+  const {
+    layout,
+    image: rawImage,
+    caption: fallbackCaption = "",
+  } = useFragment(Fragment, data);
   const finalLayout = isOpen ? "vertical" : layout;
 
+  const image = imageShaper(site, rawImage[0]);
+
+  console.log({ image });
+
+  if (!image) return null;
+
+  const { width, caption = fallbackCaption, credit } = image;
+
+  const figCaption = `${caption !== null ? caption : ""}${
+    credit
+      ? ` ${t("translation:image.credit", {
+          credit,
+          interpolation: { escapeValue: false },
+        })}`
+      : ""
+  }`;
+
   return (
-    <Styled.Container className="content-block">
+    <Styled.Container
+      className="content-block"
+      style={{
+        "--max-image-width": isOpen ? `${width}px` : "auto",
+        "--image-content-block-padding": isOpen
+          ? 0
+          : fluidScale("20px", "10px"),
+      }}
+    >
       {!isOpen && (
         <Styled.ExpandContract
           onToggle={openModal}
@@ -49,15 +89,12 @@ const ImageContentBlock: FunctionComponent<ImageContentBlockProps> = (
         />
       )}
       <Styled.Figure
-        caption={caption}
+        caption={figCaption}
         $layout={finalLayout}
         $darkMode={isOpen}
         withBackground={!isOpen}
       >
-        <Styled.Image
-          image={imageShaper(site, image[0])}
-          $layout={finalLayout}
-        />
+        <Styled.Image image={image} $layout={finalLayout} />
       </Styled.Figure>
     </Styled.Container>
   );

components/content-blocks/Image/styles.ts

@@ -4,19 +4,22 @@ import {
   Image as BaseImage,
 } from "@rubin-epo/epo-react-lib";
 import BaseExpandContract from "@/atomic/ExpandContract/ExpandContract";
-import { fluidScale } from "@rubin-epo/epo-react-lib/styles";
 import { BREAK_PHABLET } from "@/styles/globalStyles";
 
 interface LayoutProp {
   $layout: "vertical" | "horizontal";
 }
 
 export const Container = styled.section`
-  --image-content-block-padding: ${fluidScale("20px", "10px")};
+  align-self: center;
+  max-width: var(--max-image-width);
+  width: 100%;
   position: relative;
 `;
 
-export const Figure = styled(BaseFigure)<LayoutProp & { $darkMode: boolean }>`
+export const Figure = styled(BaseFigure)<
+  LayoutProp & { $darkMode: boolean; $layout: string }
+>`
   ${({ $layout, $darkMode }) => css`
     ${$darkMode &&
     css`
@@ -33,7 +36,7 @@ export const Figure = styled(BaseFigure)<LayoutProp & { $darkMode: boolean }>`
         padding: 0;
       }
     `}
-  padding: ${$darkMode ? 0 : "var(--image-content-block-padding)"};
+  padding: var(--image-content-block-padding, 0);
   `}
 
   &:after {

components/shapes/index.ts

@@ -1,6 +1,5 @@
 export type { default as Category } from "./category";
 export type { default as BaseContentBlockProps } from "./contentBlock";
-export type { Image } from "./image";
 export type { InternalLink, InternalLinkWithChildren } from "./link";
 export type { Locale, Localized } from "./locale";
 export type { default as PageData } from "./page";

components/templates/InvestigationLandingPage/index.tsx

@@ -12,12 +12,19 @@ const Fragment = graphql(`
     image {
       url {
         directUrlPreview
+        directUrlOriginal
+        PNG
+        HighJPG
+        LowJPG
       }
       width
       height
-      additional {
+      metadata: additional {
         AltTextEN
         AltTextES
+        CaptionEN
+        CaptionES
+        Credit
       }
     }
     children {