🔧 Sanity CTA setup #2610

sanityv3/schemas/index.ts

@@ -25,6 +25,7 @@ import fullWidthVideo from './objects/fullWidthVideo'
 import iframe from './objects/iframe'
 import imageWithAlt from './objects/imageWithAlt'
 import imageWithAltAndCaption from './objects/imageWithAltAndCaption'
+import carouselImage from './objects/carouselImage'
 import largeTable from './objects/largeTable'
 import linkSelector from './objects/linkSelector'
 import menuGroup from './objects/menuGroup'
@@ -139,6 +140,7 @@ const RemainingSchemas = [
   internalServerError,
   imageWithAlt,
   imageWithAltAndCaption,
+  carouselImage,
   pullQuote,
   factbox,
   relatedLinks,

sanityv3/schemas/objects/carouselImage.tsx

@@ -0,0 +1,51 @@
+import { ImageWithAltAndCaption } from './imageWithAltAndCaption'
+
+export type CarouselImage = {
+  _type: 'carouselImage'
+  image: ImageWithAltAndCaption
+  caption?: string
+  attribution?: string
+}
+
+export default {
+  name: 'carouselImage',
+  title: 'Image with options',
+  type: 'object',
+  options: {
+    collapsed: false,
+  },
+  fields: [
+    {
+      name: 'image',
+      title: 'Image with alt and Caption',
+      type: 'imageWithAltAndCaption',
+    },
+  {
+    type: 'boolean',
+    name: 'captionPositionUnderImage',
+    title: 'Position caption and credit under image',
+    description: 'Toggle to display caption and credit under the image.',
+    initialValue: false,
+  },
+    {
+      name: 'link',
+      title: 'Link',
+      type: 'linkSelector',
+      description: 'Optional link associated with the image.',
+    },
+  ],
+  preview: {
+    select: {
+      imageUrl: 'image.image.asset.url',
+      alt: 'image.image.alt',
+      caption: 'image.caption',
+    },
+    prepare({ imageUrl, caption, alt }: { imageUrl: string; alt: string; caption: string }) {
+      return {
+        title: alt || 'No alt text',
+        subtitle: caption || 'No caption',
+        media: <img src={imageUrl} alt={alt} style={{ height: '100%' }} />,
+      }
+    },
+  },
+}

sanityv3/schemas/objects/imageCarousel.tsx

@@ -71,7 +71,9 @@ export default {
       name: 'items',
       description: 'Add images for the carousel',
       title: 'Carousel items',
-      of: [{ type: 'imageWithAltAndCaption' }],
+      of: [{ type: 'imageWithAltAndCaption' },
+           { type: 'carouselImage' }
+      ],
       validation: (Rule: Rule) => Rule.required().min(2),
     },
     {