dotCMS / dotCMS/core

Add a SmartCrop control to the new Angular image editor

Open
#36,315 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

dotCMS: New Edit Contentlet Team : Falcon Type : Task
Dominant language
Java
Stars
970
Forks
486
Avg merge
3d 33m
Merged PRs (30d)
170

Description

Description

The new Angular image editor (@dotcms/image-editor, built in #36063 / PR #36236) supports manual crop with aspect presets and orientation, but does not yet expose dotCMS's content-aware SmartCrop filter, which auto-crops an image to a target size by selecting the most relevant region.

Add a SmartCrop control to the editor. Like the rest of the editor, this is a server-side "viewer of the endpoint": the control builds a /contentAsset/image/... filter URL and the server renders it (no client-side pixel work).

Backend contract (already implemented — libvips-only)

The smartcrop filter is registered in com.dotmarketing.image.vips.VipsImageFilterApiImpl (.put("smartcrop", VipsSmartCropImageFilter.class)). It requires DOT_IMAGE_API_USE_LIBVIPS=true (no legacy fallback — same constraint as AVIF and the libvips Rotate filter).

URL form:

/contentAsset/image/{id}/{field}/filter/smartcrop/smartcrop_w/{w}/smartcrop_h/{h}/smartcrop_mode/{mode}

mode is one of attention | entropy | centre. Verified on stage (falconteam-image-editor.dotcms.dev):

  • .../filter/smartcrop/smartcrop_w/500/smartcrop_h/400/smartcrop_mode/attention
  • .../filter/smartcrop/smartcrop_w/500/smartcrop_h/400/smartcrop_mode/entropy
  • .../filter/smartcrop/smartcrop_w/500/smartcrop_h/400/smartcrop_mode/centre
Mode Picks the region by
attention Saliency — visually important areas (default)
entropy Detail / busyness
centre Geometric centre
Surfacing

The exact placement — a mode inside the existing Crop tool vs a separate toolbar control — is deferred to the provided design. The acceptance criteria below are behavior-focused, not layout-specific.

Acceptance Criteria

  • The editor exposes a SmartCrop control that accepts a target width and height in pixels.
  • The control offers all three modes — attention, entropy, centre — defaulting to attention.
  • Selecting SmartCrop with width W, height H, mode M renders a live preview built from …/filter/smartcrop/smartcrop_w/W/smartcrop_h/H/smartcrop_mode/M, like every other edit.
  • Switching the mode with the same W×H re-renders the preview using the new mode.
  • SmartCrop is mutually exclusive with manual Crop and the Resize/output-dimensions: applying SmartCrop clears/overrides them (it already yields the final W×H), mirroring the existing Resize-removes-Crop rule in the URL builder.
  • The applied SmartCrop appears in the edit history (applied-edits list) and can be removed/undone like other edits.
  • Width/height reject non-positive values (min 1); no filter URL is emitted for an incomplete entry (missing W or H).
  • The SmartCrop filter is reflected in the preview address bar / copy-URL like other filters.
  • Unit tests cover the URL-builder branch (each mode → expected params; mutual exclusion with crop/resize) and the control's dispatch.

Priority

Medium

Additional Context

  • Builds on the new Angular image editor: #36063 (PR #36236); part of the Edit Content screen redesign epic #35846.
  • libvips dependency: SmartCrop only renders where DOT_IMAGE_API_USE_LIBVIPS=true (no legacy fallback). Where libvips is disabled the preview will error; detecting that from the frontend is out of scope here (a follow-up could hide/disable SmartCrop via a capability flag).
  • The design for the control will be provided separately.
  • Related follow-ups discussed alongside this: a focal/focus-point picker (separate issue) and the Save-to-content (new rendition) flow (separate issue).

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start in the new Angular editor, @dotcms/image-editor, and trace its URL builder, applied-edits list, and existing Crop/Resize controls. Add the SmartCrop control and its dispatch, then cover each mode, incomplete dimensions, mutual exclusion, and history behavior in the editor unit tests. Done means the live preview, copy URL, undo, and edit history use the specified smartcrop URL.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular
Domain
frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
55/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.