PreStyling Layouts & Components

src/keystatic/fields/content/image.ts

@@ -0,0 +1,36 @@
+import { fields } from '@keystatic/core'
+
+import { ASPECT_RATIOS, IMAGE_EFFECTS } from '@/lib/constants/figure'
+import { assets } from '@/lib/images/storage'
+
+export const imageFields = (collection: string, { required = false } = {}) => ({
+  image: fields.image({
+    label: 'Image',
+    ...assets(collection),
+    validation: {
+      isRequired: required,
+    },
+  }),
+  alt: fields.text({
+    label: 'Alt text',
+    validation: {
+      isRequired: required,
+    },
+  }),
+  caption: fields.text({
+    label: 'Caption',
+  }),
+  credit: fields.text({
+    label: 'Credit',
+  }),
+  effect: fields.select({
+    label: 'Effect',
+    options: IMAGE_EFFECTS,
+    defaultValue: 'none',
+  }),
+  ratio: fields.select({
+    label: 'Crop',
+    options: ASPECT_RATIOS,
+    defaultValue: 'original',
+  }),
+})