Add figure description to sanityImages

src/components/customerCases/customerCase/CustomerCase.tsx

@@ -44,7 +44,10 @@ export default async function CustomerCase({
           />
         </div>
         <div className={styles.mainImageWrapper}>
-          <SanitySharedImage image={customerCase.image} />
+          <SanitySharedImage
+            image={customerCase.image}
+            showFigureDescription={true}
+          />
         </div>
         <div className={styles.sectionsWrapper}>
           {customerCase.sections.map((section) => (

src/components/image/SanityImage.tsx

@@ -5,6 +5,7 @@ import Image from "next/image";
 import { UseNextSanityImageProps, useNextSanityImage } from "next-sanity-image";
 import { useEffect, useState } from "react";
 
+import Text from "src/components/text/Text";
 import { client } from "studio/lib/client";
 import { IImage } from "studio/lib/interfaces/media";
 import { sharedClient } from "studioShared/lib/client";
@@ -40,10 +41,12 @@ const SanityAssetImage = ({
   image,
   imageProps,
   objectFit = "cover",
+  showFigureDescription,
 }: {
   image: IImage;
   imageProps?: UseNextSanityImageProps;
   objectFit?: "cover" | "none";
+  showFigureDescription?: boolean;
 }) => {
   const objectPosition = image.hotspot
     ? `${image.hotspot.x * 100}% ${image.hotspot.y * 100}%`
@@ -52,23 +55,28 @@ const SanityAssetImage = ({
     return null;
   }
   return (
-    <Image
-      alt={image?.alt || ""}
-      {...imageProps}
-      width={imageProps.width}
-      height={imageProps.height}
-      blurDataURL={image.metadata?.lqip}
-      style={
-        objectFit === "none"
-          ? {}
-          : {
-              objectFit: "cover",
-              objectPosition,
-              maxWidth: "100%",
-              maxHeight: "100%",
-            }
-      }
-    />
+    <div>
+      <Image
+        alt={image?.alt || ""}
+        {...imageProps}
+        width={imageProps.width}
+        height={imageProps.height}
+        blurDataURL={image.metadata?.lqip}
+        style={
+          objectFit === "none"
+            ? {}
+            : {
+                objectFit: "cover",
+                objectPosition,
+                maxWidth: "100%",
+                maxHeight: "100%",
+              }
+        }
+      />
+      {showFigureDescription && (
+        <Text type="imageLabel"> {image.figureDescription}</Text>
+      )}
+    </div>
   );
 };
 
@@ -77,9 +85,21 @@ export function SanityStudioImage({ image }: { image: IImage }) {
   return <SanityAssetImage image={image} imageProps={imageProps} />;
 }
 
-export function SanitySharedImage({ image }: { image: IImage }) {
+export function SanitySharedImage({
+  image,
+  showFigureDescription,
+}: {
+  image: IImage;
+  showFigureDescription?: boolean;
+}) {
   const imageProps = useNextSanityImage(sharedClient, image);
-  return <SanityAssetImage image={image} imageProps={imageProps} />;
+  return (
+    <SanityAssetImage
+      image={image}
+      imageProps={imageProps}
+      showFigureDescription={showFigureDescription}
+    />
+  );
 }
 
 function SanityGlobalImage({

src/components/text/Text.tsx

@@ -18,7 +18,8 @@ export type TextType =
   | "bodyBig"
   | "bodyXl"
   | "mobileH1"
-  | "mobileBodyNormal";
+  | "mobileBodyNormal"
+  | "imageLabel";
 
 const elementMap: { [key in TextType]: keyof JSX.IntrinsicElements } = {
   h1: "h1",
@@ -39,6 +40,7 @@ const elementMap: { [key in TextType]: keyof JSX.IntrinsicElements } = {
   bodyXl: "p",
   mobileH1: "h1",
   mobileBodyNormal: "p",
+  imageLabel: "span",
 };
 
 const classMap: { [key in TextType]?: string } = {
@@ -60,6 +62,7 @@ const classMap: { [key in TextType]?: string } = {
   bodyXl: styles.bodyXl,
   mobileH1: styles.mobileH1,
   mobileBodyNormal: styles.mobileBodyNormal,
+  imageLabel: styles.imageLabel,
 };
 
 const Text = ({

src/components/text/text.module.css

@@ -10,6 +10,7 @@
 .bodySmall,
 .bodyNormal,
 .bodyBig,
+.imageLabel,
 .list {
   font-family: var(--font-britti-sans);
   line-height: 140%;
@@ -182,3 +183,12 @@
   line-height: 130%;
   white-space: pre-line;
 }
+
+.imageLabel {
+  font-size: var(--Font-size-Picture-label, 1rem);
+  font-style: normal;
+  font-weight: 400;
+  line-height: 150%;
+  letter-spacing: 0.05rem;
+  padding: 0rem 9.25rem 0rem 4rem;
+}

studio/lib/interfaces/media.ts

@@ -27,6 +27,7 @@ export interface IImage {
   metadata?: {
     lqip: string;
   };
+  figureDescription?: string;
 }
 
 export interface ImageExtendedProps extends IImage {

studio/schemas/fields/media.ts

@@ -53,7 +53,16 @@ export const internationalizedImage = defineField({
   title: "Image",
   type: "image",
   options: { hotspot: true },
-  fields: [internationalizedImageAltField],
+  fields: [
+    internationalizedImageAltField,
+    {
+      name: "figureDescription",
+      type: "internationalizedArrayString",
+      title: "Figure Description",
+      description:
+        "Provide a figure description of the image. Leave empty if figure description is not needed.",
+    },
+  ],
   preview: {
     select: {
       alt: "alt",

studioShared/lib/queries/customerCases.ts

@@ -8,7 +8,8 @@ const INTERNATIONALIZED_IMAGE_FRAGMENT = groq`
   "metadata": asset -> metadata {
     lqip
   },
-  "alt": ${translatedFieldFragment("alt")}
+  "alt": ${translatedFieldFragment("alt")},
+  "figureDescription": ${translatedFieldFragment("figureDescription")}
 `;
 
 const CUSTOMER_CASE_BASE_FRAGMENT = groq`