[F] Callouts use new DAM plugin

Includes: - Main Callout Image - TwoTone Callout Background Image - Glossary Term Image - Investigation Hero Images
lsst-epo · Nov 22, 2023 · b5e6417 · b5e6417
1 parent b4fa161
commit b5e6417
Show file tree

Hide file tree

Showing 11 changed files with 78 additions and 96 deletions.
diff --git a/components/atomic/Tile/patterns/InvestigationTile/index.js b/components/atomic/Tile/patterns/InvestigationTile/index.js
@@ -3,15 +3,15 @@ import { useUID } from "react-uid";
 import { Image } from "@rubin-epo/epo-react-lib";
 import * as Styled from "./styles";
 import { useTranslation } from "react-i18next";
-import { useDamAssetAsImage } from "@/lib/utils";
+import { imageShaper } from "@/lib/utils";
 
 const InvestigationTile = ({ investigation, useExternalLink }) => {
   const uid = useUID();
 
   const { t } = useTranslation();
-  const { damAsset, status, title, externalUrl, landingPage } =
+  const { cantoAssetSingle, status, title, externalUrl, landingPage } =
     investigation || {};
-  const image = useDamAssetAsImage(damAsset?.[0]);
+  const image = imageShaper("EN", cantoAssetSingle?.[0]);
   const url = useExternalLink ? externalUrl : landingPage?.[0]?.uri;
   const isInactive = status === "inactive";
 
@@ -43,7 +43,7 @@ InvestigationTile.propTypes = {
   investigation: PropTypes.shape({
     uri: PropTypes.string,
     title: PropTypes.string,
-    damAsset: PropTypes.array,
+    cantoAssetSingle: PropTypes.array,
     externalUrl: PropTypes.string,
     status: PropTypes.string,
     landingPage: PropTypes.arrayOf(

diff --git a/components/content-blocks/Callout/CalloutMain.js b/components/content-blocks/Callout/CalloutMain.js
@@ -2,25 +2,24 @@
 
 import PropTypes from "prop-types";
 import classNames from "classnames";
-import imageShape from "@/shapes/image";
 import { linksShape } from "@/shapes/link";
 import Wrapper from "./Wrapper";
 import { Header, Text, StyledMixedLink, StyledImage } from "./styles";
 import TempList from "@/components/dynamic/TempList";
-import { useDamAssetAsImage } from "@/lib/utils";
+import { imageShaper } from "@/lib/utils";
 
 export default function CalloutMain({ callout }) {
   const {
     dynamicComponent,
     header,
-    damAsset,
+    cantoAssetSingle,
     links,
     padImage,
     text,
     ...wrapperProps
   } = callout;
 
-  const calloutImage = useDamAssetAsImage(damAsset[0]);
+  const calloutImage = imageShaper("EN", cantoAssetSingle[0]);
 
   return (
     <Wrapper
@@ -65,7 +64,7 @@ CalloutMain.propTypes = {
   callout: PropTypes.shape({
     header: PropTypes.string,
     text: PropTypes.node,
-    damAsset: PropTypes.arrayOf(imageShape).isRequired,
+    cantoAssetSingle: PropTypes.array,
     padImage: PropTypes.bool,
     links: linksShape,
     backgroundColor: PropTypes.string,

diff --git a/components/content-blocks/Callout/CalloutTwoTone.js b/components/content-blocks/Callout/CalloutTwoTone.js
@@ -13,7 +13,7 @@ import {
   StyledTwoToneImage,
 } from "./styles";
 import { ResponsiveImage } from "@rubin-epo/epo-react-lib";
-import { useDamAssetAsImage } from "@/lib/utils";
+import { imageShaper } from "@/lib/utils";
 
 export default function CalloutTwoTone({ callout }) {
   const {
@@ -26,7 +26,7 @@ export default function CalloutTwoTone({ callout }) {
     text,
   } = callout;
 
-  const calloutBackgroundImage = useDamAssetAsImage(backgroundImage[0]);
+  const calloutBackgroundImage = imageShaper("EN", backgroundImage[0]);
 
   return (
     <>
@@ -73,10 +73,10 @@ export default function CalloutTwoTone({ callout }) {
 CalloutTwoTone.propTypes = {
   callout: PropTypes.shape({
     backgroundColor: PropTypes.string,
-    backgroundImage: PropTypes.arrayOf(imageShape).isRequired,
+    backgroundImage: PropTypes.array,
     captionRichText: PropTypes.node,
     header: PropTypes.string,
-    image: PropTypes.arrayOf(imageShape).isRequired,
+    image: PropTypes.arrayOf(imageShape),
     links: linksShape,
     text: PropTypes.node,
   }).isRequired,

diff --git a/components/layout/InvestigationHero/index.js b/components/layout/InvestigationHero/index.js
@@ -2,12 +2,12 @@ import PropTypes from "prop-types";
 import * as Styled from "./styles";
 import { Button, Image, IconComposer } from "@rubin-epo/epo-react-lib";
 import T from "@/page/Translate";
-import { useDamAssetAsImage } from "@/lib/utils";
+import { imageShaper } from "@/lib/utils";
 
 export default function InvestigationHero({ investigation }) {
-  const { damAsset, title, externalUrl, duration, status } =
+  const { cantoAssetSingle, title, externalUrl, duration, status } =
     investigation || {};
-  const image = useDamAssetAsImage(damAsset?.[0]);
+  const image = imageShaper("EN", cantoAssetSingle?.[0]);
 
   if (!investigation) return null;
 
@@ -52,5 +52,6 @@ InvestigationHero.propTypes = {
         title: PropTypes.string,
       })
     ),
+    cantoAssetSingle: PropTypes.array,
   }),
 };
diff --git a/components/templates/GlossaryPage/index.js b/components/templates/GlossaryPage/index.js
@@ -1,7 +1,7 @@
 import PropTypes from "prop-types";
 import Body from "@/global/Body";
 import Breadcrumbs from "@/page/Breadcrumbs";
-import { useCustomBreadcrumbs, useDamAssetAsImage } from "@/lib/utils";
+import { useCustomBreadcrumbs, imageShaper } from "@/lib/utils";
 import {
   Container,
   ResponsiveImage,
@@ -13,15 +13,15 @@ import { useTranslation } from "react-i18next";
 export default function GlossaryPage({ data }) {
   const { t } = useTranslation();
 
-  const { id, title, description, uri, text, damAsset, caption } = data;
+  const { id, title, description, uri, text, cantoAssetSingle, caption } = data;
 
   const customBreadcrumbs = useCustomBreadcrumbs("Glossary");
 
   const glossaryCrumb = customBreadcrumbs.find((b) =>
     b.uri.includes("glossary")
   );
 
-  const image = useDamAssetAsImage(damAsset);
+  const image = imageShaper("EN", cantoAssetSingle[0]);
 
   const bodyProps = {
     description,
@@ -68,7 +68,7 @@ GlossaryPage.propTypes = {
     description: PropTypes.string,
     uri: PropTypes.string,
     text: PropTypes.node,
-    damAsset: PropTypes.array,
+    cantoAssetSingle: PropTypes.array,
     caption: PropTypes.string,
   }),
 };
diff --git a/lib/api/fragments/content-blocks.js b/lib/api/fragments/content-blocks.js
@@ -1,4 +1,4 @@
-import { getImageFields } from "@/api/fragments/image";
+import { getImageFields, cantoSingleAsset } from "@/api/fragments/image";
 import { getLinkFields } from "@/api/fragments/link";
 
 /// ///////////////////////////////////////////
@@ -31,14 +31,7 @@ export const calloutBlockFragment = `
           backgroundColor
           dynamicComponent
           header
-          damAsset {
-            height
-            width
-            damMetadata {
-              metadataKey
-              metadataValue
-            }
-          }
+          ${cantoSingleAsset}
           links {
             ...links
           }
@@ -51,14 +44,7 @@ export const calloutBlockFragment = `
         }
         ...on callouts_calloutTwoTone_Entry {
           backgroundColor
-          backgroundImage: damAsset {
-            height
-            width
-            damMetadata {
-              metadataKey
-              metadataValue
-            }
-          }
+          backgroundImage: ${cantoSingleAsset}
           captionRichText
           header
           image: contentImage {
@@ -277,14 +263,7 @@ export const investigationGridBlockFragment = `
               title
               externalUrl: externalUrlTranslatable
               status: investigationStatus
-              damAsset {
-                height
-                width
-                damMetadata {
-                  metadataKey
-                  metadataValue
-                }
-              }
+              ${cantoSingleAsset}
               landingPage {
                 uri
                 title
@@ -381,14 +360,7 @@ export const relatedContentFragment = `
               uri
               status: investigationStatus
               description: investigationDescription
-              damAsset {
-                height
-                width
-                damMetadata {
-                  metadataKey
-                  metadataValue
-                }
-              }
+              ${cantoSingleAsset}
               landingPage {
                 uri
               }

diff --git a/lib/api/fragments/glossary-term.js b/lib/api/fragments/glossary-term.js
@@ -1,4 +1,5 @@
 import { fullBaseFields } from "@/lib/api/fragments/shared";
+import { cantoSingleAsset } from "@/api/fragments/image";
 
 export const glossaryTermFragment = `
   fragment glossaryTermFragment on glossaryTerms_glossaryTerm_Entry {
@@ -10,14 +11,7 @@ export const glossaryTermFragmentFull = `
   fragment glossaryTermFragmentFull on glossaryTerms_glossaryTerm_Entry {
     ...on glossaryTerms_glossaryTerm_Entry {
       text
-      damAsset {
-        height
-        width
-        damMetadata {
-          metadataKey
-          metadataValue
-        }
-      }
+      ${cantoSingleAsset}
       caption
     }
     ancestors {

diff --git a/lib/api/fragments/image.js b/lib/api/fragments/image.js
@@ -18,3 +18,24 @@ export function getImageFields(mode = "fit", width = 900, height) {
     url ${transform(mode, width, height)}
   `;
 }
+
+export const cantoSingleAsset = gql`
+cantoAssetSingle {
+  url {
+    directUrlPreview
+    directUrlOriginal
+    PNG
+    HighJPG
+    LowJPG
+    preview
+  }
+  width
+  height
+  metadata: additional {
+    AltTextEN
+    AltTextES
+    CaptionEN
+    CaptionES
+    Credit
+  }
+}`;
diff --git a/lib/api/fragments/investigation.js b/lib/api/fragments/investigation.js
@@ -1,19 +1,13 @@
+import { cantoSingleAsset } from "@/api/fragments/image";
+
 export const investigationFragment = `
   fragment investigationFragment on investigations_investigation_Entry {
     id
     title
     uri
     ...on investigations_investigation_Entry {
       date: dateUpdated
-      # description
-      damAsset {
-        height
-        width
-        damMetadata {
-          metadataKey
-          metadataValue
-        }
-      }
+      ${cantoSingleAsset}
     }
   }
 `;
diff --git a/lib/api/investigation.js b/lib/api/investigation.js
@@ -1,5 +1,6 @@
 import { gql } from "graphql-request";
 import { queryAPI } from "@/lib/fetch";
+import { cantoSingleAsset } from "@/api/fragments/image";
 
 export async function addRelatedInvestigation(entryData, site) {
   if (!entryData || !entryData.id) return null;
@@ -36,14 +37,7 @@ export async function getRelatedInvestigation(entryData, site = "default") {
               title
             }
           }
-          damAsset {
-            height
-            width
-            damMetadata {
-              metadataKey
-              metadataValue
-            }
-          }
+          ${cantoSingleAsset}
         }
       }
     }

diff --git a/lib/utils.js b/lib/utils.js
@@ -408,29 +408,36 @@ export function getLocaleString(siteString) {
 }
 
 // DAM METADATA
-export const useDamAssetAsImage = (damAsset) => {
-  if (!damAsset || damAsset.length === 0) {
-    return null;
-  }
+export const imageShaper = (site, data, className) => {
+  if (!data) return undefined;
+
+  const localeKeys = {
+    default: "EN",
+    es: "ES",
+  };
 
-  const { height, width, damMetadata: rawMetadata } = damAsset;
+  const key = localeKeys[site];
 
-  const damMetadata = rawMetadata.reduce((previous, current) => {
-    const { metadataKey, metadataValue } = current;
-    previous[metadataKey] = metadataValue;
+  const { metadata, url, width, height } = data;
+  const { directUrlPreview = "", directUrlOriginal = "", preview = "" } = url;
 
-    return previous;
-  }, {});
+  const urlWithoutConstraint = directUrlPreview.slice(0, -3);
+  const constraint = Math.max(width, height);
 
-  const { directImageUrl: url, altText, thumbnailUrl: thumb } = damMetadata;
+  const altText = metadata[`AltText${key}`];
+  const caption = metadata[`Caption${key}`];
+  const credit = metadata.Credit;
 
   return {
-    url,
-    url2x: url,
-    url3x: url,
-    height,
-    width,
-    altText,
-    thumb,
+    url: `${urlWithoutConstraint}${Math.floor(constraint / 3)}`,
+    url2x: `${urlWithoutConstraint}${Math.floor(constraint / 2)}`,
+    url3x: directUrlOriginal,
+    thumb: preview,
+    width: Number(width),
+    height: Number(height),
+    className,
+    altText: altText === null ? undefined : altText,
+    caption: caption === null ? undefined : caption,
+    credit: credit === null ? undefined : credit,
   };
 };