Keyboard shortcuts

Press ← or → to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

Manual Image Cropping

Feature Overview

The Manual Image Cropping Tool is a CMS enhancement that allows users to manually adjust how an uploaded image is cropped after the automatic center-cropping is applied. Currently, uploaded images are automatically cropped based on center positioning, which often fails to capture the intended focal point, especially when image dimensions vary or when the subject is not centered. We are building this feature to allow greater control over visual presentation and to reduce the manual workload required for correcting improperly cropped images via external tools.

Problem Statement

Many restaurant or package images uploaded by staff do not adhere to a standardized aspect ratio or framing. As a result, when auto-cropped to the center, important content (e.g., food item, restaurant logo, or signature elements) may be cut off or not properly displayed. This leads to a poor visual experience on the consumer-facing app and requires users to manually edit and re-upload images using third-party tools—wasting time and reducing workflow efficiency.

Goals and Objectives

  • Enable users to manually reposition the crop area on an uploaded image.
  • Improve accuracy and control over final image appearance across platforms.
  • Reduce reliance on external image editing tools.
  • Enhance the visual consistency of images shown in search results, restaurant pages, and marketing features.

User Stories / Use Cases

Admin

  • As an admin, I want to reposition the crop area after uploading an image, so that I can ensure the important content is visible.

Feature Scope

Must-Have

  • Auto-crop to center on image upload (fallback/default behavior).
  • UI interface to manually crop the image by dragging the crop area.
  • Ability to preview cropped result.
  • All of the image upload form

Should-Have

  • Back to default (center crop) option.
  • Zoom in/out support for precise cropping.

Nice-to-Have

  • Drag-and-drop image upload with instant preview.

Design Considerations

  • Usability: Cropping tool should be intuitive, similar to popular image editing platforms.
  • Accessibility: Support keyboard navigation (e.g., arrow keys to nudge the crop box), and ensure contrast and labels for all buttons.
  • Image Quality: Ensure compression does not degrade visible output after cropping.