Payload Image Cropper

Setup

createCropImage

If your media collection uses a non-default slug (e.g. files instead of media), use createCropImage so the plugin and fields always target the same collection.

  1. 1

    Create plugin + field factory once

    typescript
    import { createCropImage } from 'payload-plugin-image-cropper'

const { plugin, field } = createCropImage({
  mediaCollectionSlug: 'files',
  mediaDir: path.join(process.cwd(), 'public/files'),
})
  2. 2

    Register the plugin

    typescript
    plugins: [plugin]
  3. 3

    Use field() in collections

    typescript
    field({
  name: 'heroImage',
  label: 'Hero Image',
  crops: [/* ... */],
})

This avoids setting mediaCollectionSlug in two places — a mismatch causes silent 404s at crop generation time.