diff --git a/src/components/customerCases/customerCase/CustomerCase.tsx b/src/components/customerCases/customerCase/CustomerCase.tsx
index eb1c75e39..3d1258109 100644
--- a/src/components/customerCases/customerCase/CustomerCase.tsx
+++ b/src/components/customerCases/customerCase/CustomerCase.tsx
@@ -45,6 +45,11 @@ export default async function CustomerCase({
+ {customerCase.image.figureDescription && (
+
+ {customerCase.image.figureDescription}
+
+ )}
{customerCase.sections.map((section) => (
diff --git a/src/components/customerCases/customerCase/customerCase.module.css b/src/components/customerCases/customerCase/customerCase.module.css
index 426fbee3f..75f2458ea 100644
--- a/src/components/customerCases/customerCase/customerCase.module.css
+++ b/src/components/customerCases/customerCase/customerCase.module.css
@@ -40,7 +40,7 @@
height: 36.5rem;
overflow: hidden;
padding-top: 1.5rem;
- padding-bottom: 2rem;
+ padding-bottom: var(--padding-xl);
}
.mainImageWrapper img {
diff --git a/src/components/customerCases/customerCase/sections/image/ImageSection.tsx b/src/components/customerCases/customerCase/sections/image/ImageSection.tsx
index 2a6ba0fad..a11bffd90 100644
--- a/src/components/customerCases/customerCase/sections/image/ImageSection.tsx
+++ b/src/components/customerCases/customerCase/sections/image/ImageSection.tsx
@@ -1,4 +1,5 @@
import { SanitySharedImage } from "src/components/image/SanityImage";
+import Text from "src/components/text/Text";
import { ImageBlock } from "studioShared/lib/interfaces/imageBlock";
import styles from "./imageSection.module.css";
@@ -15,6 +16,9 @@ export default function ImageSection({ section }: ImageSectionProps) {
>
+ {section.image.figureDescription && (
+ {section.image.figureDescription}
+ )}
diff --git a/src/components/text/Text.tsx b/src/components/text/Text.tsx
index b52c244e8..10f65eb3e 100644
--- a/src/components/text/Text.tsx
+++ b/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 = ({
diff --git a/src/components/text/text.module.css b/src/components/text/text.module.css
index cca798362..2f36afd0f 100644
--- a/src/components/text/text.module.css
+++ b/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 0.5rem;
+}
diff --git a/studio/lib/interfaces/media.ts b/studio/lib/interfaces/media.ts
index 50e11a647..dc8e4a8d9 100644
--- a/studio/lib/interfaces/media.ts
+++ b/studio/lib/interfaces/media.ts
@@ -27,6 +27,7 @@ export interface IImage {
metadata?: {
lqip: string;
};
+ figureDescription?: string;
}
export interface ImageExtendedProps extends IImage {
diff --git a/studio/schemas/fields/media.ts b/studio/schemas/fields/media.ts
index cf2078cc7..e423985e4 100644
--- a/studio/schemas/fields/media.ts
+++ b/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",
diff --git a/studioShared/lib/queries/customerCases.ts b/studioShared/lib/queries/customerCases.ts
index 3d197165c..81276e10a 100644
--- a/studioShared/lib/queries/customerCases.ts
+++ b/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`