diff --git a/CLAUDE.md b/CLAUDE.md
index 4d68a492..9eb83656 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -112,7 +112,9 @@ Every container start runs, in order: `collectstatic` → `makemigrations` → `
 
 ### Image handling
 
-`image_cropping` + `easy_thumbnails` work together: cropping defines the crop box, easy_thumbnails generates sized variants. `THUMBNAIL_PROCESSORS` is configured so crop_corners runs before the default chain. Image processing requires ImageMagick (installed in the Dockerfile) and a custom `imagemagick-policy.xml` is mounted into `/etc/ImageMagick-6/policy.xml` to enable PDF processing (see issue #974).
+`image_cropping` + `easy_thumbnails` work together: cropping defines the crop box (stored as an `"x1,y1,x2,y2"` string by `ImageRatioField`), easy_thumbnails generates sized variants. `THUMBNAIL_PROCESSORS` is configured so `crop_corners` runs before the default chain, applying the stored box to any `{% thumbnail … box=obj.cropping %}` render. Image processing requires ImageMagick (installed in the Dockerfile) and a custom `imagemagick-policy.xml` is mounted into `/etc/ImageMagick-6/policy.xml` to enable PDF processing (see issue #974).
+
+**`image_cropping` is an in-repo fork**, not the PyPI `django-image-cropping` (which was EOL Jcrop+jQuery, Django ≤4.0). Like `sortedm2m_filter_horizontal_widget`, the top-level `image_cropping/` package is project source code and shadows/replaces the dropped dependency. Its admin widget is **Cropper.js** (vendored static, no build step): editors preview and crop client-side *before* the first save (#1299/#1269). The data layer is intentionally unchanged — `ImageRatioField` is still 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 (a regression test pins this path). See `image_cropping/README.md`. To bump Cropper.js, replace the vendored `static/image_cropping/cropper.min.{js,css}` (stay on the v1.x API; v2 is a different API).
 
 ### Rich text
 
diff --git a/image_cropping/README.md b/image_cropping/README.md
new file mode 100644
index 00000000..5137f09e
--- /dev/null
+++ b/image_cropping/README.md
@@ -0,0 +1,62 @@
+# image_cropping (in-repo fork)
+
+A small local fork of [django-image-cropping](https://github.com/jonasundderwolf/django-image-cropping),
+treated as project source code (like `sortedm2m_filter_horizontal_widget`).
+**It is in `INSTALLED_APPS` and shadows the PyPI package, which is no longer a
+dependency.**
+
+## Why we forked
+
+Upstream `django-image-cropping` v1.7 (Feb 2022) is unmaintained for our needs:
+it bundles **Jcrop + jQuery**, its classifiers stop at **Django 4.0**, and its
+workflow is "upload the image, **Save and continue editing**, scroll back up,
+*then* crop" — because Jcrop crops against the already-saved file on the server.
+See issue #1299 (instant preview/crop) and #1269 (de-risking dependencies ahead
+of Django 6.1 LTS).
+
+## What we changed
+
+- **New admin widget on [Cropper.js](https://github.com/fengyuanchen/cropperjs)
+  v1.6.2** (MIT, vendored as static files, no build step). It previews and
+  crops the image **client-side, before the first save**, with a **live
+  WYSIWYG preview** of the cropped result. Precise, keyboard-accessible
+  numeric X/Y/W/H inputs live in a collapsed "Adjust crop precisely"
+  disclosure so they stay out of the common drag-to-crop flow. See
+  `widgets.py` + `static/image_cropping/ml_cropper.js`.
+- **Removed** the pluggable backend / `django-appconf` config layer; easy_thumbnails
+  is wired directly.
+- Dropped upstream's unused pieces for our codebase (ForeignKey-image cropping,
+  the `cropped_thumbnail` template tag — Banner now uses the same
+  `{% thumbnail … box=banner.cropping %}` idiom as everywhere else).
+
+## What we deliberately kept identical
+
+- `ImageRatioField` is still a `CharField` storing `"x1,y1,x2,y2"`, and its
+  `deconstruct()` still returns `image_cropping.fields.ImageRatioField`.
+  **This is a migration-safety contract** (pinned by
+  `website/tests/test_image_cropping.py`): `website/migrations/` is gitignored
+  and regenerated per environment, existing migration files
+  `import image_cropping.fields`, and deploys are push-only with no server shell
+  to repair a broken `migrate`. Keeping the package name and field path is what
+  makes the swap a no-op at the database layer.
+- `crop_corners` (the easy_thumbnails processor) is unchanged, so every
+  `{% thumbnail … box=obj.cropping %}` call site keeps working.
+
+## Layout
+
+```
+image_cropping/
+  __init__.py              exports ImageRatioField, ImageCroppingMixin
+  fields.py                ImageRatioField (+ max_cropping helper)
+  thumbnail_processors.py  crop_corners (easy_thumbnails processor)
+  admin.py                 ImageCroppingMixin
+  widgets.py               CropImageWidget (Cropper.js)
+  static/image_cropping/   cropper.min.{js,css} (vendored) + ml_cropper.{js,css}
+```
+
+## Upgrading Cropper.js
+
+Replace `static/image_cropping/cropper.min.{js,css}` with a newer 1.x build and
+re-run `collectstatic`. The glue in `ml_cropper.js` targets the Cropper.js v1
+API (`getData`/`setData` in natural pixels); v2 is a web-components rewrite with
+a different API and would require rewriting the glue.
diff --git a/image_cropping/__init__.py b/image_cropping/__init__.py
new file mode 100644
index 00000000..958c29cb
--- /dev/null
+++ b/image_cropping/__init__.py
@@ -0,0 +1,39 @@
+"""
+image_cropping - in-repo fork of django-image-cropping (#1299 / #1269).
+
+Why this package exists
+-----------------------
+We replaced the PyPI ``django-image-cropping`` (v1.7, Feb 2022; Jcrop +
+jQuery; classifiers stop at Django 4.0; "save first, *then* crop") with this
+small local fork. It is treated as project source code, exactly like
+``sortedm2m_filter_horizontal_widget``.
+
+What changed vs. upstream
+-------------------------
+- The admin widget is rewritten on **Cropper.js** (vendored, v1.6.2, MIT, no
+  build step). It previews and crops the image *client-side, before the first
+  save* -- closing the long-standing "upload, save, scroll up, crop" friction
+  (#1299).
+- The pluggable backend / ``django-appconf`` config layer is removed; we wire
+  easy_thumbnails directly.
+
+What deliberately did NOT change
+--------------------------------
+- ``ImageRatioField`` is still a ``CharField`` storing an ``"x1,y1,x2,y2"``
+  box, and its ``deconstruct()`` still returns
+  ``image_cropping.fields.ImageRatioField``. That keeps the DB column and every
+  gitignored, per-environment migration that ``import image_cropping.fields``
+  working -- critical because deploys are push-only with no server shell to
+  repair a broken ``migrate`` (see CLAUDE.md).
+- ``crop_corners`` still feeds the stored box to easy_thumbnails, so every
+  ``{% thumbnail ... box=obj.cropping %}`` call site is untouched.
+
+Keeping the package name ``image_cropping`` (rather than renaming) is
+intentional: it is what preserves those migration imports.
+"""
+
+from .admin import ImageCroppingMixin
+from .fields import ImageRatioField
+
+__all__ = ["ImageCroppingMixin", "ImageRatioField"]
+__version__ = "2.0.0-makelab"
diff --git a/image_cropping/admin.py b/image_cropping/admin.py
new file mode 100644
index 00000000..dcd42ae3
--- /dev/null
+++ b/image_cropping/admin.py
@@ -0,0 +1,19 @@
+"""
+Admin mixin that swaps the crop widget onto cropped ImageFields.
+
+Add :class:`ImageCroppingMixin` to a ``ModelAdmin`` whose model has one or more
+:class:`~image_cropping.fields.ImageRatioField`. For each ImageField referenced
+by a ratio field, the file input is rendered with :class:`CropImageWidget`
+(Cropper.js); the ratio field renders as a plain text input carrying the crop
+box. ``ml_cropper.js`` wires the two together in the browser.
+"""
+
+from .widgets import CropImageWidget
+
+
+class ImageCroppingMixin:
+    def formfield_for_dbfield(self, db_field, request, **kwargs):
+        crop_fields = getattr(self.model, "crop_fields", {})
+        if db_field.name in crop_fields:
+            kwargs["widget"] = CropImageWidget
+        return super().formfield_for_dbfield(db_field, request, **kwargs)
diff --git a/image_cropping/fields.py b/image_cropping/fields.py
new file mode 100644
index 00000000..630191d1
--- /dev/null
+++ b/image_cropping/fields.py
@@ -0,0 +1,194 @@
+"""
+ImageRatioField - stores a crop box for an associated ImageField.
+
+A thin ``CharField`` that holds an ``"x1,y1,x2,y2"`` rectangle (original-image
+pixel coordinates). It does not store an image itself; it records *how* a
+sibling ``ImageField`` should be cropped, and easy_thumbnails renders the crop
+on demand via :func:`image_cropping.thumbnail_processors.crop_corners`.
+
+Ported from upstream django-image-cropping with the appconf/backend layer
+removed. The constructor signature, ``deconstruct()`` output, and the
+``crop_fields`` / ``ratio_fields`` model metadata are kept identical to
+upstream so existing (gitignored, per-environment) migrations and the admin
+mixin keep working unchanged. See the package docstring for the full rationale.
+"""
+
+from django import forms
+from django.db import models
+from django.db.models import signals
+
+
+def max_cropping(width, height, image_width, image_height, free_crop=False):
+    """
+    Return the largest centered box of aspect ratio ``width/height`` that fits
+    inside an ``image_width`` x ``image_height`` image, as ``[x1, y1, x2, y2]``.
+
+    Used to seed a sensible default crop when none has been set yet.
+    """
+    if free_crop:
+        return [0, 0, image_width, image_height]
+
+    ratio = width / float(height)
+    if image_width < image_height * ratio:
+        # width fits fully, height needs to be cropped
+        offset = int(round((image_height - (image_width / ratio)) / 2))
+        return [0, offset, image_width, image_height - offset]
+
+    # height fits fully, width needs to be cropped
+    offset = int(round((image_width - (image_height * ratio)) / 2))
+    return [offset, 0, image_width - offset, image_height]
+
+
+def _image_size(image):
+    """Return (width, height) for an image file, honoring EXIF orientation."""
+    try:
+        return image.width, image.height
+    except AttributeError:
+        # Fall back to opening the file (e.g. freshly uploaded, not yet saved).
+        from easy_thumbnails.source_generators import pil_image
+        return pil_image(image).size
+
+
+class ImageRatioField(models.CharField):
+    """
+    Store the crop boundaries for ``image_field`` at a fixed aspect ratio.
+
+    Args:
+        image_field: name of the sibling ``ImageField`` to crop. (Upstream also
+            supported ``"fk_field__image"`` for cropping an image on a related
+            object; that path is unused here but the kwarg is still accepted.)
+        size: ``"WIDTHxHEIGHT"`` -- defines both the aspect ratio and the
+            minimum acceptable crop size.
+        free_crop: if True, allow any aspect ratio.
+        size_warning: if True, warn in the admin when the chosen crop is
+            smaller than ``size``.
+
+    ``adapt_rotation``, ``allow_fullsize``, and ``hide_image_field`` are
+    accepted for migration/back-compat but are not otherwise used.
+    """
+
+    def __init__(
+        self,
+        image_field,
+        size="0x0",
+        free_crop=False,
+        adapt_rotation=False,
+        allow_fullsize=False,
+        verbose_name=None,
+        help_text=None,
+        hide_image_field=False,
+        size_warning=False,
+    ):
+        if "__" in image_field:
+            self.image_field, self.image_fk_field = image_field.split("__")
+        else:
+            self.image_field, self.image_fk_field = image_field, None
+        self.width, self.height = list(map(int, size.split("x")))
+        self.free_crop = free_crop
+        self.adapt_rotation = adapt_rotation
+        self.allow_fullsize = allow_fullsize
+        self.size_warning = size_warning
+        self.hide_image_field = hide_image_field
+        super().__init__(
+            max_length=255,
+            default="",
+            blank=True,
+            verbose_name=verbose_name,
+            help_text=help_text,
+        )
+
+    def deconstruct(self):
+        """
+        Return migration-serialization data.
+
+        IMPORTANT: the returned path is hard-pinned to
+        ``"image_cropping.fields.ImageRatioField"``. Existing migration files
+        (gitignored, regenerated per environment) reference exactly this path;
+        changing it would break ``migrate`` on the next push-to-deploy with no
+        way to fix it server-side. Pinned by a regression test.
+        """
+        if self.image_fk_field:
+            image_field = "%s__%s" % (self.image_field, self.image_fk_field)
+        else:
+            image_field = self.image_field
+
+        args = (image_field, "%dx%d" % (self.width, self.height))
+        kwargs = {
+            "free_crop": self.free_crop,
+            "adapt_rotation": self.adapt_rotation,
+            "allow_fullsize": self.allow_fullsize,
+            "verbose_name": self.verbose_name,
+            "help_text": self.help_text,
+            "hide_image_field": self.hide_image_field,
+            "size_warning": self.size_warning,
+        }
+        return self.name, "image_cropping.fields.ImageRatioField", args, kwargs
+
+    def contribute_to_class(self, cls, name, **kwargs):
+        super().contribute_to_class(cls, name, **kwargs)
+        if not cls._meta.abstract:
+            # Record which ImageFields are cropped (so the admin mixin can swap
+            # in the crop widget) and which ratio fields exist on the model.
+            if not hasattr(cls, "crop_fields"):
+                cls.add_to_class("crop_fields", {})
+            cls.crop_fields[self.image_field] = {
+                "fk_field": self.image_fk_field,
+                "hidden": self.hide_image_field,
+            }
+
+            if not hasattr(cls, "ratio_fields"):
+                cls.add_to_class("ratio_fields", [])
+            cls.ratio_fields.append(name)
+
+            signals.pre_save.connect(self.initial_cropping, sender=cls)
+
+    def initial_cropping(self, sender, instance, *args, **kwargs):
+        """
+        Seed an empty ratio field with a centered max-area box on save, so a
+        sensible crop exists even if the editor never touched the widget (or
+        had JavaScript disabled).
+        """
+        for ratiofieldname in getattr(instance, "ratio_fields", []):
+            if getattr(instance, ratiofieldname):
+                continue  # cropping already set
+
+            ratiofield = instance._meta.get_field(ratiofieldname)
+            image = getattr(instance, ratiofield.image_field)
+            if ratiofield.image_fk_field and image:  # image is on a ForeignKey
+                image = getattr(image, ratiofield.image_fk_field)
+            if not image:
+                continue
+
+            try:
+                width, height = _image_size(image)
+                box = max_cropping(
+                    ratiofield.width,
+                    ratiofield.height,
+                    width,
+                    height,
+                    free_crop=ratiofield.free_crop,
+                )
+                box = ",".join(map(str, box))
+            except (IOError, OSError):
+                box = ""
+            setattr(instance, ratiofieldname, box)
+
+    def formfield(self, **kwargs):
+        """
+        Render as a text input carrying the data-* attributes that
+        ``ml_cropper.js`` reads to drive Cropper.js. The input itself holds the
+        ``"x1,y1,x2,y2"`` value the JS writes back.
+        """
+        ratio = 0 if self.free_crop else self.width / float(self.height)
+        kwargs["widget"] = forms.TextInput(
+            attrs={
+                "class": "image-ratio",
+                "data-image-field": self.image_field,
+                "data-my-name": self.name,
+                "data-ratio": str(ratio),
+                "data-min-width": self.width,
+                "data-min-height": self.height,
+                "data-size-warning": str(self.size_warning).lower(),
+            }
+        )
+        return super().formfield(**kwargs)
diff --git a/image_cropping/static/image_cropping/cropper.min.css b/image_cropping/static/image_cropping/cropper.min.css
new file mode 100644
index 00000000..8e34d751
--- /dev/null
+++ b/image_cropping/static/image_cropping/cropper.min.css
@@ -0,0 +1,9 @@
+/*!
+ * Cropper.js v1.6.2
+ * https://fengyuanchen.github.io/cropperjs
+ *
+ * Copyright 2015-present Chen Fengyuan
+ * Released under the MIT license
+ *
+ * Date: 2024-04-21T07:43:02.731Z
+ */.cropper-container{-webkit-touch-callout:none;direction:ltr;font-size:0;line-height:0;position:relative;-ms-touch-action:none;touch-action:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.cropper-container img{backface-visibility:hidden;display:block;height:100%;image-orientation:0deg;max-height:none!important;max-width:none!important;min-height:0!important;min-width:0!important;width:100%}.cropper-canvas,.cropper-crop-box,.cropper-drag-box,.cropper-modal,.cropper-wrap-box{bottom:0;left:0;position:absolute;right:0;top:0}.cropper-canvas,.cropper-wrap-box{overflow:hidden}.cropper-drag-box{background-color:#fff;opacity:0}.cropper-modal{background-color:#000;opacity:.5}.cropper-view-box{display:block;height:100%;outline:1px solid #39f;outline-color:rgba(51,153,255,.75);overflow:hidden;width:100%}.cropper-dashed{border:0 dashed #eee;display:block;opacity:.5;position:absolute}.cropper-dashed.dashed-h{border-bottom-width:1px;border-top-width:1px;height:33.33333%;left:0;top:33.33333%;width:100%}.cropper-dashed.dashed-v{border-left-width:1px;border-right-width:1px;height:100%;left:33.33333%;top:0;width:33.33333%}.cropper-center{display:block;height:0;left:50%;opacity:.75;position:absolute;top:50%;width:0}.cropper-center:after,.cropper-center:before{background-color:#eee;content:" ";display:block;position:absolute}.cropper-center:before{height:1px;left:-3px;top:0;width:7px}.cropper-center:after{height:7px;left:0;top:-3px;width:1px}.cropper-face,.cropper-line,.cropper-point{display:block;height:100%;opacity:.1;position:absolute;width:100%}.cropper-face{background-color:#fff;left:0;top:0}.cropper-line{background-color:#39f}.cropper-line.line-e{cursor:ew-resize;right:-3px;top:0;width:5px}.cropper-line.line-n{cursor:ns-resize;height:5px;left:0;top:-3px}.cropper-line.line-w{cursor:ew-resize;left:-3px;top:0;width:5px}.cropper-line.line-s{bottom:-3px;cursor:ns-resize;height:5px;left:0}.cropper-point{background-color:#39f;height:5px;opacity:.75;width:5px}.cropper-point.point-e{cursor:ew-resize;margin-top:-3px;right:-3px;top:50%}.cropper-point.point-n{cursor:ns-resize;left:50%;margin-left:-3px;top:-3px}.cropper-point.point-w{cursor:ew-resize;left:-3px;margin-top:-3px;top:50%}.cropper-point.point-s{bottom:-3px;cursor:s-resize;left:50%;margin-left:-3px}.cropper-point.point-ne{cursor:nesw-resize;right:-3px;top:-3px}.cropper-point.point-nw{cursor:nwse-resize;left:-3px;top:-3px}.cropper-point.point-sw{bottom:-3px;cursor:nesw-resize;left:-3px}.cropper-point.point-se{bottom:-3px;cursor:nwse-resize;height:20px;opacity:1;right:-3px;width:20px}@media (min-width:768px){.cropper-point.point-se{height:15px;width:15px}}@media (min-width:992px){.cropper-point.point-se{height:10px;width:10px}}@media (min-width:1200px){.cropper-point.point-se{height:5px;opacity:.75;width:5px}}.cropper-point.point-se:before{background-color:#39f;bottom:-50%;content:" ";display:block;height:200%;opacity:0;position:absolute;right:-50%;width:200%}.cropper-invisible{opacity:0}.cropper-bg{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC")}.cropper-hide{display:block;height:0;position:absolute;width:0}.cropper-hidden{display:none!important}.cropper-move{cursor:move}.cropper-crop{cursor:crosshair}.cropper-disabled .cropper-drag-box,.cropper-disabled .cropper-face,.cropper-disabled .cropper-line,.cropper-disabled .cropper-point{cursor:not-allowed}
\ No newline at end of file
diff --git a/image_cropping/static/image_cropping/cropper.min.js b/image_cropping/static/image_cropping/cropper.min.js
new file mode 100644
index 00000000..3102cb54
--- /dev/null
+++ b/image_cropping/static/image_cropping/cropper.min.js
@@ -0,0 +1,10 @@
+/*!
+ * Cropper.js v1.6.2
+ * https://fengyuanchen.github.io/cropperjs
+ *
+ * Copyright 2015-present Chen Fengyuan
+ * Released under the MIT license
+ *
+ * Date: 2024-04-21T07:43:05.335Z
+ */
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).Cropper=e()}(this,function(){"use strict";function C(e,t){var i,a=Object.keys(e);return Object.getOwnPropertySymbols&&(i=Object.getOwnPropertySymbols(e),t&&(i=i.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),a.push.apply(a,i)),a}function S(a){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?C(Object(n),!0).forEach(function(t){var e,i;e=a,i=n[t=t],(t=D(t))in e?Object.defineProperty(e,t,{value:i,enumerable:!0,configurable:!0,writable:!0}):e[t]=i}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(n)):C(Object(n)).forEach(function(t){Object.defineProperty(a,t,Object.getOwnPropertyDescriptor(n,t))})}return a}function D(t){t=function(t,e){if("object"!=typeof t||!t)return t;var i=t[Symbol.toPrimitive];if(void 0===i)return("string"===e?String:Number)(t);if("object"!=typeof(i=i.call(t,e||"default")))return i;throw new TypeError("@@toPrimitive must return a primitive value.")}(t,"string");return"symbol"==typeof t?t:t+""}function j(t){return(j="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function A(t,e){for(var i=0;i<e.length;i++){var a=e[i];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(t,D(a.key),a)}}function P(t){return function(t){if(Array.isArray(t))return a(t)}(t)||function(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}(t)||function(t,e){var i;if(t)return"string"==typeof t?a(t,e):"Map"===(i="Object"===(i=Object.prototype.toString.call(t).slice(8,-1))&&t.constructor?t.constructor.name:i)||"Set"===i?Array.from(t):"Arguments"===i||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(i)?a(t,e):void 0}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function a(t,e){(null==e||e>t.length)&&(e=t.length);for(var i=0,a=new Array(e);i<e;i++)a[i]=t[i];return a}var t="undefined"!=typeof window&&void 0!==window.document,h=t?window:{},e=!(!t||!h.document.documentElement)&&"ontouchstart"in h.document.documentElement,i=t&&"PointerEvent"in h,c="cropper",I="all",U="crop",q="move",$="zoom",B="e",k="w",O="s",T="n",E="ne",W="nw",H="se",N="sw",Q="".concat(c,"-crop"),K="".concat(c,"-disabled"),L="".concat(c,"-hidden"),Z="".concat(c,"-hide"),G="".concat(c,"-invisible"),n="".concat(c,"-modal"),V="".concat(c,"-move"),d="".concat(c,"Action"),m="".concat(c,"Preview"),F="crop",J="move",_="none",tt="crop",et="cropend",it="cropmove",at="cropstart",nt="dblclick",ot=i?"pointerdown":e?"touchstart":"mousedown",ht=i?"pointermove":e?"touchmove":"mousemove",rt=i?"pointerup pointercancel":e?"touchend touchcancel":"mouseup",st="zoom",ct="image/jpeg",dt=/^e|w|s|n|se|sw|ne|nw|all|crop|move|zoom$/,lt=/^data:/,pt=/^data:image\/jpeg;base64,/,mt=/^img|canvas$/i,ut={viewMode:0,dragMode:F,initialAspectRatio:NaN,aspectRatio:NaN,data:null,preview:"",responsive:!0,restore:!0,checkCrossOrigin:!0,checkOrientation:!0,modal:!0,guides:!0,center:!0,highlight:!0,background:!0,autoCrop:!0,autoCropArea:.8,movable:!0,rotatable:!0,scalable:!0,zoomable:!0,zoomOnTouch:!0,zoomOnWheel:!0,wheelZoomRatio:.1,cropBoxMovable:!0,cropBoxResizable:!0,toggleDragModeOnDblclick:!0,minCanvasWidth:0,minCanvasHeight:0,minCropBoxWidth:0,minCropBoxHeight:0,minContainerWidth:200,minContainerHeight:100,ready:null,cropstart:null,cropmove:null,cropend:null,crop:null,zoom:null},gt=Number.isNaN||h.isNaN;function p(t){return"number"==typeof t&&!gt(t)}function ft(t){return 0<t&&t<1/0}function vt(t){return void 0===t}function o(t){return"object"===j(t)&&null!==t}var wt=Object.prototype.hasOwnProperty;function u(t){if(!o(t))return!1;try{var e=t.constructor,i=e.prototype;return e&&i&&wt.call(i,"isPrototypeOf")}catch(t){return!1}}function l(t){return"function"==typeof t}var bt=Array.prototype.slice;function yt(t){return Array.from?Array.from(t):bt.call(t)}function z(i,a){return i&&l(a)&&(Array.isArray(i)||p(i.length)?yt(i).forEach(function(t,e){a.call(i,t,e,i)}):o(i)&&Object.keys(i).forEach(function(t){a.call(i,i[t],t,i)})),i}var g=Object.assign||function(i){for(var t=arguments.length,e=new Array(1<t?t-1:0),a=1;a<t;a++)e[a-1]=arguments[a];return o(i)&&0<e.length&&e.forEach(function(e){o(e)&&Object.keys(e).forEach(function(t){i[t]=e[t]})}),i},xt=/\.\d*(?:0|9){12}\d*$/;function Y(t,e){e=1<arguments.length&&void 0!==e?e:1e11;return xt.test(t)?Math.round(t*e)/e:t}var Mt=/^width|height|left|top|marginLeft|marginTop$/;function f(t,e){var i=t.style;z(e,function(t,e){Mt.test(e)&&p(t)&&(t="".concat(t,"px")),i[e]=t})}function v(t,e){var i;e&&(p(t.length)?z(t,function(t){v(t,e)}):t.classList?t.classList.add(e):(i=t.className.trim())?i.indexOf(e)<0&&(t.className="".concat(i," ").concat(e)):t.className=e)}function X(t,e){e&&(p(t.length)?z(t,function(t){X(t,e)}):t.classList?t.classList.remove(e):0<=t.className.indexOf(e)&&(t.className=t.className.replace(e,"")))}function r(t,e,i){e&&(p(t.length)?z(t,function(t){r(t,e,i)}):(i?v:X)(t,e))}var Ct=/([a-z\d])([A-Z])/g;function Dt(t){return t.replace(Ct,"$1-$2").toLowerCase()}function Bt(t,e){return o(t[e])?t[e]:t.dataset?t.dataset[e]:t.getAttribute("data-".concat(Dt(e)))}function w(t,e,i){o(i)?t[e]=i:t.dataset?t.dataset[e]=i:t.setAttribute("data-".concat(Dt(e)),i)}var kt,Ot,Tt=/\s\s*/,Et=(Ot=!1,t&&(kt=!1,i=function(){},e=Object.defineProperty({},"once",{get:function(){return Ot=!0,kt},set:function(t){kt=t}}),h.addEventListener("test",i,e),h.removeEventListener("test",i,e)),Ot);function s(i,t,a,e){var n=3<arguments.length&&void 0!==e?e:{},o=a;t.trim().split(Tt).forEach(function(t){var e;Et||(e=i.listeners)&&e[t]&&e[t][a]&&(o=e[t][a],delete e[t][a],0===Object.keys(e[t]).length&&delete e[t],0===Object.keys(e).length)&&delete i.listeners,i.removeEventListener(t,o,n)})}function b(o,t,h,e){var r=3<arguments.length&&void 0!==e?e:{},s=h;t.trim().split(Tt).forEach(function(a){var t,n;r.once&&!Et&&(t=o.listeners,s=function(){delete n[a][h],o.removeEventListener(a,s,r);for(var t=arguments.length,e=new Array(t),i=0;i<t;i++)e[i]=arguments[i];h.apply(o,e)},(n=void 0===t?{}:t)[a]||(n[a]={}),n[a][h]&&o.removeEventListener(a,n[a][h],r),n[a][h]=s,o.listeners=n),o.addEventListener(a,s,r)})}function y(t,e,i){var a;return l(Event)&&l(CustomEvent)?a=new CustomEvent(e,{detail:i,bubbles:!0,cancelable:!0}):(a=document.createEvent("CustomEvent")).initCustomEvent(e,!0,!0,i),t.dispatchEvent(a)}function Wt(t){t=t.getBoundingClientRect();return{left:t.left+(window.pageXOffset-document.documentElement.clientLeft),top:t.top+(window.pageYOffset-document.documentElement.clientTop)}}var Ht=h.location,Nt=/^(\w+:)\/\/([^:/?#]*):?(\d*)/i;function Lt(t){t=t.match(Nt);return null!==t&&(t[1]!==Ht.protocol||t[2]!==Ht.hostname||t[3]!==Ht.port)}function zt(t){var e="timestamp=".concat((new Date).getTime());return t+(-1===t.indexOf("?")?"?":"&")+e}function x(t){var e=t.rotate,i=t.scaleX,a=t.scaleY,n=t.translateX,t=t.translateY,o=[],n=(p(n)&&0!==n&&o.push("translateX(".concat(n,"px)")),p(t)&&0!==t&&o.push("translateY(".concat(t,"px)")),p(e)&&0!==e&&o.push("rotate(".concat(e,"deg)")),p(i)&&1!==i&&o.push("scaleX(".concat(i,")")),p(a)&&1!==a&&o.push("scaleY(".concat(a,")")),o.length?o.join(" "):"none");return{WebkitTransform:n,msTransform:n,transform:n}}function M(t,e){var i=t.pageX,t=t.pageY,a={endX:i,endY:t};return e?a:S({startX:i,startY:t},a)}function R(t,e){var i,a=t.aspectRatio,n=t.height,t=t.width,e=1<arguments.length&&void 0!==e?e:"contain",o=ft(t),h=ft(n);return o&&h?(i=n*a,"contain"===e&&t<i||"cover"===e&&i<t?n=t/a:t=n*a):o?n=t/a:h&&(t=n*a),{width:t,height:n}}var Yt=String.fromCharCode;var Xt=/^data:.*,/;function Rt(t){var e,i,a,n,o,h,r,s=new DataView(t);try{if(255===s.getUint8(0)&&216===s.getUint8(1))for(var c=s.byteLength,d=2;d+1<c;){if(255===s.getUint8(d)&&225===s.getUint8(d+1)){i=d;break}d+=1}if(a=i&&(n=i+10,"Exif"===function(t,e,i){var a="";i+=e;for(var n=e;n<i;n+=1)a+=Yt(t.getUint8(n));return a}(s,i+4,4))&&((r=18761===(o=s.getUint16(n)))||19789===o)&&42===s.getUint16(n+2,r)&&8<=(h=s.getUint32(n+4,r))?n+h:a)for(var l,p=s.getUint16(a,r),m=0;m<p;m+=1)if(l=a+12*m+2,274===s.getUint16(l,r)){l+=8,e=s.getUint16(l,r),s.setUint16(l,1,r);break}}catch(t){e=1}return e}var t={render:function(){this.initContainer(),this.initCanvas(),this.initCropBox(),this.renderCanvas(),this.cropped&&this.renderCropBox()},initContainer:function(){var t=this.element,e=this.options,i=this.container,a=this.cropper,n=Number(e.minContainerWidth),e=Number(e.minContainerHeight),n=(v(a,L),X(t,L),{width:Math.max(i.offsetWidth,0<=n?n:200),height:Math.max(i.offsetHeight,0<=e?e:100)});f(a,{width:(this.containerData=n).width,height:n.height}),v(t,L),X(a,L)},initCanvas:function(){var t=this.containerData,e=this.imageData,i=this.options.viewMode,a=Math.abs(e.rotate)%180==90,n=a?e.naturalHeight:e.naturalWidth,a=a?e.naturalWidth:e.naturalHeight,e=n/a,o=t.width,h=t.height,e=(t.height*e>t.width?3===i?o=t.height*e:h=t.width/e:3===i?h=t.width/e:o=t.height*e,{aspectRatio:e,naturalWidth:n,naturalHeight:a,width:o,height:h});this.canvasData=e,this.limited=1===i||2===i,this.limitCanvas(!0,!0),e.width=Math.min(Math.max(e.width,e.minWidth),e.maxWidth),e.height=Math.min(Math.max(e.height,e.minHeight),e.maxHeight),e.left=(t.width-e.width)/2,e.top=(t.height-e.height)/2,e.oldLeft=e.left,e.oldTop=e.top,this.initialCanvasData=g({},e)},limitCanvas:function(t,e){var i=this.options,a=this.containerData,n=this.canvasData,o=this.cropBoxData,h=i.viewMode,r=n.aspectRatio,s=this.cropped&&o;t&&(t=Number(i.minCanvasWidth)||0,i=Number(i.minCanvasHeight)||0,1<h?(t=Math.max(t,a.width),i=Math.max(i,a.height),3===h&&(t<i*r?t=i*r:i=t/r)):0<h&&(t?t=Math.max(t,s?o.width:0):i?i=Math.max(i,s?o.height:0):s&&((t=o.width)<(i=o.height)*r?t=i*r:i=t/r)),t=(r=R({aspectRatio:r,width:t,height:i})).width,i=r.height,n.minWidth=t,n.minHeight=i,n.maxWidth=1/0,n.maxHeight=1/0),e&&((s?0:1)<h?(r=a.width-n.width,t=a.height-n.height,n.minLeft=Math.min(0,r),n.minTop=Math.min(0,t),n.maxLeft=Math.max(0,r),n.maxTop=Math.max(0,t),s&&this.limited&&(n.minLeft=Math.min(o.left,o.left+(o.width-n.width)),n.minTop=Math.min(o.top,o.top+(o.height-n.height)),n.maxLeft=o.left,n.maxTop=o.top,2===h)&&(n.width>=a.width&&(n.minLeft=Math.min(0,r),n.maxLeft=Math.max(0,r)),n.height>=a.height)&&(n.minTop=Math.min(0,t),n.maxTop=Math.max(0,t))):(n.minLeft=-n.width,n.minTop=-n.height,n.maxLeft=a.width,n.maxTop=a.height))},renderCanvas:function(t,e){var i,a,n,o,h=this.canvasData,r=this.imageData;e&&(e={width:r.naturalWidth*Math.abs(r.scaleX||1),height:r.naturalHeight*Math.abs(r.scaleY||1),degree:r.rotate||0},r=e.width,o=e.height,e=e.degree,i=90==(e=Math.abs(e)%180)?{width:o,height:r}:(a=e%90*Math.PI/180,i=Math.sin(a),n=r*(a=Math.cos(a))+o*i,r=r*i+o*a,90<e?{width:r,height:n}:{width:n,height:r}),a=h.width*((o=i.width)/h.naturalWidth),n=h.height*((e=i.height)/h.naturalHeight),h.left-=(a-h.width)/2,h.top-=(n-h.height)/2,h.width=a,h.height=n,h.aspectRatio=o/e,h.naturalWidth=o,h.naturalHeight=e,this.limitCanvas(!0,!1)),(h.width>h.maxWidth||h.width<h.minWidth)&&(h.left=h.oldLeft),(h.height>h.maxHeight||h.height<h.minHeight)&&(h.top=h.oldTop),h.width=Math.min(Math.max(h.width,h.minWidth),h.maxWidth),h.height=Math.min(Math.max(h.height,h.minHeight),h.maxHeight),this.limitCanvas(!1,!0),h.left=Math.min(Math.max(h.left,h.minLeft),h.maxLeft),h.top=Math.min(Math.max(h.top,h.minTop),h.maxTop),h.oldLeft=h.left,h.oldTop=h.top,f(this.canvas,g({width:h.width,height:h.height},x({translateX:h.left,translateY:h.top}))),this.renderImage(t),this.cropped&&this.limited&&this.limitCropBox(!0,!0)},renderImage:function(t){var e=this.canvasData,i=this.imageData,a=i.naturalWidth*(e.width/e.naturalWidth),n=i.naturalHeight*(e.height/e.naturalHeight);g(i,{width:a,height:n,left:(e.width-a)/2,top:(e.height-n)/2}),f(this.image,g({width:i.width,height:i.height},x(g({translateX:i.left,translateY:i.top},i)))),t&&this.output()},initCropBox:function(){var t=this.options,e=this.canvasData,i=t.aspectRatio||t.initialAspectRatio,t=Number(t.autoCropArea)||.8,a={width:e.width,height:e.height};i&&(e.height*i>e.width?a.height=a.width/i:a.width=a.height*i),this.cropBoxData=a,this.limitCropBox(!0,!0),a.width=Math.min(Math.max(a.width,a.minWidth),a.maxWidth),a.height=Math.min(Math.max(a.height,a.minHeight),a.maxHeight),a.width=Math.max(a.minWidth,a.width*t),a.height=Math.max(a.minHeight,a.height*t),a.left=e.left+(e.width-a.width)/2,a.top=e.top+(e.height-a.height)/2,a.oldLeft=a.left,a.oldTop=a.top,this.initialCropBoxData=g({},a)},limitCropBox:function(t,e){var i,a,n=this.options,o=this.containerData,h=this.canvasData,r=this.cropBoxData,s=this.limited,c=n.aspectRatio;t&&(t=Number(n.minCropBoxWidth)||0,n=Number(n.minCropBoxHeight)||0,i=s?Math.min(o.width,h.width,h.width+h.left,o.width-h.left):o.width,a=s?Math.min(o.height,h.height,h.height+h.top,o.height-h.top):o.height,t=Math.min(t,o.width),n=Math.min(n,o.height),c&&(t&&n?t<n*c?n=t/c:t=n*c:t?n=t/c:n&&(t=n*c),i<a*c?a=i/c:i=a*c),r.minWidth=Math.min(t,i),r.minHeight=Math.min(n,a),r.maxWidth=i,r.maxHeight=a),e&&(s?(r.minLeft=Math.max(0,h.left),r.minTop=Math.max(0,h.top),r.maxLeft=Math.min(o.width,h.left+h.width)-r.width,r.maxTop=Math.min(o.height,h.top+h.height)-r.height):(r.minLeft=0,r.minTop=0,r.maxLeft=o.width-r.width,r.maxTop=o.height-r.height))},renderCropBox:function(){var t=this.options,e=this.containerData,i=this.cropBoxData;(i.width>i.maxWidth||i.width<i.minWidth)&&(i.left=i.oldLeft),(i.height>i.maxHeight||i.height<i.minHeight)&&(i.top=i.oldTop),i.width=Math.min(Math.max(i.width,i.minWidth),i.maxWidth),i.height=Math.min(Math.max(i.height,i.minHeight),i.maxHeight),this.limitCropBox(!1,!0),i.left=Math.min(Math.max(i.left,i.minLeft),i.maxLeft),i.top=Math.min(Math.max(i.top,i.minTop),i.maxTop),i.oldLeft=i.left,i.oldTop=i.top,t.movable&&t.cropBoxMovable&&w(this.face,d,i.width>=e.width&&i.height>=e.height?q:I),f(this.cropBox,g({width:i.width,height:i.height},x({translateX:i.left,translateY:i.top}))),this.cropped&&this.limited&&this.limitCanvas(!0,!0),this.disabled||this.output()},output:function(){this.preview(),y(this.element,tt,this.getData())}},i={initPreview:function(){var t=this.element,i=this.crossOrigin,e=this.options.preview,a=i?this.crossOriginUrl:this.url,n=t.alt||"The image to preview",o=document.createElement("img");i&&(o.crossOrigin=i),o.src=a,o.alt=n,this.viewBox.appendChild(o),this.viewBoxImage=o,e&&("string"==typeof(o=e)?o=t.ownerDocument.querySelectorAll(e):e.querySelector&&(o=[e]),z(this.previews=o,function(t){var e=document.createElement("img");w(t,m,{width:t.offsetWidth,height:t.offsetHeight,html:t.innerHTML}),i&&(e.crossOrigin=i),e.src=a,e.alt=n,e.style.cssText='display:block;width:100%;height:auto;min-width:0!important;min-height:0!important;max-width:none!important;max-height:none!important;image-orientation:0deg!important;"',t.innerHTML="",t.appendChild(e)}))},resetPreview:function(){z(this.previews,function(e){var i=Bt(e,m),i=(f(e,{width:i.width,height:i.height}),e.innerHTML=i.html,e),e=m;if(o(i[e]))try{delete i[e]}catch(t){i[e]=void 0}else if(i.dataset)try{delete i.dataset[e]}catch(t){i.dataset[e]=void 0}else i.removeAttribute("data-".concat(Dt(e)))})},preview:function(){var h=this.imageData,t=this.canvasData,e=this.cropBoxData,r=e.width,s=e.height,c=h.width,d=h.height,l=e.left-t.left-h.left,p=e.top-t.top-h.top;this.cropped&&!this.disabled&&(f(this.viewBoxImage,g({width:c,height:d},x(g({translateX:-l,translateY:-p},h)))),z(this.previews,function(t){var e=Bt(t,m),i=e.width,e=e.height,a=i,n=e,o=1;r&&(n=s*(o=i/r)),s&&e<n&&(a=r*(o=e/s),n=e),f(t,{width:a,height:n}),f(t.getElementsByTagName("img")[0],g({width:c*o,height:d*o},x(g({translateX:-l*o,translateY:-p*o},h))))}))}},e={bind:function(){var t=this.element,e=this.options,i=this.cropper;l(e.cropstart)&&b(t,at,e.cropstart),l(e.cropmove)&&b(t,it,e.cropmove),l(e.cropend)&&b(t,et,e.cropend),l(e.crop)&&b(t,tt,e.crop),l(e.zoom)&&b(t,st,e.zoom),b(i,ot,this.onCropStart=this.cropStart.bind(this)),e.zoomable&&e.zoomOnWheel&&b(i,"wheel",this.onWheel=this.wheel.bind(this),{passive:!1,capture:!0}),e.toggleDragModeOnDblclick&&b(i,nt,this.onDblclick=this.dblclick.bind(this)),b(t.ownerDocument,ht,this.onCropMove=this.cropMove.bind(this)),b(t.ownerDocument,rt,this.onCropEnd=this.cropEnd.bind(this)),e.responsive&&b(window,"resize",this.onResize=this.resize.bind(this))},unbind:function(){var t=this.element,e=this.options,i=this.cropper;l(e.cropstart)&&s(t,at,e.cropstart),l(e.cropmove)&&s(t,it,e.cropmove),l(e.cropend)&&s(t,et,e.cropend),l(e.crop)&&s(t,tt,e.crop),l(e.zoom)&&s(t,st,e.zoom),s(i,ot,this.onCropStart),e.zoomable&&e.zoomOnWheel&&s(i,"wheel",this.onWheel,{passive:!1,capture:!0}),e.toggleDragModeOnDblclick&&s(i,nt,this.onDblclick),s(t.ownerDocument,ht,this.onCropMove),s(t.ownerDocument,rt,this.onCropEnd),e.responsive&&s(window,"resize",this.onResize)}},St={resize:function(){var t,e,i,a,n,o,h;this.disabled||(t=this.options,a=this.container,e=this.containerData,i=a.offsetWidth/e.width,a=a.offsetHeight/e.height,1!=(n=Math.abs(i-1)>Math.abs(a-1)?i:a)&&(t.restore&&(o=this.getCanvasData(),h=this.getCropBoxData()),this.render(),t.restore)&&(this.setCanvasData(z(o,function(t,e){o[e]=t*n})),this.setCropBoxData(z(h,function(t,e){h[e]=t*n}))))},dblclick:function(){var t,e;this.disabled||this.options.dragMode===_||this.setDragMode((t=this.dragBox,e=Q,(t.classList?t.classList.contains(e):-1<t.className.indexOf(e))?J:F))},wheel:function(t){var e=this,i=Number(this.options.wheelZoomRatio)||.1,a=1;this.disabled||(t.preventDefault(),this.wheeling)||(this.wheeling=!0,setTimeout(function(){e.wheeling=!1},50),t.deltaY?a=0<t.deltaY?1:-1:t.wheelDelta?a=-t.wheelDelta/120:t.detail&&(a=0<t.detail?1:-1),this.zoom(-a*i,t))},cropStart:function(t){var e,i=t.buttons,a=t.button;this.disabled||("mousedown"===t.type||"pointerdown"===t.type&&"mouse"===t.pointerType)&&(p(i)&&1!==i||p(a)&&0!==a||t.ctrlKey)||(i=this.options,e=this.pointers,t.changedTouches?z(t.changedTouches,function(t){e[t.identifier]=M(t)}):e[t.pointerId||0]=M(t),a=1<Object.keys(e).length&&i.zoomable&&i.zoomOnTouch?$:Bt(t.target,d),dt.test(a)&&!1!==y(this.element,at,{originalEvent:t,action:a})&&(t.preventDefault(),this.action=a,this.cropping=!1,a===U)&&(this.cropping=!0,v(this.dragBox,n)))},cropMove:function(t){var e,i=this.action;!this.disabled&&i&&(e=this.pointers,t.preventDefault(),!1!==y(this.element,it,{originalEvent:t,action:i}))&&(t.changedTouches?z(t.changedTouches,function(t){g(e[t.identifier]||{},M(t,!0))}):g(e[t.pointerId||0]||{},M(t,!0)),this.change(t))},cropEnd:function(t){var e,i;this.disabled||(e=this.action,i=this.pointers,t.changedTouches?z(t.changedTouches,function(t){delete i[t.identifier]}):delete i[t.pointerId||0],e&&(t.preventDefault(),Object.keys(i).length||(this.action=""),this.cropping&&(this.cropping=!1,r(this.dragBox,n,this.cropped&&this.options.modal)),y(this.element,et,{originalEvent:t,action:e})))}},jt={change:function(t){function e(t){switch(t){case B:f+D.x>y&&(D.x=y-f);break;case k:p+D.x<w&&(D.x=w-p);break;case T:m+D.y<b&&(D.y=b-m);break;case O:v+D.y>x&&(D.y=x-v)}}var i,a,o,n=this.options,h=this.canvasData,r=this.containerData,s=this.cropBoxData,c=this.pointers,d=this.action,l=n.aspectRatio,p=s.left,m=s.top,u=s.width,g=s.height,f=p+u,v=m+g,w=0,b=0,y=r.width,x=r.height,M=!0,C=(!l&&t.shiftKey&&(l=u&&g?u/g:1),this.limited&&(w=s.minLeft,b=s.minTop,y=w+Math.min(r.width,h.width,h.left+h.width),x=b+Math.min(r.height,h.height,h.top+h.height)),c[Object.keys(c)[0]]),D={x:C.endX-C.startX,y:C.endY-C.startY};switch(d){case I:p+=D.x,m+=D.y;break;case B:0<=D.x&&(y<=f||l&&(m<=b||x<=v))?M=!1:(e(B),(u+=D.x)<0&&(d=k,p-=u=-u),l&&(m+=(s.height-(g=u/l))/2));break;case T:D.y<=0&&(m<=b||l&&(p<=w||y<=f))?M=!1:(e(T),g-=D.y,m+=D.y,g<0&&(d=O,m-=g=-g),l&&(p+=(s.width-(u=g*l))/2));break;case k:D.x<=0&&(p<=w||l&&(m<=b||x<=v))?M=!1:(e(k),u-=D.x,p+=D.x,u<0&&(d=B,p-=u=-u),l&&(m+=(s.height-(g=u/l))/2));break;case O:0<=D.y&&(x<=v||l&&(p<=w||y<=f))?M=!1:(e(O),(g+=D.y)<0&&(d=T,m-=g=-g),l&&(p+=(s.width-(u=g*l))/2));break;case E:if(l){if(D.y<=0&&(m<=b||y<=f)){M=!1;break}e(T),g-=D.y,m+=D.y,u=g*l}else e(T),e(B),!(0<=D.x)||f<y?u+=D.x:D.y<=0&&m<=b&&(M=!1),(!(D.y<=0)||b<m)&&(g-=D.y,m+=D.y);u<0&&g<0?(d=N,m-=g=-g,p-=u=-u):u<0?(d=W,p-=u=-u):g<0&&(d=H,m-=g=-g);break;case W:if(l){if(D.y<=0&&(m<=b||p<=w)){M=!1;break}e(T),g-=D.y,m+=D.y,p+=s.width-(u=g*l)}else e(T),e(k),!(D.x<=0)||w<p?(u-=D.x,p+=D.x):D.y<=0&&m<=b&&(M=!1),(!(D.y<=0)||b<m)&&(g-=D.y,m+=D.y);u<0&&g<0?(d=H,m-=g=-g,p-=u=-u):u<0?(d=E,p-=u=-u):g<0&&(d=N,m-=g=-g);break;case N:if(l){if(D.x<=0&&(p<=w||x<=v)){M=!1;break}e(k),u-=D.x,p+=D.x,g=u/l}else e(O),e(k),!(D.x<=0)||w<p?(u-=D.x,p+=D.x):0<=D.y&&x<=v&&(M=!1),(!(0<=D.y)||v<x)&&(g+=D.y);u<0&&g<0?(d=E,m-=g=-g,p-=u=-u):u<0?(d=H,p-=u=-u):g<0&&(d=W,m-=g=-g);break;case H:if(l){if(0<=D.x&&(y<=f||x<=v)){M=!1;break}e(B),g=(u+=D.x)/l}else e(O),e(B),!(0<=D.x)||f<y?u+=D.x:0<=D.y&&x<=v&&(M=!1),(!(0<=D.y)||v<x)&&(g+=D.y);u<0&&g<0?(d=W,m-=g=-g,p-=u=-u):u<0?(d=N,p-=u=-u):g<0&&(d=E,m-=g=-g);break;case q:this.move(D.x,D.y),M=!1;break;case $:this.zoom((a=S({},i=c),o=0,z(i,function(n,t){delete a[t],z(a,function(t){var e=Math.abs(n.startX-t.startX),i=Math.abs(n.startY-t.startY),a=Math.abs(n.endX-t.endX),t=Math.abs(n.endY-t.endY),e=Math.sqrt(e*e+i*i),i=(Math.sqrt(a*a+t*t)-e)/e;Math.abs(i)>Math.abs(o)&&(o=i)})}),o),t),M=!1;break;case U:D.x&&D.y?(i=Wt(this.cropper),p=C.startX-i.left,m=C.startY-i.top,u=s.minWidth,g=s.minHeight,0<D.x?d=0<D.y?H:E:D.x<0&&(p-=u,d=0<D.y?N:W),D.y<0&&(m-=g),this.cropped||(X(this.cropBox,L),this.cropped=!0,this.limited&&this.limitCropBox(!0,!0))):M=!1}M&&(s.width=u,s.height=g,s.left=p,s.top=m,this.action=d,this.renderCropBox()),z(c,function(t){t.startX=t.endX,t.startY=t.endY})}},At={crop:function(){return!this.ready||this.cropped||this.disabled||(this.cropped=!0,this.limitCropBox(!0,!0),this.options.modal&&v(this.dragBox,n),X(this.cropBox,L),this.setCropBoxData(this.initialCropBoxData)),this},reset:function(){return this.ready&&!this.disabled&&(this.imageData=g({},this.initialImageData),this.canvasData=g({},this.initialCanvasData),this.cropBoxData=g({},this.initialCropBoxData),this.renderCanvas(),this.cropped)&&this.renderCropBox(),this},clear:function(){return this.cropped&&!this.disabled&&(g(this.cropBoxData,{left:0,top:0,width:0,height:0}),this.cropped=!1,this.renderCropBox(),this.limitCanvas(!0,!0),this.renderCanvas(),X(this.dragBox,n),v(this.cropBox,L)),this},replace:function(e){var t=1<arguments.length&&void 0!==arguments[1]&&arguments[1];return!this.disabled&&e&&(this.isImg&&(this.element.src=e),t?(this.url=e,this.image.src=e,this.ready&&(this.viewBoxImage.src=e,z(this.previews,function(t){t.getElementsByTagName("img")[0].src=e}))):(this.isImg&&(this.replaced=!0),this.options.data=null,this.uncreate(),this.load(e))),this},enable:function(){return this.ready&&this.disabled&&(this.disabled=!1,X(this.cropper,K)),this},disable:function(){return this.ready&&!this.disabled&&(this.disabled=!0,v(this.cropper,K)),this},destroy:function(){var t=this.element;return t[c]&&(t[c]=void 0,this.isImg&&this.replaced&&(t.src=this.originalUrl),this.uncreate()),this},move:function(t){var e=1<arguments.length&&void 0!==arguments[1]?arguments[1]:t,i=this.canvasData,a=i.left,i=i.top;return this.moveTo(vt(t)?t:a+Number(t),vt(e)?e:i+Number(e))},moveTo:function(t){var e=1<arguments.length&&void 0!==arguments[1]?arguments[1]:t,i=this.canvasData,a=!1;return t=Number(t),e=Number(e),this.ready&&!this.disabled&&this.options.movable&&(p(t)&&(i.left=t,a=!0),p(e)&&(i.top=e,a=!0),a)&&this.renderCanvas(!0),this},zoom:function(t,e){var i=this.canvasData;return t=Number(t),this.zoomTo(i.width*(t=t<0?1/(1-t):1+t)/i.naturalWidth,null,e)},zoomTo:function(t,e,i){var a,n,o,h=this.options,r=this.canvasData,s=r.width,c=r.height,d=r.naturalWidth,l=r.naturalHeight;if(0<=(t=Number(t))&&this.ready&&!this.disabled&&h.zoomable){h=d*t,l=l*t;if(!1===y(this.element,st,{ratio:t,oldRatio:s/d,originalEvent:i}))return this;i?(t=this.pointers,d=Wt(this.cropper),t=t&&Object.keys(t).length?(o=n=a=0,z(t,function(t){var e=t.startX,t=t.startY;a+=e,n+=t,o+=1}),{pageX:a/=o,pageY:n/=o}):{pageX:i.pageX,pageY:i.pageY},r.left-=(h-s)*((t.pageX-d.left-r.left)/s),r.top-=(l-c)*((t.pageY-d.top-r.top)/c)):u(e)&&p(e.x)&&p(e.y)?(r.left-=(h-s)*((e.x-r.left)/s),r.top-=(l-c)*((e.y-r.top)/c)):(r.left-=(h-s)/2,r.top-=(l-c)/2),r.width=h,r.height=l,this.renderCanvas(!0)}return this},rotate:function(t){return this.rotateTo((this.imageData.rotate||0)+Number(t))},rotateTo:function(t){return p(t=Number(t))&&this.ready&&!this.disabled&&this.options.rotatable&&(this.imageData.rotate=t%360,this.renderCanvas(!0,!0)),this},scaleX:function(t){var e=this.imageData.scaleY;return this.scale(t,p(e)?e:1)},scaleY:function(t){var e=this.imageData.scaleX;return this.scale(p(e)?e:1,t)},scale:function(t){var e=1<arguments.length&&void 0!==arguments[1]?arguments[1]:t,i=this.imageData,a=!1;return t=Number(t),e=Number(e),this.ready&&!this.disabled&&this.options.scalable&&(p(t)&&(i.scaleX=t,a=!0),p(e)&&(i.scaleY=e,a=!0),a)&&this.renderCanvas(!0,!0),this},getData:function(){var i,a,t=0<arguments.length&&void 0!==arguments[0]&&arguments[0],e=this.options,n=this.imageData,o=this.canvasData,h=this.cropBoxData;return this.ready&&this.cropped?(i={x:h.left-o.left,y:h.top-o.top,width:h.width,height:h.height},a=n.width/n.naturalWidth,z(i,function(t,e){i[e]=t/a}),t&&(o=Math.round(i.y+i.height),h=Math.round(i.x+i.width),i.x=Math.round(i.x),i.y=Math.round(i.y),i.width=h-i.x,i.height=o-i.y)):i={x:0,y:0,width:0,height:0},e.rotatable&&(i.rotate=n.rotate||0),e.scalable&&(i.scaleX=n.scaleX||1,i.scaleY=n.scaleY||1),i},setData:function(t){var e,i=this.options,a=this.imageData,n=this.canvasData,o={};return this.ready&&!this.disabled&&u(t)&&(e=!1,i.rotatable&&p(t.rotate)&&t.rotate!==a.rotate&&(a.rotate=t.rotate,e=!0),i.scalable&&(p(t.scaleX)&&t.scaleX!==a.scaleX&&(a.scaleX=t.scaleX,e=!0),p(t.scaleY))&&t.scaleY!==a.scaleY&&(a.scaleY=t.scaleY,e=!0),e&&this.renderCanvas(!0,!0),i=a.width/a.naturalWidth,p(t.x)&&(o.left=t.x*i+n.left),p(t.y)&&(o.top=t.y*i+n.top),p(t.width)&&(o.width=t.width*i),p(t.height)&&(o.height=t.height*i),this.setCropBoxData(o)),this},getContainerData:function(){return this.ready?g({},this.containerData):{}},getImageData:function(){return this.sized?g({},this.imageData):{}},getCanvasData:function(){var e=this.canvasData,i={};return this.ready&&z(["left","top","width","height","naturalWidth","naturalHeight"],function(t){i[t]=e[t]}),i},setCanvasData:function(t){var e=this.canvasData,i=e.aspectRatio;return this.ready&&!this.disabled&&u(t)&&(p(t.left)&&(e.left=t.left),p(t.top)&&(e.top=t.top),p(t.width)?(e.width=t.width,e.height=t.width/i):p(t.height)&&(e.height=t.height,e.width=t.height*i),this.renderCanvas(!0)),this},getCropBoxData:function(){var t,e=this.cropBoxData;return(t=this.ready&&this.cropped?{left:e.left,top:e.top,width:e.width,height:e.height}:t)||{}},setCropBoxData:function(t){var e,i,a=this.cropBoxData,n=this.options.aspectRatio;return this.ready&&this.cropped&&!this.disabled&&u(t)&&(p(t.left)&&(a.left=t.left),p(t.top)&&(a.top=t.top),p(t.width)&&t.width!==a.width&&(e=!0,a.width=t.width),p(t.height)&&t.height!==a.height&&(i=!0,a.height=t.height),n&&(e?a.height=a.width/n:i&&(a.width=a.height*n)),this.renderCropBox()),this},getCroppedCanvas:function(){var t,e,i,a,n,o,h,r,s,c,d,l,p,m,u,g,f,v,w,b,y,x,M,C,D,B,k,O=0<arguments.length&&void 0!==arguments[0]?arguments[0]:{};return this.ready&&window.HTMLCanvasElement?(B=this.canvasData,u=this.image,l=this.imageData,a=B,v=O,g=l.aspectRatio,e=l.naturalWidth,n=l.naturalHeight,c=void 0===(c=l.rotate)?0:c,d=void 0===(d=l.scaleX)?1:d,l=void 0===(l=l.scaleY)?1:l,i=a.aspectRatio,r=a.naturalWidth,a=a.naturalHeight,h=void 0===(h=v.fillColor)?"transparent":h,p=void 0===(p=v.imageSmoothingEnabled)||p,m=void 0===(m=v.imageSmoothingQuality)?"low":m,o=void 0===(o=v.maxWidth)?1/0:o,k=void 0===(k=v.maxHeight)?1/0:k,t=void 0===(t=v.minWidth)?0:t,v=void 0===(v=v.minHeight)?0:v,w=document.createElement("canvas"),f=w.getContext("2d"),s=R({aspectRatio:i,width:o,height:k}),i=R({aspectRatio:i,width:t,height:v},"cover"),r=Math.min(s.width,Math.max(i.width,r)),s=Math.min(s.height,Math.max(i.height,a)),i=R({aspectRatio:g,width:o,height:k}),a=R({aspectRatio:g,width:t,height:v},"cover"),o=Math.min(i.width,Math.max(a.width,e)),k=Math.min(i.height,Math.max(a.height,n)),g=[-o/2,-k/2,o,k],w.width=Y(r),w.height=Y(s),f.fillStyle=h,f.fillRect(0,0,r,s),f.save(),f.translate(r/2,s/2),f.rotate(c*Math.PI/180),f.scale(d,l),f.imageSmoothingEnabled=p,f.imageSmoothingQuality=m,f.drawImage.apply(f,[u].concat(P(g.map(function(t){return Math.floor(Y(t))})))),f.restore(),t=w,this.cropped?(e=(v=this.getData(O.rounded)).x,i=v.y,a=v.width,n=v.height,1!=(o=t.width/Math.floor(B.naturalWidth))&&(e*=o,i*=o,a*=o,n*=o),h=R({aspectRatio:k=a/n,width:O.maxWidth||1/0,height:O.maxHeight||1/0}),r=R({aspectRatio:k,width:O.minWidth||0,height:O.minHeight||0},"cover"),c=(s=R({aspectRatio:k,width:O.width||(1!=o?t.width:a),height:O.height||(1!=o?t.height:n)})).width,d=s.height,c=Math.min(h.width,Math.max(r.width,c)),d=Math.min(h.height,Math.max(r.height,d)),p=(l=document.createElement("canvas")).getContext("2d"),l.width=Y(c),l.height=Y(d),p.fillStyle=O.fillColor||"transparent",p.fillRect(0,0,c,d),m=O.imageSmoothingEnabled,u=O.imageSmoothingQuality,p.imageSmoothingEnabled=void 0===m||m,u&&(p.imageSmoothingQuality=u),g=t.width,f=t.height,w=i,(v=e)<=-a||g<v?C=x=b=v=0:v<=0?(x=-v,v=0,C=b=Math.min(g,a+v)):v<=g&&(x=0,C=b=Math.min(a,g-v)),b<=0||w<=-n||f<w?D=M=y=w=0:w<=0?(M=-w,w=0,D=y=Math.min(f,n+w)):w<=f&&(M=0,D=y=Math.min(n,f-w)),B=[v,w,b,y],0<C&&0<D&&B.push(x*(k=c/a),M*k,C*k,D*k),p.drawImage.apply(p,[t].concat(P(B.map(function(t){return Math.floor(Y(t))})))),l):t):null},setAspectRatio:function(t){var e=this.options;return this.disabled||vt(t)||(e.aspectRatio=Math.max(0,t)||NaN,this.ready&&(this.initCropBox(),this.cropped)&&this.renderCropBox()),this},setDragMode:function(t){var e,i,a=this.options,n=this.dragBox,o=this.face;return this.ready&&!this.disabled&&(i=a.movable&&t===J,a.dragMode=t=(e=t===F)||i?t:_,w(n,d,t),r(n,Q,e),r(n,V,i),a.cropBoxMovable||(w(o,d,t),r(o,Q,e),r(o,V,i))),this}},Pt=h.Cropper,It=function(){function n(t){var e=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{},i=this,a=n;if(!(i instanceof a))throw new TypeError("Cannot call a class as a function");if(!t||!mt.test(t.tagName))throw new Error("The first argument is required and must be an <img> or <canvas> element.");this.element=t,this.options=g({},ut,u(e)&&e),this.cropped=!1,this.disabled=!1,this.pointers={},this.ready=!1,this.reloading=!1,this.replaced=!1,this.sized=!1,this.sizing=!1,this.init()}return t=n,i=[{key:"noConflict",value:function(){return window.Cropper=Pt,n}},{key:"setDefaults",value:function(t){g(ut,u(t)&&t)}}],(e=[{key:"init",value:function(){var t,e=this.element,i=e.tagName.toLowerCase();if(!e[c]){if(e[c]=this,"img"===i){if(this.isImg=!0,t=e.getAttribute("src")||"",!(this.originalUrl=t))return;t=e.src}else"canvas"===i&&window.HTMLCanvasElement&&(t=e.toDataURL());this.load(t)}}},{key:"load",value:function(t){var e,i,a,n,o,h,r=this;t&&(this.url=t,this.imageData={},e=this.element,(i=this.options).rotatable||i.scalable||(i.checkOrientation=!1),i.checkOrientation&&window.ArrayBuffer?lt.test(t)?pt.test(t)?this.read((h=(h=t).replace(Xt,""),a=atob(h),h=new ArrayBuffer(a.length),z(n=new Uint8Array(h),function(t,e){n[e]=a.charCodeAt(e)}),h)):this.clone():(o=new XMLHttpRequest,h=this.clone.bind(this),this.reloading=!0,(this.xhr=o).onabort=h,o.onerror=h,o.ontimeout=h,o.onprogress=function(){o.getResponseHeader("content-type")!==ct&&o.abort()},o.onload=function(){r.read(o.response)},o.onloadend=function(){r.reloading=!1,r.xhr=null},i.checkCrossOrigin&&Lt(t)&&e.crossOrigin&&(t=zt(t)),o.open("GET",t,!0),o.responseType="arraybuffer",o.withCredentials="use-credentials"===e.crossOrigin,o.send()):this.clone())}},{key:"read",value:function(t){var e=this.options,i=this.imageData,a=Rt(t),n=0,o=1,h=1;1<a&&(this.url=function(t,e){for(var i=[],a=new Uint8Array(t);0<a.length;)i.push(Yt.apply(null,yt(a.subarray(0,8192)))),a=a.subarray(8192);return"data:".concat(e,";base64,").concat(btoa(i.join("")))}(t,ct),n=(t=function(t){var e=0,i=1,a=1;switch(t){case 2:i=-1;break;case 3:e=-180;break;case 4:a=-1;break;case 5:e=90,a=-1;break;case 6:e=90;break;case 7:e=90,i=-1;break;case 8:e=-90}return{rotate:e,scaleX:i,scaleY:a}}(a)).rotate,o=t.scaleX,h=t.scaleY),e.rotatable&&(i.rotate=n),e.scalable&&(i.scaleX=o,i.scaleY=h),this.clone()}},{key:"clone",value:function(){var t=this.element,e=this.url,i=t.crossOrigin,a=e,n=(this.options.checkCrossOrigin&&Lt(e)&&(i=i||"anonymous",a=zt(e)),this.crossOrigin=i,this.crossOriginUrl=a,document.createElement("img"));i&&(n.crossOrigin=i),n.src=a||e,n.alt=t.alt||"The image to crop",(this.image=n).onload=this.start.bind(this),n.onerror=this.stop.bind(this),v(n,Z),t.parentNode.insertBefore(n,t.nextSibling)}},{key:"start",value:function(){function t(t,e){g(a.imageData,{naturalWidth:t,naturalHeight:e,aspectRatio:t/e}),a.initialImageData=g({},a.imageData),a.sizing=!1,a.sized=!0,a.build()}var e,i,a=this,n=this.image,o=(n.onload=null,n.onerror=null,this.sizing=!0,h.navigator&&/(?:iPad|iPhone|iPod).*?AppleWebKit/i.test(h.navigator.userAgent));n.naturalWidth&&!o?t(n.naturalWidth,n.naturalHeight):(e=document.createElement("img"),i=document.body||document.documentElement,(this.sizingImage=e).onload=function(){t(e.width,e.height),o||i.removeChild(e)},e.src=n.src,o||(e.style.cssText="left:0;max-height:none!important;max-width:none!important;min-height:0!important;min-width:0!important;opacity:0;position:absolute;top:0;z-index:-1;",i.appendChild(e)))}},{key:"stop",value:function(){var t=this.image;t.onload=null,t.onerror=null,t.parentNode.removeChild(t),this.image=null}},{key:"build",value:function(){var t,e,i,a,n,o,h,r,s;this.sized&&!this.ready&&(t=this.element,e=this.options,i=this.image,a=t.parentNode,(n=document.createElement("div")).innerHTML='<div class="cropper-container" touch-action="none"><div class="cropper-wrap-box"><div class="cropper-canvas"></div></div><div class="cropper-drag-box"></div><div class="cropper-crop-box"><span class="cropper-view-box"></span><span class="cropper-dashed dashed-h"></span><span class="cropper-dashed dashed-v"></span><span class="cropper-center"></span><span class="cropper-face"></span><span class="cropper-line line-e" data-cropper-action="e"></span><span class="cropper-line line-n" data-cropper-action="n"></span><span class="cropper-line line-w" data-cropper-action="w"></span><span class="cropper-line line-s" data-cropper-action="s"></span><span class="cropper-point point-e" data-cropper-action="e"></span><span class="cropper-point point-n" data-cropper-action="n"></span><span class="cropper-point point-w" data-cropper-action="w"></span><span class="cropper-point point-s" data-cropper-action="s"></span><span class="cropper-point point-ne" data-cropper-action="ne"></span><span class="cropper-point point-nw" data-cropper-action="nw"></span><span class="cropper-point point-sw" data-cropper-action="sw"></span><span class="cropper-point point-se" data-cropper-action="se"></span></div></div>',o=(n=n.querySelector(".".concat(c,"-container"))).querySelector(".".concat(c,"-canvas")),h=n.querySelector(".".concat(c,"-drag-box")),s=(r=n.querySelector(".".concat(c,"-crop-box"))).querySelector(".".concat(c,"-face")),this.container=a,this.cropper=n,this.canvas=o,this.dragBox=h,this.cropBox=r,this.viewBox=n.querySelector(".".concat(c,"-view-box")),this.face=s,o.appendChild(i),v(t,L),a.insertBefore(n,t.nextSibling),X(i,Z),this.initPreview(),this.bind(),e.initialAspectRatio=Math.max(0,e.initialAspectRatio)||NaN,e.aspectRatio=Math.max(0,e.aspectRatio)||NaN,e.viewMode=Math.max(0,Math.min(3,Math.round(e.viewMode)))||0,v(r,L),e.guides||v(r.getElementsByClassName("".concat(c,"-dashed")),L),e.center||v(r.getElementsByClassName("".concat(c,"-center")),L),e.background&&v(n,"".concat(c,"-bg")),e.highlight||v(s,G),e.cropBoxMovable&&(v(s,V),w(s,d,I)),e.cropBoxResizable||(v(r.getElementsByClassName("".concat(c,"-line")),L),v(r.getElementsByClassName("".concat(c,"-point")),L)),this.render(),this.ready=!0,this.setDragMode(e.dragMode),e.autoCrop&&this.crop(),this.setData(e.data),l(e.ready)&&b(t,"ready",e.ready,{once:!0}),y(t,"ready"))}},{key:"unbuild",value:function(){var t;this.ready&&(this.ready=!1,this.unbind(),this.resetPreview(),(t=this.cropper.parentNode)&&t.removeChild(this.cropper),X(this.element,L))}},{key:"uncreate",value:function(){this.ready?(this.unbuild(),this.ready=!1,this.cropped=!1):this.sizing?(this.sizingImage.onload=null,this.sizing=!1,this.sized=!1):this.reloading?(this.xhr.onabort=null,this.xhr.abort()):this.image&&this.stop()}}])&&A(t.prototype,e),i&&A(t,i),Object.defineProperty(t,"prototype",{writable:!1}),t;var t,e,i}();return g(It.prototype,t,i,e,St,jt,At),It});
\ No newline at end of file
diff --git a/image_cropping/static/image_cropping/ml_cropper.css b/image_cropping/static/image_cropping/ml_cropper.css
new file mode 100644
index 00000000..21f16423
--- /dev/null
+++ b/image_cropping/static/image_cropping/ml_cropper.css
@@ -0,0 +1,117 @@
+/*
+ * ml_cropper.css — styling for the admin Cropper.js widget (#1299).
+ * Cropper.js needs its target <img> to be block-level inside a sized box.
+ */
+
+.ml-cropper {
+  margin: 8px 0 16px 0;
+  max-width: 640px;
+}
+
+/* The raw "x1,y1,x2,y2" text field is kept in the DOM as the value holder but
+   hidden from view; the cropper UI replaces it. */
+.ml-cropper__hidden-row {
+  display: none !important;
+}
+
+.ml-cropper__stage {
+  max-width: 100%;
+  max-height: 420px;
+  background: #f3f3f3;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.ml-cropper__stage:not(.ml-cropper__stage--active) {
+  display: none;
+}
+
+/* Cropper.js resizes/wraps this image; constrain it so a tall original does
+   not blow out the admin layout. */
+.ml-cropper__image {
+  display: block;
+  max-width: 100%;
+  max-height: 420px;
+}
+
+.ml-cropper__warning {
+  margin: 6px 0 0 0;
+  color: #8a6d3b;
+  font-size: 0.85em;
+}
+
+/* Live result preview. Cropper.js injects an <img> and fills this box's width
+   with the current crop, so overflow must be hidden. */
+.ml-cropper__preview-wrap {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-top: 10px;
+}
+
+.ml-cropper__preview-label {
+  font-size: 0.85em;
+  font-weight: 600;
+  color: #555;
+}
+
+.ml-cropper__preview {
+  overflow: hidden; /* required by Cropper.js preview */
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  background: #f3f3f3;
+  flex: none;
+}
+
+/* Collapsed "adjust precisely" disclosure wrapping the numeric controls. */
+.ml-cropper__advanced {
+  margin-top: 10px;
+}
+
+.ml-cropper__summary {
+  cursor: pointer;
+  font-size: 0.85em;
+  color: #417690; /* Django admin link blue */
+  user-select: none;
+  width: max-content;
+}
+
+.ml-cropper__summary:hover {
+  color: #205067;
+}
+
+.ml-cropper__controls {
+  margin-top: 8px;
+  padding: 8px 10px;
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+  display: flex;
+  flex-wrap: nowrap; /* keep X / Y / Width / Height on a single row */
+  gap: 8px 14px;
+  align-items: center;
+}
+
+.ml-cropper__num {
+  font-size: 0.85em;
+  /* These are <label>s; override Django admin's aligned-form label column
+     styling (width:160px, min-width:160px, float:left, padding) so they size to
+     content. min-width:0 is the key — min-width floors width, so without it the
+     label can't shrink below 160px and Height wraps to a second row. */
+  display: flex !important;
+  width: auto !important;
+  min-width: 0 !important;
+  float: none !important;
+  padding: 0 !important;
+  margin: 0;
+  align-items: center;
+  gap: 4px;
+  white-space: nowrap;
+}
+
+.ml-cropper__num-input {
+  /* !important overrides Django admin's default input width (~170px), which
+     otherwise wins on specificity and pushes Height onto a second row. */
+  width: 4em !important;
+  min-width: 0;
+}
diff --git a/image_cropping/static/image_cropping/ml_cropper.js b/image_cropping/static/image_cropping/ml_cropper.js
new file mode 100644
index 00000000..9e9d8da3
--- /dev/null
+++ b/image_cropping/static/image_cropping/ml_cropper.js
@@ -0,0 +1,278 @@
+/**
+ * ml_cropper.js — client-side image cropping for the Django admin (#1299).
+ *
+ * Replaces the old Jcrop/jQuery widget from django-image-cropping. For each
+ * crop field it:
+ *   1. finds the sibling <input type="file"> for the image being cropped;
+ *   2. shows an INSTANT preview the moment a file is selected (via
+ *      URL.createObjectURL) — no "Save and continue editing" round-trip;
+ *   3. runs Cropper.js locked to the field's aspect ratio;
+ *   4. writes the selection back as an "x1,y1,x2,y2" box (original-image
+ *      pixels) into the ratio field that the server persists.
+ *
+ * Coordinates are read from Cropper's getData(), which is already in natural
+ * image pixels, so they map directly onto the stored original and onto the
+ * easy_thumbnails `crop_corners` processor — no scaling math, no baked file.
+ *
+ * Accessibility: alongside the drag UI, each cropper exposes labeled numeric
+ * X / Y / Width / Height inputs that are fully keyboard-operable and kept in
+ * sync with the visual crop box. With JS off, the raw ratio field still
+ * submits and the server seeds a sensible centered crop.
+ *
+ * Vanilla JS only (no jQuery/build step), per project conventions.
+ */
+(function () {
+  "use strict";
+
+  if (typeof window.Cropper === "undefined") {
+    // Cropper.js failed to load; leave the raw ratio field in place so the
+    // form still works (server seeds a default crop on save).
+    return;
+  }
+
+  /** Parse "x1,y1,x2,y2" -> {x, y, width, height} or null. */
+  function parseBox(value) {
+    if (!value) return null;
+    var p = value.split(",").map(function (n) { return parseInt(n, 10); });
+    if (p.length !== 4 || p.some(isNaN)) return null;
+    return { x: p[0], y: p[1], width: p[2] - p[0], height: p[3] - p[1] };
+  }
+
+  /** Format Cropper getData() -> "x1,y1,x2,y2" with clamped integers. */
+  function formatBox(data, naturalWidth, naturalHeight) {
+    var x1 = Math.max(0, Math.round(data.x));
+    var y1 = Math.max(0, Math.round(data.y));
+    var x2 = Math.min(naturalWidth, Math.round(data.x + data.width));
+    var y2 = Math.min(naturalHeight, Math.round(data.y + data.height));
+    return [x1, y1, x2, y2].join(",");
+  }
+
+  /**
+   * Locate the file input paired with a ratio field. Both share the form
+   * prefix (e.g. inline "banner_set-0-"), differing only in the trailing
+   * field name: "...-cropping" -> "...-image".
+   */
+  function findImageInput(ratioInput, myName, imageFieldName) {
+    var name = ratioInput.getAttribute("name") || "";
+    if (name.slice(-myName.length) !== myName) return null;
+    var imageName = name.slice(0, name.length - myName.length) + imageFieldName;
+    var form = ratioInput.closest("form") || document;
+    return form.querySelector('[name="' + imageName + '"]');
+  }
+
+  function makeNumberInput(label, idBase, key) {
+    var wrap = document.createElement("label");
+    wrap.className = "ml-cropper__num";
+    wrap.textContent = label + " ";
+    var input = document.createElement("input");
+    input.type = "number";
+    input.min = "0";
+    input.step = "1";
+    input.id = idBase + "_" + key;
+    input.className = "ml-cropper__num-input";
+    input.setAttribute("data-key", key);
+    wrap.appendChild(input);
+    return { wrap: wrap, input: input };
+  }
+
+  function setupField(ratioInput) {
+    if (ratioInput.dataset.mlCropperReady === "1") return;
+    ratioInput.dataset.mlCropperReady = "1";
+
+    var imageFieldName = ratioInput.getAttribute("data-image-field");
+    var myName = ratioInput.getAttribute("data-my-name") || "";
+    var ratioAttr = parseFloat(ratioInput.getAttribute("data-ratio"));
+    var aspectRatio = ratioAttr > 0 ? ratioAttr : NaN; // NaN => free crop
+    var minWidth = parseInt(ratioInput.getAttribute("data-min-width"), 10) || 0;
+    var minHeight = parseInt(ratioInput.getAttribute("data-min-height"), 10) || 0;
+    var sizeWarning = ratioInput.getAttribute("data-size-warning") === "true";
+
+    var fileInput = findImageInput(ratioInput, myName, imageFieldName);
+    if (!fileInput) return;
+
+    // Hide the raw "x1,y1,x2,y2" text box (kept in the DOM as the value holder)
+    // and its label row; the cropper UI replaces it visually.
+    var ratioRow = ratioInput.closest(".form-row, .field-" + myName) || ratioInput.parentNode;
+    if (ratioRow) ratioRow.classList.add("ml-cropper__hidden-row");
+
+    // Build the cropper UI under the file input's row.
+    var idBase = "ml_cropper_" + (ratioInput.id || myName);
+    var container = document.createElement("div");
+    container.className = "ml-cropper";
+
+    var stage = document.createElement("div");
+    stage.className = "ml-cropper__stage";
+    var img = document.createElement("img");
+    img.className = "ml-cropper__image";
+    img.alt = "Crop preview";
+    stage.appendChild(img);
+    container.appendChild(stage);
+
+    // Live WYSIWYG preview: shows exactly what the cropped thumbnail will look
+    // like. Cropper.js fills the preview box's width with the selected crop, so
+    // we size the box to the field's aspect ratio for a true-to-output preview.
+    var previewWrap = document.createElement("div");
+    previewWrap.className = "ml-cropper__preview-wrap";
+    var previewLabel = document.createElement("span");
+    previewLabel.className = "ml-cropper__preview-label";
+    previewLabel.textContent = "Preview";
+    var preview = document.createElement("div");
+    preview.className = "ml-cropper__preview";
+    var previewW = 160;
+    preview.style.width = previewW + "px";
+    preview.style.height =
+      Math.round(previewW / (aspectRatio > 0 ? aspectRatio : 1)) + "px";
+    previewWrap.appendChild(previewLabel);
+    previewWrap.appendChild(preview);
+    container.appendChild(previewWrap);
+
+    var warning = document.createElement("p");
+    warning.className = "ml-cropper__warning";
+    warning.setAttribute("role", "alert");
+    warning.hidden = true;
+    container.appendChild(warning);
+
+    // Precise, keyboard-accessible numeric controls, tucked into a collapsed
+    // disclosure: they stay out of the way of the common drag-to-crop flow but
+    // remain reachable for keyboard / screen-reader users who need exact values.
+    var advanced = document.createElement("details");
+    advanced.className = "ml-cropper__advanced";
+    var summary = document.createElement("summary");
+    summary.className = "ml-cropper__summary";
+    summary.textContent = "Adjust crop precisely (pixels)";
+    advanced.appendChild(summary);
+    var controls = document.createElement("div");
+    controls.className = "ml-cropper__controls";
+    var nums = {
+      x: makeNumberInput("X", idBase, "x"),
+      y: makeNumberInput("Y", idBase, "y"),
+      width: makeNumberInput("Width", idBase, "width"),
+      height: makeNumberInput("Height", idBase, "height"),
+    };
+    Object.keys(nums).forEach(function (k) { controls.appendChild(nums[k].wrap); });
+    advanced.appendChild(controls);
+    container.appendChild(advanced);
+
+    var fileRow = fileInput.closest(".form-row, .field-" + imageFieldName) || fileInput.parentNode;
+    fileRow.parentNode.insertBefore(container, fileRow.nextSibling);
+
+    var cropper = null;
+    var syncing = false; // guard against crop<->numeric feedback loops
+    var pendingBox = parseBox(ratioInput.value); // existing crop to restore
+    var currentObjectUrl = null; // blob: URL of the currently previewed file
+
+    function updateWarning(data) {
+      if (!sizeWarning) return;
+      var tooSmall = data.width < minWidth || data.height < minHeight;
+      if (tooSmall) {
+        warning.hidden = false;
+        warning.textContent =
+          "Heads up: this crop (" + Math.round(data.width) + "×" +
+          Math.round(data.height) + " px) is smaller than the recommended " +
+          minWidth + "×" + minHeight + " px and may look soft when enlarged.";
+      } else {
+        warning.hidden = true;
+      }
+    }
+
+    function onCrop() {
+      if (!cropper || syncing) return;
+      var data = cropper.getData();
+      var img2 = cropper.getImageData();
+      ratioInput.value = formatBox(data, img2.naturalWidth, img2.naturalHeight);
+      syncing = true;
+      nums.x.input.value = Math.round(data.x);
+      nums.y.input.value = Math.round(data.y);
+      nums.width.input.value = Math.round(data.width);
+      nums.height.input.value = Math.round(data.height);
+      syncing = false;
+      updateWarning(data);
+    }
+
+    function applyNumbers() {
+      if (!cropper || syncing) return;
+      syncing = true;
+      cropper.setData({
+        x: parseFloat(nums.x.input.value) || 0,
+        y: parseFloat(nums.y.input.value) || 0,
+        width: parseFloat(nums.width.input.value) || minWidth,
+        height: parseFloat(nums.height.input.value) || minHeight,
+      });
+      syncing = false;
+      onCrop();
+    }
+    Object.keys(nums).forEach(function (k) {
+      nums[k].input.addEventListener("change", applyNumbers);
+    });
+
+    function initCropper(src, restoreBox) {
+      if (cropper) { cropper.destroy(); cropper = null; }
+      pendingBox = restoreBox || null;
+      img.src = src;
+      stage.classList.add("ml-cropper__stage--active");
+    }
+
+    img.addEventListener("load", function () {
+      if (cropper) { cropper.destroy(); cropper = null; }
+      cropper = new window.Cropper(img, {
+        aspectRatio: aspectRatio,
+        viewMode: 1,
+        autoCropArea: 1,
+        responsive: true,
+        preview: preview, // live thumbnail of the cropped result
+        // Keep the on-screen pixels identical to what the server crops:
+        // easy_thumbnails / Pillow crop_corners operates on the raw stored
+        // image without applying EXIF orientation, so the cropper must show
+        // the same un-rotated pixels. (checkOrientation:true also stalls on
+        // blob: object URLs from a just-picked file, which is the instant
+        // preview path.)
+        checkOrientation: false,
+        background: true,
+        ready: function () {
+          if (pendingBox) {
+            syncing = true;
+            cropper.setData(pendingBox);
+            syncing = false;
+            pendingBox = null;
+          }
+          onCrop();
+        },
+        crop: onCrop,
+      });
+    });
+
+    // INSTANT preview: crop straight from the just-picked file, pre-upload.
+    // Keep the object URL alive for the whole crop session — Cropper.js builds
+    // its live preview clone from this same URL *after* the main image loads,
+    // so revoking on load would leave the preview blank. Revoke the previous
+    // URL only when a new file replaces it (the last one is freed on unload).
+    fileInput.addEventListener("change", function () {
+      var file = fileInput.files && fileInput.files[0];
+      if (!file) return;
+      if (currentObjectUrl) URL.revokeObjectURL(currentObjectUrl);
+      currentObjectUrl = URL.createObjectURL(file);
+      initCropper(currentObjectUrl, null);
+    });
+
+    // Existing image (edit page): load the full-res original for re-cropping.
+    var originalUrl = fileInput.getAttribute("data-original-url");
+    if (originalUrl) {
+      initCropper(originalUrl, parseBox(ratioInput.value));
+    }
+  }
+
+  function scan(root) {
+    (root || document).querySelectorAll("input.image-ratio").forEach(setupField);
+  }
+
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", function () { scan(document); });
+  } else {
+    scan(document);
+  }
+
+  // Newly added inline rows (Django dispatches a native formset:added event).
+  document.addEventListener("formset:added", function (event) {
+    scan(event.target || document);
+  });
+})();
diff --git a/image_cropping/thumbnail_processors.py b/image_cropping/thumbnail_processors.py
new file mode 100644
index 00000000..fad26f0c
--- /dev/null
+++ b/image_cropping/thumbnail_processors.py
@@ -0,0 +1,50 @@
+"""
+easy_thumbnails processor that applies a stored crop box.
+
+Registered ahead of the default easy_thumbnails processors in
+``settings.THUMBNAIL_PROCESSORS`` so that any thumbnail rendered with
+``box=obj.cropping`` is first cropped to the editor-chosen rectangle and then
+resized. Ported verbatim from upstream django-image-cropping -- it is pure
+Pillow and has no dependency on the (removed) backend/config layer.
+"""
+
+import logging
+
+logger = logging.getLogger(__name__)
+
+
+def crop_corners(image, box=None, **kwargs):
+    """
+    Crop ``image`` to the selection stored by an :class:`ImageRatioField`.
+
+    ``box`` is either a string ``"x1,y1,x2,y2"`` or a four-item list/tuple of
+    integers, in original-image pixel coordinates. Anything unparseable (or a
+    negative first value, which signals "cropping disabled") leaves the image
+    untouched.
+
+    Example:
+        >>> crop_corners(pil_image, box="10,10,210,210")  # 200x200 crop
+    """
+    if not box:
+        return image
+
+    if not isinstance(box, (list, tuple)):
+        # convert cropping string to a list of integers if necessary
+        try:
+            box = list(map(int, box.split(",")))
+        except (ValueError, AttributeError):
+            # there's garbage in the cropping field, ignore
+            logger.warning('Unable to parse "box" parameter "%s". Ignoring.', box)
+            box = []
+
+    if len(box) == 4:
+        if box[0] < 0:
+            # a negative first box value indicates that cropping is disabled
+            return image
+        width = abs(box[2] - box[0])
+        height = abs(box[3] - box[1])
+        if width and height and (width, height) != image.size:
+            image = image.crop(box)
+    else:
+        logger.warning('"box" parameter requires four values. Ignoring "%r".', box)
+    return image
diff --git a/image_cropping/widgets.py b/image_cropping/widgets.py
new file mode 100644
index 00000000..b6947537
--- /dev/null
+++ b/image_cropping/widgets.py
@@ -0,0 +1,39 @@
+"""
+CropImageWidget - admin file input wired for client-side cropping.
+
+Renders Django's standard admin file widget, but (a) advertises the current
+image's URL via ``data-original-url`` so the JS can load it for re-cropping, and
+(b) pulls in Cropper.js plus our glue code (``ml_cropper.js``) instead of the
+retired Jcrop/jQuery bundle. All cropping happens in the browser; on submit
+only the ``"x1,y1,x2,y2"`` box (in the sibling ratio field) is saved.
+"""
+
+from django import forms
+from django.contrib.admin.widgets import AdminFileWidget
+
+
+class CropImageWidget(AdminFileWidget):
+    class Media:
+        css = {
+            "all": (
+                "image_cropping/cropper.min.css",
+                "image_cropping/ml_cropper.css",
+            )
+        }
+        js = (
+            "image_cropping/cropper.min.js",
+            "image_cropping/ml_cropper.js",
+        )
+
+    def render(self, name, value, attrs=None, renderer=None):
+        attrs = attrs or {}
+        attrs["class"] = (attrs.get("class", "") + " crop-image-field").strip()
+        # Expose the existing image so the JS can initialize Cropper against the
+        # full-resolution original (keeps crop coordinates in natural pixels).
+        if value and hasattr(value, "url"):
+            try:
+                attrs["data-original-url"] = value.url
+            except ValueError:
+                # No file associated (e.g. cleared) -> nothing to preview.
+                pass
+        return super().render(name, value, attrs, renderer)
diff --git a/makeabilitylab/settings.py b/makeabilitylab/settings.py
index 41e0c6e4..63ae95b6 100644
--- a/makeabilitylab/settings.py
+++ b/makeabilitylab/settings.py
@@ -72,8 +72,8 @@
     ALLOWED_HOSTS = ['*']
 
 # Makeability Lab Global Variables, including Makeability Lab version
-ML_WEBSITE_VERSION = "2.6.0" # Keep this updated with each release and also change the short description below
-ML_WEBSITE_VERSION_DESCRIPTION = "Projects are now private by default (#1300). A single editor-controlled Project.is_visible flag governs whether a project appears publicly (gallery, landing page, member pages, and as links from publications/talks/videos), replacing the old 'has a thumbnail AND a publication' heuristic that was duplicated across views and templates. New projects start private so the team can set them up and add people before going live; logged-in staff can preview a private project's page while the public gets a 404. A one-shot backfill_project_visibility management command preserves the visibility of existing projects on first deploy and is idempotent (it only resolves projects whose visibility was never set, so manual admin choices are never overwritten)."
+ML_WEBSITE_VERSION = "2.7.0" # Keep this updated with each release and also change the short description below
+ML_WEBSITE_VERSION_DESCRIPTION = "Modernized the admin image cropper (#1299). Replaced the end-of-life django-image-cropping (Jcrop/jQuery, Django <=4.0) with an in-repo Cropper.js widget that previews and crops images client-side, before the first save — no more 'upload, save, scroll up, then crop'. It shows a live preview of the cropped result and tucks precise pixel controls into a collapsed disclosure. The crop data layer is intentionally unchanged (ImageRatioField stores the box, easy_thumbnails renders it), so every existing crop and thumbnail renders identically and the swap is migration-neutral. Dropping this fragile, unmaintained dependency also helps unblock the future Django 6.1 LTS upgrade (#1269)."
 DATE_MAKEABILITYLAB_FORMED = datetime.date(2012, 1, 1)  # Date Makeability Lab was formed
 MAX_BANNERS = 7 # Maximum number of banners on a page
 
@@ -181,12 +181,15 @@
 
     'django.contrib.humanize', # for humanizing numbers in templates: https://docs.djangoproject.com/en/4.2/ref/contrib/humanize/
 
-    # In Django, both easy-thumbnails and django-image-cropping serve different purposes 
-    # and can be used together for different functionalities. So, while easy-thumbnails can handle 
-    # resizing and scaling of images, if you need specific cropping functionality where users can 
-    # select a part of the image to crop, you would use django-image-cropping in conjunction with 
-    # easy-thumbnails. This combination provides a more comprehensive image handling solution
-    'image_cropping', # for cropping uploaded images: https://github.com/jonasundderwolf/django-image-cropping
+    # Image handling = two cooperating pieces: easy-thumbnails resizes/scales,
+    # while image_cropping lets editors pick the crop box. easy-thumbnails then
+    # renders that box at any size on demand (see crop_corners in
+    # THUMBNAIL_PROCESSORS below).
+    # NOTE: 'image_cropping' is an IN-REPO fork (top-level image_cropping/), not
+    # the PyPI django-image-cropping package. It ships a modern Cropper.js admin
+    # widget (instant client-side preview/crop). See image_cropping/README.md
+    # and issues #1299 / #1269. Treated as project source, like sortedm2m below.
+    'image_cropping',
     'easy_thumbnails', # for dynamically creating thumbnails: https://github.com/SmileyChris/easy-thumbnails
     'sortedm2m', # Used for SortedManyToManyFields in admin interface: https://pypi.org/project/django-sortedm2m-filter-horizontal-widget/
     'ckeditor', # Used for news page editing in admin interface: https://pypi.org/project/django-ckeditor/
diff --git a/requirements.txt b/requirements.txt
index 927f65e4..25b3e67b 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -78,12 +78,14 @@ pypdf==6.13.2
 # See: https://pypi.org/project/Pillow/
 Pillow==12.2.0
 
-# Django Image Cropping - for cropping images in admin
-# Note: Last release Feb 2022, but should work with Django 5.2
-# See: https://pypi.org/project/django-image-cropping/
-django-image-cropping==1.7
+# Image cropping in the admin is provided by the in-repo `image_cropping/`
+# package (a fork of django-image-cropping), NOT a PyPI dependency. We dropped
+# django-image-cropping==1.7 (Feb 2022, EOL Jcrop+jQuery, Django <=4.0) in favor
+# of a modern Cropper.js widget that previews/crops before saving. See #1299 /
+# #1269 and image_cropping/README.md. (django-appconf was a transitive dep of
+# that package and is no longer needed.)
 
-# Easy Thumbnails - thumbnail generation, works with django-image-cropping
+# Easy Thumbnails - thumbnail generation, works with the in-repo image_cropping
 # See: https://pypi.org/project/easy-thumbnails/
 easy_thumbnails==2.10.1
 
diff --git a/website/models/banner.py b/website/models/banner.py
index d0905dc2..ccda28d1 100644
--- a/website/models/banner.py
+++ b/website/models/banner.py
@@ -19,7 +19,7 @@ class Banner(models.Model):
 
     image = models.ImageField(blank=True, upload_to=UniquePathAndRename(UPLOAD_DIR, True), max_length=255)
     cropping = ImageRatioField('image', '1600x500', free_crop=False)
-    image.help_text = 'You must select "Save and continue editing" at the bottom of the page after uploading a new image for cropping.\
+    image.help_text = 'After choosing an image, crop it right here using the cropper below — no need to save first.\
                       Please note that since we are using a responsive design with fixed height banners, your selected image may appear\
                       differently on various screens.'
     
diff --git a/website/models/news.py b/website/models/news.py
index c4e4d7f4..d4845f04 100644
--- a/website/models/news.py
+++ b/website/models/news.py
@@ -45,8 +45,7 @@ def get_thumbnail_size_as_str():
 
     # Following the scheme of above thumbnails in other models
     image = models.ImageField(blank=True, upload_to=UniquePathAndRename("news", True), max_length=255)
-    image.help_text = 'You must select "Save and continue editing" at the bottom of the page after\
-          uploading a new image for cropping. '
+    image.help_text = 'After choosing an image, crop it right here using the cropper below — no need to save first.'
 
     # We use the django-image-cropping ImageRatioField https://github.com/jonasundderwolf/django-image-cropping
     # that simply stores the boundaries of a cropped image. You must pass it the corresponding ImageField
diff --git a/website/models/person.py b/website/models/person.py
index 4663a8d9..449310f6 100644
--- a/website/models/person.py
+++ b/website/models/person.py
@@ -136,7 +136,7 @@ def get_thumbnail_size_as_str():
     # We use the get_unique_path function because otherwise if two people use the same
     # filename (something generic like picture.jpg), one will overwrite the other.
     image = models.ImageField(blank=True, upload_to=get_upload_to_for_person, max_length=255)
-    image.help_text = 'You must select "Save and continue editing" at the bottom of the page after uploading a new image for cropping.'
+    image.help_text = 'After choosing an image, crop it right here using the cropper below — no need to save first.'
 
     # We use the django-image-cropping ImageRatioField https://github.com/jonasundderwolf/django-image-cropping
     # that simply stores the boundaries of a cropped image. You must pass it the corresponding ImageField
diff --git a/website/models/photo.py b/website/models/photo.py
index ec034485..d3455033 100644
--- a/website/models/photo.py
+++ b/website/models/photo.py
@@ -28,7 +28,7 @@ def get_cropping_size_as_str():
     # Comment generated with help from chat.bing.com
     # See also: https://docs.djangoproject.com/en/4.2/ref/models/fields/#django.db.models.ForeignKey.on_delete
     project = models.ForeignKey(Project, blank=True, null=True, on_delete=models.SET_NULL)
-    picture.help_text = 'To crop this image, you must select "Save and continue editing" at the bottom of the page after uploading'
+    picture.help_text = 'After choosing an image, crop it right here using the cropper below — no need to save first.'
     
     # We use the django-image-cropping ImageRatioField https://github.com/jonasundderwolf/django-image-cropping
     # that simply stores the boundaries of a cropped image. You must pass it the corresponding ImageField
diff --git a/website/models/project.py b/website/models/project.py
index 99526e70..869bd577 100644
--- a/website/models/project.py
+++ b/website/models/project.py
@@ -84,8 +84,8 @@ def get_thumbnail_size_as_str():
     # TODO: consider switching gallery_image var name to thumbnail
     gallery_image = models.ImageField(upload_to=IMAGE_DIR, blank=True, null=True, max_length=255)
     gallery_image.help_text = "This is the image which will show up on the project gallery page.\
-                               It is not displayed anywhere else. You must select 'Save and continue editing' at the\
-                               bottom of the page after uploading a new image for cropping."
+                               It is not displayed anywhere else. After choosing an image, crop it right here\
+                               using the cropper below — no need to save first."
     thumbnail_alt_text = models.CharField(max_length=1024, blank=True, null=True)
 
     # We use the django-image-cropping ImageRatioField https://github.com/jonasundderwolf/django-image-cropping
diff --git a/website/templates/snippets/display_news_item_sidebar_snippet.html b/website/templates/snippets/display_news_item_sidebar_snippet.html
index 36cab2a7..abc20ab6 100644
--- a/website/templates/snippets/display_news_item_sidebar_snippet.html
+++ b/website/templates/snippets/display_news_item_sidebar_snippet.html
@@ -21,7 +21,6 @@
 
 {% load static %}
 {% load thumbnail %}
-{% load cropping %}
 
 <li class="news-sidebar-item">
   <a href="{% url 'website:news_item_by_slug' slug=recent_news_item.slug %}"
diff --git a/website/templates/snippets/display_people_snippet.html b/website/templates/snippets/display_people_snippet.html
index ae8f2f4a..4ff72e1e 100644
--- a/website/templates/snippets/display_people_snippet.html
+++ b/website/templates/snippets/display_people_snippet.html
@@ -3,7 +3,6 @@
 
 {% load static %}
 {% load thumbnail %}
-{% load cropping %}
 {% load ml_tags %}
 
 {# TODO: should really rename member object to being a position object, since that's what it is #}
diff --git a/website/templates/snippets/display_person_snippet.html b/website/templates/snippets/display_person_snippet.html
index f551ae9a..1c56e097 100644
--- a/website/templates/snippets/display_person_snippet.html
+++ b/website/templates/snippets/display_person_snippet.html
@@ -3,7 +3,6 @@
 
 {% load static %}
 {% load thumbnail %}
-{% load cropping %}
 {% load ml_tags %}
 
 
diff --git a/website/templates/snippets/display_project_gallery_lightbox.html b/website/templates/snippets/display_project_gallery_lightbox.html
index 35366d6c..ef551083 100644
--- a/website/templates/snippets/display_project_gallery_lightbox.html
+++ b/website/templates/snippets/display_project_gallery_lightbox.html
@@ -1,6 +1,5 @@
 {% load static %}
 {% load thumbnail %}
-{% load cropping %}
 {% load ml_tags %}
 
 
diff --git a/website/templates/snippets/display_project_lead_snippet.html b/website/templates/snippets/display_project_lead_snippet.html
index 8e4e61b0..e84743d3 100644
--- a/website/templates/snippets/display_project_lead_snippet.html
+++ b/website/templates/snippets/display_project_lead_snippet.html
@@ -39,7 +39,6 @@
 
 {% load static %}
 {% load thumbnail %}
-{% load cropping %}
 
 <ul class="project-sidebar-list">
   {% for lead in active_leads %}
diff --git a/website/templates/snippets/display_project_snippet.html b/website/templates/snippets/display_project_snippet.html
index c088eacf..e237073b 100644
--- a/website/templates/snippets/display_project_snippet.html
+++ b/website/templates/snippets/display_project_snippet.html
@@ -49,7 +49,6 @@
 
 {% load static %}
 {% load thumbnail %}
-{% load cropping %}
 {% load ml_tags %}
 
 <article class="project-card" 
diff --git a/website/templates/snippets/display_pub_snippet.html b/website/templates/snippets/display_pub_snippet.html
index f2c47382..fde553b7 100644
--- a/website/templates/snippets/display_pub_snippet.html
+++ b/website/templates/snippets/display_pub_snippet.html
@@ -28,7 +28,6 @@
 
 {% load static %}
 {% load thumbnail %}
-{% load cropping %}
 {% load ml_tags %}
 
 {% if pub and orientation == 'horizontal' %}
diff --git a/website/templates/snippets/display_short_carousel_snippet.html b/website/templates/snippets/display_short_carousel_snippet.html
index 42ebb1bf..737ac8d9 100644
--- a/website/templates/snippets/display_short_carousel_snippet.html
+++ b/website/templates/snippets/display_short_carousel_snippet.html
@@ -4,7 +4,6 @@
 
 {% load static %}
 {% load thumbnail %}
-{% load cropping %}
 {% load ml_tags %}
 
 <div id="main-carousel" class="carousel slide carousel-fade shortCarousel" data-interval="10000"
@@ -34,7 +33,7 @@
                 {% elif banner.project %}
                     <a href="{% url 'website:project' banner.project.short_name %}">
                 {% endif %}
-                <div class="fill" style="background-image:url({% cropped_thumbnail banner "cropping" scale=1.0 %})"
+                <div class="fill" style="background-image:url({% thumbnail banner.image '1600x500' box=banner.cropping crop detail %})"
                      aria-label="{% if banner.alt_text %}{{ banner.alt_text }}{% else %}{{ banner.caption }}{% endif %}"
                      title="{% if banner.alt_text %}{{ banner.alt_text }}{% else %}{{ banner.caption }}{% endif %}">
                 </div>
diff --git a/website/templates/snippets/display_talk_snippet.html b/website/templates/snippets/display_talk_snippet.html
index 0c010f4f..2b95dc17 100644
--- a/website/templates/snippets/display_talk_snippet.html
+++ b/website/templates/snippets/display_talk_snippet.html
@@ -31,7 +31,6 @@
 
 {% load static %}
 {% load thumbnail %}
-{% load cropping %}
 {% load ml_tags %}
 
 <article class="talk-card">
diff --git a/website/templates/snippets/display_video_snippet.html b/website/templates/snippets/display_video_snippet.html
index c0b76458..85236be1 100644
--- a/website/templates/snippets/display_video_snippet.html
+++ b/website/templates/snippets/display_video_snippet.html
@@ -36,7 +36,6 @@
 
 {% load static %}
 {% load thumbnail %}
-{% load cropping %}
 {% load ml_tags %}
 
 <article class="video-card">
diff --git a/website/templates/website/base.html b/website/templates/website/base.html
index 4505c086..97a51737 100644
--- a/website/templates/website/base.html
+++ b/website/templates/website/base.html
@@ -40,7 +40,7 @@
 <head>
   {% load ml_tags %}
   {% load static %}
-  {% load cropping %}
+  {% load thumbnail %}
 
   <!-- Build info (helps with debugging) -->
   <!-- Makeability Lab website version {% get_settings_value "ML_WEBSITE_VERSION" %} -->
@@ -271,7 +271,7 @@
         </video>
         {% elif banner.image %}
         <div class="fill" 
-             style="background-image: url('{% cropped_thumbnail banner "cropping" scale=1.0 %}')"
+             style="background-image: url('{% thumbnail banner.image '1600x500' box=banner.cropping crop detail %}')"
              role="img"
              aria-label="{% if banner.alt_text %}{{ banner.alt_text }}{% elif banner.caption %}{{ banner.caption }}{% else %}{{ banner.title }} banner image{% endif %}">
         </div>
diff --git a/website/templates/website/index.html b/website/templates/website/index.html
index 4ef14bc7..cd8082de 100644
--- a/website/templates/website/index.html
+++ b/website/templates/website/index.html
@@ -54,7 +54,6 @@
 
 {% load static %}
 {% load thumbnail %}
-{% load cropping %}
 {% load ml_tags %}
 
 {% block stylesheets %}
diff --git a/website/templates/website/member.html b/website/templates/website/member.html
index dceb5fd4..641ea340 100644
--- a/website/templates/website/member.html
+++ b/website/templates/website/member.html
@@ -48,7 +48,6 @@
 
 {% load static %}
 {% load thumbnail %}
-{% load cropping %}
 {% load ml_tags %}
 
 {% block opengraph %}
diff --git a/website/templates/website/news_item.html b/website/templates/website/news_item.html
index 19f1f671..b1e66209 100644
--- a/website/templates/website/news_item.html
+++ b/website/templates/website/news_item.html
@@ -40,7 +40,6 @@
 
 {% load static %}
 {% load thumbnail %}
-{% load cropping %}
 {% load ml_tags %}
 
 {% block opengraph %}
diff --git a/website/templates/website/news_listing.html b/website/templates/website/news_listing.html
index a88a343e..b6d91bf8 100644
--- a/website/templates/website/news_listing.html
+++ b/website/templates/website/news_listing.html
@@ -31,7 +31,6 @@
 
 {% load static %}
 {% load thumbnail %}
-{% load cropping %}
 {% load ml_tags %}
 
 {% block stylesheets %}
diff --git a/website/templates/website/people.html b/website/templates/website/people.html
index 907353ad..ac89c145 100644
--- a/website/templates/website/people.html
+++ b/website/templates/website/people.html
@@ -38,7 +38,6 @@
 
 {% load static %}
 {% load thumbnail %}
-{% load cropping %}
 {% load ml_tags %}
 
 {% block stylesheets %}
diff --git a/website/templates/website/project.html b/website/templates/website/project.html
index f30e2365..47d961b3 100644
--- a/website/templates/website/project.html
+++ b/website/templates/website/project.html
@@ -63,7 +63,6 @@
 
 {% load static %}
 {% load thumbnail %}
-{% load cropping %}
 {% load ml_tags %}
 
 {% block opengraph %}
diff --git a/website/templates/website/project_listing.html b/website/templates/website/project_listing.html
index ed78c6ae..1a41cb8b 100644
--- a/website/templates/website/project_listing.html
+++ b/website/templates/website/project_listing.html
@@ -31,7 +31,6 @@
 {% block pagetitle %}Projects{% endblock %}
 
 {% load static %}
-{% load cropping %}
 {% load thumbnail %}
 {% load ml_tags %}
 
diff --git a/website/templates/website/view_project_people.html b/website/templates/website/view_project_people.html
index 368f3671..6462dc5b 100644
--- a/website/templates/website/view_project_people.html
+++ b/website/templates/website/view_project_people.html
@@ -12,7 +12,6 @@
 
 {% load static %}
 {% load thumbnail %}
-{% load cropping %}
 {% load ml_tags %}
 
 <!DOCTYPE html>
diff --git a/website/tests/test_image_cropping.py b/website/tests/test_image_cropping.py
new file mode 100644
index 00000000..bb981406
--- /dev/null
+++ b/website/tests/test_image_cropping.py
@@ -0,0 +1,208 @@
+"""
+Tests for the vendored ``image_cropping`` package (#1299 / #1269 sibling).
+
+We replaced the abandoned PyPI ``django-image-cropping`` (v1.7, Feb 2022,
+Jcrop + jQuery, Django <=4.0, "save first, then crop") with a small in-repo
+fork whose only material change is a modern, client-side Cropper.js admin
+widget that previews and crops *before* the first save. The data layer is
+deliberately unchanged: ``ImageRatioField`` still stores an ``"x1,y1,x2,y2"``
+box string and ``crop_corners`` still feeds that box to easy_thumbnails, so
+every existing crop and every ``{% thumbnail ... box=obj.cropping %}`` call
+site keeps working untouched.
+
+These tests pin the three contracts that make that swap safe:
+
+1. ``crop_corners`` box parsing (the public render path).
+2. ``ImageRatioField.deconstruct()`` still returns the
+   ``image_cropping.fields.ImageRatioField`` path -- this is the migration
+   contract. ``website/migrations/`` is gitignored and regenerated per
+   environment, and existing migration files ``import image_cropping.fields``;
+   if this path drifts, ``migrate`` breaks on the next push-to-deploy with no
+   way to fix it on the server (see CLAUDE.md server-access notes).
+3. The admin widget is the Cropper.js one (no Jcrop/jQuery), and the field
+   wires the model class up with the ``crop_fields`` / ``ratio_fields``
+   metadata the mixin relies on.
+"""
+
+from unittest.mock import MagicMock
+
+from django.test import SimpleTestCase
+
+
+# --- crop_corners (public render path) -------------------------------------
+
+
+class CropCornersTests(SimpleTestCase):
+    """
+    Unit tests for the thumbnail processor that turns a stored box string into
+    an actual Pillow crop. This is what every ``box=obj.cropping`` template tag
+    ultimately exercises, so its parsing rules are load-bearing.
+    """
+
+    def _image(self, size=(100, 100)):
+        img = MagicMock()
+        img.size = size
+        # image.crop(box) returns a new image; hand back a sentinel so we can
+        # assert the crop happened and with which box.
+        img.crop.return_value = "cropped"
+        return img
+
+    def test_no_box_returns_image_unchanged(self):
+        from image_cropping.thumbnail_processors import crop_corners
+
+        img = self._image()
+        for empty in (None, "", []):
+            self.assertIs(crop_corners(img, box=empty), img)
+        img.crop.assert_not_called()
+
+    def test_valid_box_string_crops(self):
+        from image_cropping.thumbnail_processors import crop_corners
+
+        img = self._image(size=(100, 100))
+        result = crop_corners(img, box="10,10,50,40")
+        img.crop.assert_called_once_with([10, 10, 50, 40])
+        self.assertEqual(result, "cropped")
+
+    def test_box_as_tuple_crops(self):
+        from image_cropping.thumbnail_processors import crop_corners
+
+        img = self._image(size=(100, 100))
+        crop_corners(img, box=(10, 10, 50, 40))
+        img.crop.assert_called_once_with((10, 10, 50, 40))
+
+    def test_negative_first_value_disables_cropping(self):
+        from image_cropping.thumbnail_processors import crop_corners
+
+        img = self._image()
+        self.assertIs(crop_corners(img, box="-1,0,50,50"), img)
+        img.crop.assert_not_called()
+
+    def test_garbage_box_is_ignored(self):
+        from image_cropping.thumbnail_processors import crop_corners
+
+        img = self._image()
+        self.assertIs(crop_corners(img, box="not,a,box"), img)
+        img.crop.assert_not_called()
+
+    def test_wrong_length_box_is_ignored(self):
+        from image_cropping.thumbnail_processors import crop_corners
+
+        img = self._image()
+        self.assertIs(crop_corners(img, box="10,10,50"), img)
+        img.crop.assert_not_called()
+
+    def test_box_matching_full_size_is_noop(self):
+        from image_cropping.thumbnail_processors import crop_corners
+
+        img = self._image(size=(40, 40))
+        # box describes the whole image -> nothing to crop
+        self.assertIs(crop_corners(img, box="0,0,40,40"), img)
+        img.crop.assert_not_called()
+
+
+# --- ImageRatioField migration / model-wiring contract ---------------------
+
+
+class ImageRatioFieldContractTests(SimpleTestCase):
+    """
+    Pins the migration-safety contract and the model-class metadata the admin
+    mixin depends on. ``SimpleTestCase`` is fine: no DB rows are touched.
+    """
+
+    def test_deconstruct_path_is_stable(self):
+        """The deconstruct path must stay ``image_cropping.fields.ImageRatioField``."""
+        from image_cropping.fields import ImageRatioField
+
+        field = ImageRatioField("image", "245x245", size_warning=True)
+        field.set_attributes_from_name("cropping")
+        name, path, args, kwargs = field.deconstruct()
+        self.assertEqual(path, "image_cropping.fields.ImageRatioField")
+        self.assertEqual(args, ("image", "245x245"))
+        # kwargs that existing migration files pass must round-trip.
+        self.assertEqual(kwargs["size_warning"], True)
+        self.assertIn("free_crop", kwargs)
+
+    def test_field_is_charfield_storing_box_string(self):
+        from django.db import models
+        from image_cropping.fields import ImageRatioField
+
+        field = ImageRatioField("image", "245x245")
+        self.assertIsInstance(field, models.CharField)
+        self.assertEqual(field.max_length, 255)
+
+    def test_accepts_legacy_migration_kwargs(self):
+        """Old migrations call the field with the full upstream kwarg set."""
+        from image_cropping.fields import ImageRatioField
+
+        # Must not raise.
+        ImageRatioField(
+            "image",
+            "245x245",
+            free_crop=False,
+            adapt_rotation=False,
+            allow_fullsize=False,
+            verbose_name="cropping",
+            help_text=None,
+            hide_image_field=False,
+            size_warning=True,
+        )
+
+    def test_formfield_exposes_cropper_data_attrs(self):
+        from image_cropping.fields import ImageRatioField
+
+        field = ImageRatioField("image", "245x245")
+        field.set_attributes_from_name("cropping")
+        attrs = field.formfield().widget.attrs
+        self.assertEqual(attrs["data-image-field"], "image")
+        self.assertEqual(attrs["data-ratio"], str(245 / 245.0))
+        self.assertIn("image-ratio", attrs["class"])
+
+
+# --- Person model picks up the field metadata ------------------------------
+
+
+class PersonCropMetadataTests(SimpleTestCase):
+    """The field's contribute_to_class must register crop/ratio metadata."""
+
+    def test_person_exposes_crop_fields(self):
+        from website.models import Person
+
+        self.assertIn("image", Person.crop_fields)
+        self.assertIn("easter_egg", Person.crop_fields)
+        self.assertIn("cropping", Person.ratio_fields)
+        self.assertIn("easter_egg_crop", Person.ratio_fields)
+
+
+# --- Admin uses the Cropper.js widget, not Jcrop ---------------------------
+
+
+class CropWidgetTests(SimpleTestCase):
+    """
+    The whole point of the swap: the admin image field renders our Cropper.js
+    widget, and its Media pulls Cropper assets rather than the EOL Jcrop/jQuery
+    bundle.
+    """
+
+    def test_widget_media_uses_cropperjs_not_jcrop(self):
+        from image_cropping.widgets import CropImageWidget
+
+        media = str(CropImageWidget().media)
+        self.assertIn("image_cropping/cropper.min.js", media)
+        self.assertIn("image_cropping/cropper.min.css", media)
+        self.assertIn("image_cropping/ml_cropper.js", media)
+        # The EOL bits must be gone.
+        self.assertNotIn("Jcrop", media)
+        self.assertNotIn("image_cropping.min.js", media)
+
+    def test_person_admin_image_field_uses_crop_widget(self):
+        from django.contrib.auth.models import AnonymousUser
+        from image_cropping.widgets import CropImageWidget
+        from website.models import Person
+        from website.admin.admin_site import ml_admin_site
+
+        admin_obj = ml_admin_site._registry[Person]
+        request = MagicMock()
+        request.user = AnonymousUser()
+        db_field = Person._meta.get_field("image")
+        formfield = admin_obj.formfield_for_dbfield(db_field, request)
+        self.assertIsInstance(formfield.widget, CropImageWidget)