export default {
title: 'Image',
name: 'picture',
type: 'image',
icon: ImageSquare,
options: {
hotspot: true,
metadata: ['lqip', 'blurhash']
},
fields: [
{
title: 'Alternative Text',
name: 'alt',
type: 'string',
description: 'A short description of the image. Important for SEO and accessiblity.',
validation: (Rule) => Rule.required()
},
{
title: 'Display Size (Aspect Ratio)',
name: 'customRatio',
type: 'string',
description: 'Select how the image is displayed. This affects the aspect ratio of the image within its container.',
options: {
list: aspectRatios
},
initialValue: 'aspect-0'
}
],
preview: {
select: {
alt: 'alt',
filename: 'asset.originalFilename',
dimensions: 'asset.metadata.dimensions',
image: 'asset'
},
prepare({ alt, dimensions, filename, image }) {
return {
title: alt ?? filename,
subtitle: dimensions ? `${dimensions.width}px × ${dimensions.height}px` : '…',
media: image ?? ImageSquare
}
}
}
}