From 18d1cd3b379769308073ef72b5a955b7f710dd32 Mon Sep 17 00:00:00 2001 From: Ane Date: Thu, 12 Dec 2024 10:14:42 +0100 Subject: [PATCH 1/3] add figure description to sanityImages --- .../customerCase/CustomerCase.tsx | 5 +- src/components/image/SanityImage.tsx | 58 +++++++++++++------ src/components/text/Text.tsx | 5 +- src/components/text/text.module.css | 10 ++++ studio/lib/interfaces/media.ts | 1 + studio/schemas/fields/media.ts | 11 +++- studioShared/lib/queries/customerCases.ts | 3 +- 7 files changed, 70 insertions(+), 23 deletions(-) diff --git a/src/components/customerCases/customerCase/CustomerCase.tsx b/src/components/customerCases/customerCase/CustomerCase.tsx index eb1c75e39..933c636c8 100644 --- a/src/components/customerCases/customerCase/CustomerCase.tsx +++ b/src/components/customerCases/customerCase/CustomerCase.tsx @@ -44,7 +44,10 @@ export default async function CustomerCase({ />
- +
{customerCase.sections.map((section) => ( diff --git a/src/components/image/SanityImage.tsx b/src/components/image/SanityImage.tsx index 7d87cff24..0536da4c3 100644 --- a/src/components/image/SanityImage.tsx +++ b/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 + {showFigureDescription && ( + {image.figureDescription} + )} +
); }; @@ -77,9 +85,21 @@ export function SanityStudioImage({ image }: { image: IImage }) { return ; } -export function SanitySharedImage({ image }: { image: IImage }) { +export function SanitySharedImage({ + image, + showFigureDescription, +}: { + image: IImage; + showFigureDescription?: boolean; +}) { const imageProps = useNextSanityImage(sharedClient, image); - return ; + return ( + + ); } function SanityGlobalImage({ 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..dca12f579 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 9.25rem 0rem 4rem; +} 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 f50ffc566..4d200473e 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` From 9dc4450660649739ca087d30b8dde444316e03b1 Mon Sep 17 00:00:00 2001 From: Ane Date: Thu, 12 Dec 2024 17:21:57 +0100 Subject: [PATCH 2/3] remove text component from sanity image and add it those places where we want figure description --- .../customerCase/CustomerCase.tsx | 10 ++-- .../customerCase/customerCase.module.css | 2 +- .../sections/image/ImageSection.tsx | 4 ++ src/components/image/SanityImage.tsx | 57 +++++++------------ src/components/text/text.module.css | 2 +- 5 files changed, 31 insertions(+), 44 deletions(-) diff --git a/src/components/customerCases/customerCase/CustomerCase.tsx b/src/components/customerCases/customerCase/CustomerCase.tsx index 933c636c8..3d1258109 100644 --- a/src/components/customerCases/customerCase/CustomerCase.tsx +++ b/src/components/customerCases/customerCase/CustomerCase.tsx @@ -44,10 +44,12 @@ 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/image/SanityImage.tsx b/src/components/image/SanityImage.tsx index 0536da4c3..38278764b 100644 --- a/src/components/image/SanityImage.tsx +++ b/src/components/image/SanityImage.tsx @@ -5,7 +5,6 @@ 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"; @@ -41,7 +40,6 @@ const SanityAssetImage = ({ image, imageProps, objectFit = "cover", - showFigureDescription, }: { image: IImage; imageProps?: UseNextSanityImageProps; @@ -55,28 +53,23 @@ const SanityAssetImage = ({ return null; } return ( -
- {image?.alt - {showFigureDescription && ( - {image.figureDescription} - )} -
+ {image?.alt ); }; @@ -85,21 +78,9 @@ export function SanityStudioImage({ image }: { image: IImage }) { return ; } -export function SanitySharedImage({ - image, - showFigureDescription, -}: { - image: IImage; - showFigureDescription?: boolean; -}) { +export function SanitySharedImage({ image }: { image: IImage }) { const imageProps = useNextSanityImage(sharedClient, image); - return ( - - ); + return ; } function SanityGlobalImage({ diff --git a/src/components/text/text.module.css b/src/components/text/text.module.css index dca12f579..2f36afd0f 100644 --- a/src/components/text/text.module.css +++ b/src/components/text/text.module.css @@ -190,5 +190,5 @@ font-weight: 400; line-height: 150%; letter-spacing: 0.05rem; - padding: 0rem 9.25rem 0rem 4rem; + padding: 0rem 0.5rem; } From ff82b28ce2162e6daa76024f8ab95abe42ddb513 Mon Sep 17 00:00:00 2001 From: Ane Date: Thu, 12 Dec 2024 17:24:25 +0100 Subject: [PATCH 3/3] remove unused variable --- src/components/image/SanityImage.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/image/SanityImage.tsx b/src/components/image/SanityImage.tsx index 38278764b..7d87cff24 100644 --- a/src/components/image/SanityImage.tsx +++ b/src/components/image/SanityImage.tsx @@ -44,7 +44,6 @@ const SanityAssetImage = ({ image: IImage; imageProps?: UseNextSanityImageProps; objectFit?: "cover" | "none"; - showFigureDescription?: boolean; }) => { const objectPosition = image.hotspot ? `${image.hotspot.x * 100}% ${image.hotspot.y * 100}%`