Image block will now consist only of one image, not a list

varianter · Nov 6, 2024 · 1d1ca99 · 1d1ca99
1 parent 15a49e3
commit 1d1ca99
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 42 deletions.
diff --git a/src/components/customerCases/customerCase/sections/image/ImageSection.tsx b/src/components/customerCases/customerCase/sections/image/ImageSection.tsx
@@ -13,16 +13,9 @@ export default function ImageSection({ section }: ImageSectionProps) {
       <div
         className={`${styles.content}${section.fullWidth ? ` ${styles.fullWidth}` : ""}`}
       >
-        {section.images?.map((image) => (
-          <div
-            key={image._key ?? `${section._key}-${image.alt}`}
-            className={styles.imageWrapper}
-          >
-            <div className={styles.imageContent}>
-              <SanitySharedImage image={image} />
-            </div>
-          </div>
-        ))}
+        <div className={styles.imageContent}>
+          <SanitySharedImage image={section.image} />
+        </div>
       </div>
     </div>
   );

diff --git a/src/components/customerCases/customerCase/sections/image/imageSection.module.css b/src/components/customerCases/customerCase/sections/image/imageSection.module.css
@@ -19,12 +19,6 @@
   max-width: unset;
 }
 
-.imageWrapper {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
 .imageContent {
   height: 100%;
 }

diff --git a/studioShared/lib/interfaces/imageBlock.ts b/studioShared/lib/interfaces/imageBlock.ts
@@ -3,6 +3,6 @@ import { IImage } from "studio/lib/interfaces/media";
 export interface ImageBlock {
   _key: string;
   _type: "imageBlock";
-  images: IImage[];
+  image: IImage;
   fullWidth?: boolean;
 }
diff --git a/studioShared/lib/queries/customerCases.ts b/studioShared/lib/queries/customerCases.ts
@@ -34,9 +34,7 @@ export const BASE_SECTIONS_FRAGMENT = groq`
     highlighted
   },
   _type == "imageBlock" => {
-    "images": images[] {
-      ${INTERNATIONALIZED_IMAGE_FRAGMENT}
-    },
+    "image": image {${INTERNATIONALIZED_IMAGE_FRAGMENT}},
     fullWidth
   },
   _type == "quoteBlock" => {

diff --git a/studioShared/schemas/objects/imageBlock.ts b/studioShared/schemas/objects/imageBlock.ts
@@ -10,42 +10,36 @@ const imageBlock = defineField({
   type: "object",
   fields: [
     {
-      name: "images",
-      title: "Images",
-      type: "array",
-      of: [internationalizedImage],
+      title: "Image",
+      ...internationalizedImage,
     },
     {
       name: "fullWidth",
       title: "Full Width",
-      description: "Should these images occupy the full width of the page?",
+      description:
+        "Should the image occupy the full width of the page? (Only works if the image is not a part of a split section)",
       type: "boolean",
     },
   ],
   preview: {
     select: {
-      images: "images",
+      image: "image",
       fullWidth: "fullWidth",
     },
-    prepare: ({ images, fullWidth }) => {
-      const count = Object.keys(images).length;
-      const firstImage = count > 0 ? images[0] : undefined;
-      let firstImageAlt = null;
-      if (firstImage !== undefined) {
-        const imageAlt = firstImage.alt;
-        if (imageAlt !== undefined) {
-          if (!isInternationalizedString(imageAlt)) {
-            throw new TypeError(
-              `Expected image 'alt' to be InternationalizedString, was ${typeof firstImage.alt}`,
-            );
-          }
-          firstImageAlt = firstTranslation(imageAlt);
-        }
+    prepare: ({ image, fullWidth }) => {
+      const imageAlt = image.alt;
+      if (!isInternationalizedString(imageAlt)) {
+        throw new TypeError(
+          `Expected image 'alt' to be InternationalizedString, was ${typeof image.alt}`,
+        );
       }
       return {
-        title: count > 1 ? `${count} images` : (firstImageAlt ?? undefined),
+        title:
+          imageAlt !== undefined
+            ? (firstTranslation(imageAlt) ?? undefined)
+            : undefined,
         subtitle: fullWidth ? "Full Width" : undefined,
-        media: firstImage,
+        media: image,
       };
     },
   },