Replace django-image-cropping with an in-repo Cropper.js admin widget (#1299)

[jonfroehlich]

Summary

Replaces the EOL PyPI django-image-cropping (v1.7, Feb 2022; Jcrop + jQuery; classifiers stop at Django 4.0; "upload → Save and continue → scroll up → crop") with a small in-repo fork whose only material change is a modern Cropper.js admin widget that previews and crops the image client-side, before the first save.

Closes #1299. Advances #1269 (retires a fragile, unmaintained dependency that was a Django 6.1 upgrade risk). Follow-up enhancement filed as #1304.

Why this approach

The only thing tying us to the unmaintained dependency was the admin widget JS — ImageRatioField and the crop_corners processor are pure Django/Pillow. So instead of ripping the system out, we vendor image_cropping/ in-repo (treated as project source, exactly like sortedm2m_filter_horizontal_widget) and rewrite just the widget. There's no maintained drop-in that does instant client-side cropping plus a non-destructive box fed to easy_thumbnails (most modern widgets either only preview, or bake a destructive crop) — and our render pipeline (one stored box → rendered at every size on demand) is the valuable part worth keeping.

What changed

• New top-level image_cropping/ package: ImageRatioField, crop_corners, ImageCroppingMixin, CropImageWidget, vendored Cropper.js v1.6.2 (MIT, no build step) + ml_cropper.{js,css} glue. See image_cropping/README.md.
• Widget UX: instant FileReader preview on file select; live WYSIWYG preview of the cropped result; precise keyboard-accessible X/Y/W/H inputs tucked in a collapsed "Adjust crop precisely" disclosure.
• requirements.txt: drop django-image-cropping (django-appconf falls away as a transitive dep). INSTALLED_APPS keeps 'image_cropping' (now the fork).
• Templates: convert Banner's 2 cropped_thumbnail calls to the standard {% thumbnail … box=banner.cropping %} idiom; remove 19 now-dead {% load cropping %} lines; add {% load thumbnail %} to base.html.
• Help texts: refresh the obsolete "Save and continue editing" instructions on Banner, News, Person, Photo, Project.
• Docs: update CLAUDE.md image-handling section.

Migration safety

Deliberately migration-neutral: ImageRatioField stays a CharField whose deconstruct() returns image_cropping.fields.ImageRatioField, so the gitignored, per-environment migrations that import image_cropping.fields keep working and the DB column is untouched (makemigrations reports no change to any cropping field). Keeping the package name is what preserves those imports — important given deploys are push-only with no server shell. A regression test pins the deconstruct() path.

Testing

• 14 new tests in website/tests/test_image_cropping.py (crop_corners parsing, the deconstruct() migration contract, widget Media uses Cropper not Jcrop, model crop metadata).
• Full suite: 149 passing (--settings=makeabilitylab.settings_test).
• Browser-verified end-to-end (Playwright + Chrome): instant preview on upload (no save), aspect-ratio lock, drag ↔ numeric sync, crop persists to the DB, reopen restores it, and the real easy_thumbnails pipeline applies the box. Found & fixed two real bugs this way: Cropper stalling on blob: URLs with checkOrientation:true, and the live preview going blank because the object URL was revoked too early.

Screenshots

Note: gh can't upload images via CLI — @jonfroehlich to drag in the before/after PNGs.

• Before: old Jcrop flow — crop widget only appears after "Save and continue editing".
• After: choose an image → cropper + live preview appear instantly; precise pixel inputs collapsed on one row.

Checklist

• Tests added/passing
• a11y considered (keyboard-accessible numeric controls; admin is not Pa11y-scanned)
• Before/after screenshots attached

Screenshot after

🤖 Generated with Claude Code