Skip to content

Cropper

Jump to bottom
OlenaOsadchaBA edited this page Mar 17, 2026 · 18 revisions

Purpose of the Cropper (Brief Description)

The cropper allows the admin to control which part of an uploaded image will be displayed on the website when the image exceeds the designed display area. This ensures that important content remains visible, the layout stays clean, and images maintain the recommended proportions and quality. By adjusting the crop area before saving, the admin can avoid stretched, cut-off, or low-quality images and ensure visuals match the design requirements.

1. Image Upload Rules

1.1 There is a minimum allowed image size in pixels = the designed pixel-size frame for images on visitor interface

1.2 The system must enforce file size validation: uploaded images must not exceed 5 MB.

1.3 The system must enforce file format validation: uploaded images must be JPEG, JPG, PNG or WEBp

2. Cropper Behavior

2.1 When the admin uploads an image larger than the designed display area, the system applies crop to the uploaded image.

2.2 Admin clicks on the Crop icon that is visible on a hover state in the image space and the system opens the modal crop marching mock-up

2.3 The modal window displays:

  • The full uploaded image
  • A fixed-size crop frame matching the designed pixel-size display area
  • The crop frame is movable within the uploaded image, allowing the admin to select which part of the image will be displayed after cropping

2.4 Modal window buttons:

  • Відмінити
  • Зберегти
  • X (close)

3. Cropping Actions

3.1. If the admin clicks Зберегти:

  • The system crops the image according to the selected frame.
  • The cropped image is uploaded into the media icon.
  • The cropper modal window closes

3.2 If the admin clicks Відмінити or the X button:

  • The modal window closes.
  • The system uploads the full (uncropped) original image to the media icon.
  • No cropped image is saved in the system.

3.3 The Admin can publish an uncropped image

4. Relaunching the Cropper

4.1 After the image is uploaded (cropped or not), the admin can reopen the cropper by hovering over the media icon and clicking the "Cropper" icon.

4.2 Relaunching opens the same modal with the cropper and initial size uploaded image presented, allowing the admin to repeat the process.

Clone this wiki locally