Payload Image Cropper

Usage

Using the Admin UI

Step-by-step guide for editors using the crop modal.

Step-by-step for editors

  1. 1

    Open a document with a crop field

    Open a document that has a crop field (e.g. a Post).

  2. 2

    Choose a source image

    Upload new media or pick from the media library.

  3. 3

    Open the crop modal

    Click Crop — the modal opens with tabs for each crop preset.

  4. 4

    Adjust each preset

    Drag and resize the crop region. Aspect ratio is locked when configured.

  5. 5

    Preview and save

    Generated previews appear after save. Save the document — crops are processed server-side and URLs are stored automatically.

Re-cropping

Change the source image or open the crop modal again and adjust regions. On save, new files are generated and URLs updated.

Custom admin import (advanced)

If you customize the admin bundle:

1import { CropImageField } from 'payload-plugin-image-cropper/client'