Image Editor

#Install

composer require 4rn0/statamic-image-editor

That is all. Statamic publishes the control panel assets when it installs or updates the addon; there is no configuration file and no settings screen. Requires Statamic 6.16 or later and PHP 8.3. If ImageOptimizer is installed it must be 2.1 or later; Composer refuses older versions.

#Using it

Asset browser. Open the actions menu of an image, or select one image and use the actions bar, and choose Edit image.

Asset editor. An Edit image button in the toolbar, in the place of Statamic's own Crop button, which only crops; the editor opens on top and the asset's page stays underneath, like the focal point editor. (In an inline asset editor opened from a field the addon cannot tell which asset is shown, so there Statamic's Crop stays.)

The editor. A dark, full-width editor: the image with the crop frame in the middle, and a dock at the bottom with four tools.

• Crop: the frame in the middle is what you will get. Drag the image to move it under the frame, drag the corners or edges to change the frame (the view then zooms to it), zoom with the mouse wheel, two fingers or the Zoom slider, straighten up to 45° either way with the Rotate slider, rotate in quarter turns, flip, and lock an aspect ratio (free, the original, or the presets from crop_aspect_ratios in config/statamic/assets.php). The arrow keys nudge the image by one pixel, with Shift by ten. The frame never leaves the image, also while straightening or zooming out, so the result has no empty corners.
• Adjust: nine controls, one slider at a time: pick a control in the row and drag its slider. Exposure, brightness, contrast, saturation, temperature, tint, clarity, fade and vignette. Exposure, saturation and white balance work in linear light with a proper chromatic adaptation; clarity is local contrast. Double-click the value to reset a control.
• Filters: the image itself through every preset, in a row: Vivid, Vivid Warm, Vivid Cool, Dramatic, Dramatic Warm, Dramatic Cool, Mono, Silvertone and Noir, followed by the filters saved on this site. A filter is nothing more than the nine sliders: picking one sets them, and you tweak from there in Adjust. Save as filter stores the current sliders under a name for everyone on the site, and the × on a saved filter deletes it; both are available to users who may edit and upload images. The saved filters live in resources/addons/statamic-image-editor.yaml.
• Info: what the camera wrote (model, exposure, aperture, ISO, focal length, date, location), read-only, and four fields you can edit: creator, copyright, credit line and description. They are written into the saved file as XMP and IPTC, so other tools read them. A switch removes all metadata from the saved file. Saving with only the Info panel changed keeps the pixels exactly as they are: the file is not encoded again.

The size in the corner is the size of the file that will be saved. Reset returns to the untouched original. Save writes the result over the asset and brings you back where you were, the asset browser or the asset's own page; when the file changed in the meantime, by a reupload or by someone else's edit, the save is refused and you open the image again. Need a copy? Duplicate the asset first, then edit the duplicate.

Reversible editing. The first edit keeps a copy of the file as it was in the hidden .meta/ folder of its container, on the same disk. Every later edit starts from that copy with your previous edit applied, so you continue where you left off and editing twice never stacks quality loss; Reset returns to the untouched original. Revert to original in the asset browser puts the copy back and forgets it; the listing, the asset editor and the thumbnails show the restored image right away. The asset itself is overwritten: its URL shows the edited image. Reuploading, replacing or cropping with Statamic's own tools counts as a new file: the kept original is dropped and the history starts over. So does ImageOptimizer's Discard original, after which the image can no longer be reverted. A save from the editor is not a reupload: listeners for Statamic's AssetReuploaded event do not run, AssetSaved does.

Focal point. A focal point set on the asset moves along with the crop, flips and turns. When it falls outside the crop it is removed.

Metadata. The browser writes pixels only, so the addon copies the metadata into the saved file: XMP, IPTC and EXIF for JPEG; the text chunks (XMP among them) and EXIF for PNG; EXIF and XMP for WebP. It comes from the kept original the first time and from the current file after that, so the fields you edited stay edited. EXIF is corrected on the way: the pixels are upright now, so the orientation becomes 1, the pixel dimensions become the new ones and the embedded thumbnail is unlinked. The ICC profile is normally not kept: browsers convert to sRGB when they decode, so the saved file is sRGB. The editor checks whether the browser actually does that (Firefox does not, at the time of writing) and keeps the profile when it does not, so the pixel values stay correctly labelled either way.

Formats. JPEG, PNG and WebP, always saved as the same format, name and extension. JPEG and WebP quality is Statamic's own image_manipulation.crop_quality (defaults.quality before that, 90 when neither is set). PNG stays lossless with its transparency. GIF, SVG and AVIF do not get the action. Saving WebP needs Chrome, Edge or Firefox; Safari cannot encode it and the editor says so.

Limits. Images up to 40 megapixels, and no side longer than the graphics hardware allows (16384 pixels on current desktops, less on some tablets). Larger images are refused with a message rather than edited at a lower resolution.

#Permissions

No permissions of its own. Opening the editor and saving over the asset need what Statamic's crop needs: edit and upload on the container. A user who may upload but not edit sees the Edit image button as well, because Statamic shows its Crop button on upload rights alone; the editor then opens without Save. Revert to original needs edit. Saving and deleting filters needs edit and upload on at least one container. Super users have everything.

#With ImageOptimizer

Both addons keep the same original in the same place, and there is one Revert to original, ImageOptimizer's. After an edit the result is optimized the way an upload is, when Optimize Assets is on, and ImageOptimizer starts its statistics over for the edited file. A save that only changes the Info fields is not optimized again. Revert undoes the edit and the optimization together and puts the uploaded file back. Note that jpegoptim keeps EXIF and IPTC but drops the XMP packet of a JPEG, so after optimization the creator, copyright, credit and description of a JPEG live in IPTC only; the Info tab still shows them.

#Remote and private disks

The editor loads the file through the control panel, never through the asset's URL, so containers on S3, Spaces or SFTP and containers without a public URL work the same way. Kept originals live in .meta/ on the same disk.

#Caches

Saving clears the asset's Glide manipulations and refreshes the control panel thumbnails. Since the asset keeps its URL, browsers and CDNs keep serving the old bytes until their cache expires; purge them if that matters.

#Translations

English, Dutch, French and Turkish. Publish them to change wording: php artisan vendor:publish --tag=imageeditor-lang.