Cropper

Purpose of the Cropper (Brief Description)

The cropper allows the admin to control which part of an uploaded image will be shown on the site if the size of uploaded image is bigger than recommended. This ensures that important content stays visible, the layout looks clean, and the image keeps the recommended proportions and quality. By adjusting the crop area before saving, the admin can avoid stretched, cut-off, or low-quality images and make sure visuals match the design requirements.

1. When Admin uploaded the image and the size of the image is bigger than recommended (for each image its own designed recommended size), the system should immediately opens a cropper modal window matching mock-up
2. The modal window displays:

• The full uploaded image
• A fixed-size crop frame recommended for that image

3. The crop frame is movable in any position within the modal window, showing which part of the image will be displayed after cropping.
4. Modal window contains 3 active buttons:

• Відмінити
• Зберегти
• X button

Cropping Actions

5. 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

6. 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.
• The system displays the warning message (matching mock-up): "Зображення завелике. Це може вплинути на якість. Обріжте до рекомендованного."
• The Admin cannot publish a new image until the required cropping action is completed

Relaunching the Cropper

7. 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.
8. Relaunching opens the same modal with the cropper and initial size uploaded image presented, allowing the admin to repeat the process.