V3-image-section

src/components/sections/imageSection/ImageSectionComponent.tsx

@@ -1,14 +1,12 @@
 "use client";
 import { SanityImage } from "src/components/image/SanityImage";
-import Text from "src/components/text/Text";
 import { ImageSection } from "studio/lib/interfaces/pages";
 
 import styles from "./imageSectionComponent.module.css";
 
 const ImageSectionComponent = ({ section }: { section: ImageSection }) => {
   return (
     <article className={styles.article}>
-      <Text type="h2">{section.basicTitle}</Text>
       {section.image && (
         <div className={styles.image}>
           <SanityImage image={section.image} />

src/components/sections/imageSection/ImageSectionComponentPreview.tsx

@@ -18,7 +18,7 @@ export default function ImageSectionComponentPreview({
     { initial: initialData },
   );
 
-  const testimonialsSection = newData
+  const imageSection = newData
     ? (newData.sections.find(
         (section, index) =>
           section._type === "imageSection" && index === sectionIndex,
@@ -30,7 +30,7 @@ export default function ImageSectionComponentPreview({
 
   return (
     <Suspense>
-      <ImageSectionComponent section={testimonialsSection} />
+      <ImageSectionComponent section={imageSection} />
     </Suspense>
   );
 }

src/components/sections/imageSection/imageSectionComponent.module.css

@@ -2,26 +2,37 @@
   width: 100%;
   max-width: var(--max-content-width-medium);
   display: flex;
-  margin: auto;
-  padding: 5rem 1rem;
   flex-direction: column;
-  gap: 1.5rem;
+  justify-self: center;
+}
+
+.image {
+  flex-shrink: 1;
+  max-width: 46rem;
+  padding: var(--padding-l) 0rem;
 
-  @media (min-width: 640px) {
-    padding: 5rem 2rem;
-    justify-content: center;
-    gap: 1.5rem;
+  @media (max-width: 834px) {
+    padding: var(--padding-l) 0rem;
+    max-width: 43.24219rem;
   }
 
-  @media (min-width: 1024px) {
-    padding: 5rem;
+  @media (max-width: 425px) {
+    padding: var(--padding-l) 0rem;
+    max-width: 22.375rem;
   }
 }
 
-.image {
-  max-width: 100%;
-  max-height: 25rem;
-  border-radius: 0.75rem;
-  overflow: hidden;
-  margin: auto;
+.image img {
+  max-width: var(--max-content-width-large);
+  width: 100%;
+  height: 100%;
+  display: block;
+
+  @media (max-width: 834px) {
+    max-width: var(--max-content-width-medium);
+  }
+
+  @media (max-width: 425px) {
+    max-width: var(--max-content-width-small);
+  }
 }

studio/lib/interfaces/pages.ts

@@ -65,7 +65,6 @@ export interface TestimonialsSection {
 export interface ImageSection {
   _type: "imageSection";
   _key: string;
-  basicTitle: string;
   image: IImage;
 }
 

studio/lib/queries/pages.ts

@@ -3,6 +3,14 @@ import { groq } from "next-sanity";
 import { LANGUAGE_FIELD_FRAGMENT, TRANSLATED_LINK_FRAGMENT } from "./i18n";
 import { translatedFieldFragment } from "./utils/i18n";
 
+const INTERNATIONALIZED_IMAGE_FRAGMENT = groq`
+  asset,
+  "metadata": asset -> metadata {
+    lqip
+  },
+  "alt": ${translatedFieldFragment("alt")}
+`;
+
 const SECTIONS_FRAGMENT = groq`
   sections[]{
     ...,
@@ -36,6 +44,10 @@ const SECTIONS_FRAGMENT = groq`
         ...,
         ${TRANSLATED_LINK_FRAGMENT}
       }
+    },
+      _type == "imageSection" => {
+      ...,
+        "image": image {${INTERNATIONALIZED_IMAGE_FRAGMENT}},
     },
     _type == "ctaSection" => {
       ...,

studio/schemas/documents/pageBuilder.ts

@@ -3,20 +3,16 @@ import { defineField, defineType } from "sanity";
 import { isInternationalizedString } from "studio/lib/interfaces/global";
 import { titleID } from "studio/schemas/fields/text";
 import article from "studio/schemas/objects/sections/article";
-import callout from "studio/schemas/objects/sections/callout";
-import callToAction from "studio/schemas/objects/sections/callToAction";
 import { compensationCalculator } from "studio/schemas/objects/sections/compensation-calculator";
 import contactBox from "studio/schemas/objects/sections/contact-box";
 import { customerCasesEntry } from "studio/schemas/objects/sections/customerCasesEntry";
 import { employeeHighlightSection } from "studio/schemas/objects/sections/employeeHighlight";
 import { employees } from "studio/schemas/objects/sections/employees";
-import grid from "studio/schemas/objects/sections/grid";
 import hero from "studio/schemas/objects/sections/hero";
 import imageSection from "studio/schemas/objects/sections/image";
 import imageSplitSection from "studio/schemas/objects/sections/imagesplit";
 import { jobs } from "studio/schemas/objects/sections/jobs";
 import logoSalad from "studio/schemas/objects/sections/logoSalad";
-import testimonals from "studio/schemas/objects/sections/testimonials";
 import seo from "studio/schemas/objects/seo";
 import { titleSlug } from "studio/schemas/schemaTypes/slug";
 import { firstTranslation } from "studio/utils/i18n";
@@ -49,12 +45,12 @@ const pageBuilder = defineType({
         hero,
         logoSalad,
         article,
-        callout,
-        callToAction,
-        testimonals,
+        // callout,
+        // callToAction,
+        // testimonals,
         imageSplitSection,
         imageSection,
-        grid,
+        // grid,
         employees,
         customerCasesEntry,
         contactBox,

studio/schemas/objects/sections/hero.ts

@@ -1,6 +1,6 @@
 import { defineField } from "sanity";
 
-import { allTranslation } from "studio/utils/i18n";
+import { allTranslations } from "studio/utils/i18n";
 
 export const heroID = "hero";
 
@@ -75,7 +75,7 @@ export const hero = defineField({
     prepare(selection) {
       const { title } = selection;
       return {
-        title: allTranslation(title) ?? undefined,
+        title: allTranslations(title) ?? undefined,
         subtitle: "Hero Section",
       };
     },

studio/schemas/objects/sections/image.ts

@@ -1,7 +1,8 @@
 import { defineField } from "sanity";
 
-import image from "studio/schemas/fields/media";
-import { title } from "studio/schemas/fields/text";
+import { isInternationalizedString } from "studio/lib/interfaces/global";
+import { internationalizedImage } from "studio/schemas/fields/media";
+import { allTranslations } from "studio/utils/i18n";
 
 export const imageID = "imageSection";
 
@@ -10,22 +11,31 @@ export const imageSection = defineField({
   title: "Image",
   type: "object",
   fields: [
-    title,
     defineField({
-      ...image,
+      ...internationalizedImage,
       description: "Upload a featured image for the section.",
       validation: (rule) => rule.required(),
     }),
   ],
   preview: {
     select: {
-      title: "basicTitle",
+      image: "image",
+      fullWidth: "fullWidth",
     },
-    prepare(selection) {
-      const { title } = selection;
+    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: title,
-        subtitle: "Image",
+        title:
+          imageAlt !== undefined
+            ? (allTranslations(imageAlt) ?? undefined)
+            : undefined,
+        subtitle: fullWidth ? "Full Width" : undefined,
+        media: image,
       };
     },
   },

studio/utils/i18n.ts

@@ -9,7 +9,7 @@ export function firstTranslation<T>(
   return internationalizedValue[0].value;
 }
 
-export function allTranslation<T>(
+export function allTranslations<T>(
   internationalizedValue: InternationalizedValue<T>,
 ): string | null {
   if (internationalizedValue.length === 0) {

studioShared/schemas/fields/customerCaseProjectInfo.ts

@@ -2,7 +2,7 @@ import { UlistIcon } from "@sanity/icons";
 import { defineField } from "sanity";
 
 import { isInternationalizedString } from "studio/lib/interfaces/global";
-import { allTranslation } from "studio/utils/i18n";
+import { allTranslations } from "studio/utils/i18n";
 
 export const customerCaseProjectInfo = defineField({
   name: "projectInfo",
@@ -45,7 +45,7 @@ export const customerCaseProjectInfo = defineField({
                 );
               }
               return {
-                title: allTranslation(customerSector) ?? undefined,
+                title: allTranslations(customerSector) ?? undefined,
               };
             },
           },
@@ -127,7 +127,8 @@ export const customerCaseProjectInfo = defineField({
                     );
                   }
                   return {
-                    title: allTranslation(design) ?? "No translation available",
+                    title:
+                      allTranslations(design) ?? "No translation available",
                   };
                 },
               },
@@ -160,7 +161,8 @@ export const customerCaseProjectInfo = defineField({
                   }
                   return {
                     title:
-                      allTranslation(development) ?? "No translation available",
+                      allTranslations(development) ??
+                      "No translation available",
                   };
                 },
               },
@@ -193,7 +195,7 @@ export const customerCaseProjectInfo = defineField({
                   }
                   return {
                     title:
-                      allTranslation(projectManagement) ??
+                      allTranslations(projectManagement) ??
                       "No translation available",
                   };
                 },