diff --git a/src/components/customerCases/CustomerCases.tsx b/src/components/customerCases/CustomerCases.tsx index facc2fd05..fc8347838 100644 --- a/src/components/customerCases/CustomerCases.tsx +++ b/src/components/customerCases/CustomerCases.tsx @@ -1,7 +1,7 @@ import { headers } from "next/headers"; import Link from "next/link"; -import { SanitySharedImage } from "src/components/image/SanityImage"; +import { SanityImage } from "src/components/image/SanityImage"; import Text from "src/components/text/Text"; import { getDraftModeInfo } from "src/utils/draftmode"; import { domainFromHostname } from "src/utils/url"; @@ -37,7 +37,7 @@ const CustomerCases = async ({ customerCasesPage }: CustomerCasesProps) => { sharedCustomerCases.data.map((customerCase) => (
- +
diff --git a/src/components/customerCases/customerCase/CustomerCase.tsx b/src/components/customerCases/customerCase/CustomerCase.tsx index 3d1258109..7f9aefecb 100644 --- a/src/components/customerCases/customerCase/CustomerCase.tsx +++ b/src/components/customerCases/customerCase/CustomerCase.tsx @@ -1,4 +1,4 @@ -import { SanitySharedImage } from "src/components/image/SanityImage"; +import { SanityImage } from "src/components/image/SanityImage"; import Text from "src/components/text/Text"; import { fetchEmployeesByEmails } from "src/utils/employees"; import { CustomerCase as CustomerCaseDocument } from "studioShared/lib/interfaces/customerCases"; @@ -44,7 +44,7 @@ export default async function CustomerCase({ />
- + {customerCase.image.figureDescription && ( {customerCase.image.figureDescription} diff --git a/src/components/customerCases/customerCase/featuredCases/FeaturedCases.tsx b/src/components/customerCases/customerCase/featuredCases/FeaturedCases.tsx index 6b3113fb4..4ce54d942 100644 --- a/src/components/customerCases/customerCase/featuredCases/FeaturedCases.tsx +++ b/src/components/customerCases/customerCase/featuredCases/FeaturedCases.tsx @@ -1,7 +1,7 @@ import Link from "next/link"; import { useTranslations } from "next-intl"; -import { SanitySharedImage } from "src/components/image/SanityImage"; +import { SanityImage } from "src/components/image/SanityImage"; import Text from "src/components/text/Text"; import { CustomerCaseBase } from "studioShared/lib/interfaces/customerCases"; @@ -29,7 +29,7 @@ export default function FeaturedCases({ href={`/${[...customerCasesPath, featuredCase.slug].join("/")}`} >
- +
{featuredCase.basicTitle} diff --git a/src/components/customerCases/customerCase/sections/image/ImageSection.tsx b/src/components/customerCases/customerCase/sections/image/ImageSection.tsx index a11bffd90..bcdddf708 100644 --- a/src/components/customerCases/customerCase/sections/image/ImageSection.tsx +++ b/src/components/customerCases/customerCase/sections/image/ImageSection.tsx @@ -1,4 +1,4 @@ -import { SanitySharedImage } from "src/components/image/SanityImage"; +import { SanityImage } from "src/components/image/SanityImage"; import Text from "src/components/text/Text"; import { ImageBlock } from "studioShared/lib/interfaces/imageBlock"; @@ -15,7 +15,7 @@ export default function ImageSection({ section }: ImageSectionProps) { className={`${styles.content}${section.fullWidth ? ` ${styles.fullWidth}` : ""}`} >
- + {section.image.figureDescription && ( {section.image.figureDescription} )} diff --git a/src/components/image/SanityImage.tsx b/src/components/image/SanityImage.tsx index f681fca90..3f03d4fe3 100644 --- a/src/components/image/SanityImage.tsx +++ b/src/components/image/SanityImage.tsx @@ -1,49 +1,12 @@ "use client"; -import { SanityImageSource } from "@sanity/image-url/lib/types/types"; import Image from "next/image"; import { UseNextSanityImageProps, useNextSanityImage } from "next-sanity-image"; -import { useEffect, useState } from "react"; import { client } from "studio/lib/client"; import { IImage } from "studio/lib/interfaces/media"; import { sharedClient } from "studioShared/lib/client"; -/** - * Builds Next.js props for a given Sanity image from an unknown Sanity project. - * - * Each generated image source is checked for existence in order to pick the correct source project. - * - * NOTE: It is assumed that an image id is only valid for a single project. - * The result of providing an id that resolves to a valid image in multiple projects is therefore not well-defined. - * - * @param image asset props for image from unknown Sanity project - */ -const useNextSanityGlobalImage = ( - image: SanityImageSource, -): UseNextSanityImageProps | null => { - const studioImage = useNextSanityImage(client, image); - const sharedImage = useNextSanityImage(sharedClient, image); - - const [globalImage, setGlobalImage] = - useState(null); - - useEffect(() => { - if (studioImage) { - fetch(studioImage.src, { - method: "HEAD", - }).then((r) => r.ok && setGlobalImage(studioImage)); - } - if (sharedImage) { - fetch(sharedImage.src, { - method: "HEAD", - }).then((r) => r.ok && setGlobalImage(sharedImage)); - } - }, [studioImage, sharedImage]); - - return globalImage; -}; - const SanityAssetImage = ({ image, imageProps, @@ -80,54 +43,22 @@ const SanityAssetImage = ({ ); }; -export function SanityStudioImage({ image }: { image: IImage }) { - const imageProps = useNextSanityImage(client, image); - return ; -} - -export function SanitySharedImage({ image }: { image: IImage }) { - const imageProps = useNextSanityImage(sharedClient, image); - return ; -} - -function SanityGlobalImage({ +export function SanityImage({ image, objectFit = "cover", + isShared = false, }: { image: IImage; objectFit?: "cover" | "none"; + isShared?: boolean; }) { - const imageProps = useNextSanityGlobalImage(image); + const sanityClient = isShared ? sharedClient : client; + const imageProps = useNextSanityImage(sanityClient, image); return ( ); } - -export function SanityImage({ - image, - objectFit = "cover", -}: { - image: IImage; - objectFit?: "cover" | "none"; -}) { - if (image?.src) { - return ( - {image?.alt - ); - } - return ; -} diff --git a/src/components/sections/customerCasesEntry/CustomerCasesList.tsx b/src/components/sections/customerCasesEntry/CustomerCasesList.tsx index ef4adc509..8fdf970e0 100644 --- a/src/components/sections/customerCasesEntry/CustomerCasesList.tsx +++ b/src/components/sections/customerCasesEntry/CustomerCasesList.tsx @@ -4,7 +4,7 @@ import Link from "next/link"; import { useTranslations } from "next-intl"; import { useState } from "react"; -import { SanitySharedImage } from "src/components/image/SanityImage"; +import { SanityImage } from "src/components/image/SanityImage"; import { Tag } from "src/components/tag"; import Text from "src/components/text/Text"; import { CustomerCaseEntry } from "studioShared/lib/interfaces/customerCases"; @@ -61,7 +61,7 @@ const CustomerCaseList = ({ title={selectedCustomerCase.basicTitle} > {selectedCustomerCase.image && ( - + )}