use assets for image in hero modules

Author: mitchuman

src/sanity/schemaTypes/modules/hero.saas.ts

@@ -10,7 +10,7 @@ export default defineType({
 	type: 'object',
 	groups: [
 		{ name: 'content', default: true },
-		{ name: 'image' },
+		{ name: 'asset' },
 		{ name: 'options' },
 	],
 	fields: [
@@ -49,38 +49,24 @@ export default defineType({
 			group: 'content',
 		}),
 		defineField({
-			name: 'image',
-			type: 'image',
-			options: {
-				hotspot: true,
-			},
-			group: 'image',
-			fields: [
-				defineField({
-					name: 'alt',
-					type: 'string',
-				}),
-				defineField({
-					name: 'faded',
-					type: 'boolean',
-					initialValue: true,
-				}),
-				defineField({
-					name: 'loading',
-					type: 'string',
-					options: {
-						list: ['lazy', 'eager'],
-						layout: 'radio',
-					},
-					initialValue: 'lazy',
-				}),
-			],
+			name: 'assets',
+			title: 'Assets',
+			type: 'array',
+			of: [{ type: 'img' }],
+			validation: (Rule) => Rule.max(1),
+			group: 'asset',
+		}),
+		defineField({
+			name: 'assetFaded',
+			type: 'boolean',
+			initialValue: true,
+			group: 'asset',
 		}),
 	],
 	preview: {
 		select: {
 			content: 'content',
-			media: 'image',
+			media: 'assets.0.image',
 		},
 		prepare: ({ content, media }) => ({
 			title: getBlockText(content),

src/sanity/schemaTypes/modules/hero.ts

@@ -15,7 +15,7 @@ export default defineType({
 	type: 'object',
 	groups: [
 		{ name: 'content', default: true },
-		{ name: 'image' },
+		{ name: 'asset' },
 		{ name: 'options' },
 	],
 	fieldsets: [alignmentFieldset, { name: 'image', options: { columns: 2 } }],
@@ -44,50 +44,12 @@ export default defineType({
 			group: 'content',
 		}),
 		defineField({
-			name: 'bgImage',
-			title: 'Background image',
-			type: 'image',
-			options: {
-				hotspot: true,
-			},
-			fields: [
-				defineField({
-					name: 'alt',
-					type: 'string',
-				}),
-				defineField({
-					name: 'loading',
-					type: 'string',
-					options: {
-						list: ['lazy', 'eager'],
-						layout: 'radio',
-					},
-					initialValue: 'lazy',
-				}),
-			],
-			group: 'image',
-			fieldset: 'image',
-		}),
-		defineField({
-			name: 'bgImageMobile',
-			title: 'Background image (mobile)',
-			type: 'image',
-			options: {
-				hotspot: true,
-			},
-			fields: [
-				defineField({
-					name: 'loading',
-					type: 'string',
-					options: {
-						list: ['lazy', 'eager'],
-						layout: 'radio',
-					},
-					initialValue: 'lazy',
-				}),
-			],
-			group: 'image',
-			fieldset: 'image',
+			name: 'assets',
+			title: 'Assets',
+			type: 'array',
+			of: [{ type: 'img' }],
+			validation: (Rule) => Rule.max(1),
+			group: 'asset',
 		}),
 		defineField({
 			...alignItems,
@@ -101,7 +63,7 @@ export default defineType({
 	preview: {
 		select: {
 			content: 'content',
-			media: 'bgImage.asset',
+			media: 'assets.0.image',
 		},
 		prepare: ({ content, media }) => ({
 			title: getBlockText(content),

src/ui/Img.tsx

@@ -9,14 +9,16 @@ type ImgProps = { alt?: string } & Omit<ImageProps, 'src' | 'alt'>
 
 export function ResponsiveImg({
 	img,
+	className,
+	imgClassName,
 	...props
-}: { img?: Sanity.Img } & ImgProps) {
+}: { img?: Sanity.Img; imgClassName?: string } & ImgProps) {
 	if (!img) return null
 
 	return (
-		<picture>
+		<picture className={className}>
 			{img.responsive?.map((r, key) => <Source {...r} key={key} />)}
-			<Img image={img.image} {...props} />
+			<Img image={img.image} {...props} className={imgClassName} />
 		</picture>
 	)
 }

src/ui/modules/Hero.tsx

@@ -1,5 +1,5 @@
 import moduleProps from '@/lib/moduleProps'
-import { Img, Source } from '@/ui/Img'
+import { ResponsiveImg } from '@/ui/Img'
 import { PortableText, stegaClean } from 'next-sanity'
 import CTAList from '@/ui/CTAList'
 import Pretitle from '@/ui/Pretitle'
@@ -11,22 +11,21 @@ export default function Hero({
 	pretitle,
 	content,
 	ctas,
-	bgImage,
-	bgImageMobile,
+	assets,
 	textAlign = 'center',
 	alignItems,
 	...props
 }: Partial<{
 	pretitle: string
 	content: any
 	ctas: Sanity.CTA[]
-	bgImage: Sanity.Image
-	bgImageMobile: Sanity.Image
+	assets: Sanity.Img[]
 	textAlign: React.CSSProperties['textAlign']
 	alignItems: React.CSSProperties['alignItems']
 }> &
 	Sanity.Module) {
-	const hasImage = !!bgImage?.asset
+	const hasImage = !!assets?.[0]
+	const asset = assets?.[0]
 
 	return (
 		<section
@@ -37,15 +36,12 @@ export default function Hero({
 			{...moduleProps(props)}
 		>
 			{hasImage && (
-				<picture>
-					<Source image={bgImageMobile} width={1200} />
-					<Img
-						className="max-h-fold size-full object-cover"
-						image={bgImage}
-						width={2400}
-						draggable={false}
-					/>
-				</picture>
+				<ResponsiveImg
+					img={asset}
+					imgClassName="max-h-fold size-full object-cover"
+					width={2400}
+					draggable={false}
+				/>
 			)}
 
 			{content && (

src/ui/modules/HeroSaaS.tsx

@@ -5,24 +5,26 @@ import Code from './RichtextModule/Code'
 import CustomHTML from './CustomHTML'
 import Reputation from '@/ui/Reputation'
 import CTAList from '@/ui/CTAList'
-import { Img } from '@/ui/Img'
+import { ResponsiveImg } from '@/ui/Img'
 import { cn } from '@/lib/utils'
 
 export default function HeroSaaS({
 	pretitle,
 	content,
 	ctas,
-	image,
+	assets,
+	assetFaded,
 	...props
 }: Partial<{
 	pretitle: string
 	content: any
 	ctas: Sanity.CTA[]
-	image: Sanity.Image & {
-		faded?: boolean
-	}
+	assets: Sanity.Img[]
+	assetFaded?: boolean
 }> &
 	Sanity.Module) {
+	const asset = assets?.[0]
+
 	return (
 		<section className="section space-y-8 text-center" {...moduleProps(props)}>
 			<div className="richtext mx-auto max-w-2xl text-balance">
@@ -51,15 +53,25 @@ export default function HeroSaaS({
 				<CTAList ctas={ctas} className="!mt-8 justify-center" />
 			</div>
 
-			<Img
-				className={cn(
-					'anim-fade-to-t w-full [animation-duration:1s]',
-					image?.faded && '[mask:linear-gradient(to_top,transparent,#000_50%)]',
-				)}
-				image={image}
-				width={2400}
-				draggable={false}
-			/>
+			{(() => {
+				switch (asset?._type) {
+					case 'img':
+						return (
+							<ResponsiveImg
+								img={asset}
+								className={cn(
+									'anim-fade-to-t w-full [animation-duration:1s]',
+									assetFaded &&
+										'[mask:linear-gradient(to_top,transparent,#000_50%)]',
+								)}
+								width={2400}
+								draggable={false}
+							/>
+						)
+					default:
+						return null
+				}
+			})()}
 		</section>
 	)
 }

src/ui/modules/HeroSplit.tsx

@@ -36,7 +36,7 @@ export default function HeroSplit({
 					switch (asset?._type) {
 						case 'img':
 							return (
-								<ResponsiveImg img={asset} className="w-full" width={1200} />
+								<ResponsiveImg img={asset} imgClassName="w-full" width={1200} />
 							)
 						default:
 							return null