Payload Image Cropper

Getting Started

Installation

  1. 1

    Install the plugin

    Terminal
    pnpm add payload-plugin-image-cropper
  2. 2

    Install Sharp

    Sharp is a peer dependency:

    Terminal
    pnpm add sharp
  3. 3

    Register Sharp in Payload config

    Pass Sharp to your Payload config so crop generation can use it:

    typescript
    import sharp from 'sharp'

export default buildConfig({
  sharp,
  // ...
})
  4. 4

    Continue to Setup

    Next, add the plugin to payload.config.ts and define crop fields on your collections. See Local Filesystem Storage or S3 / Cloud Storage depending on how you store media.

  5. 5

    Or with npm

    Terminal
    npm install payload-plugin-image-cropper