Show effect of (multiple) image transforms when setting focus point

[jannisborgers]

Whenever we’re at the stage in a project where initial content has to be added, clients ask what resolution the images should have. For some sites, telling them to deliver all images with a certain long-edge width/height (e.G. ”1920 wide or tall, whichever is the larger side“) and using the focus point feature is enough.

Exact image cropping

For some heavily art-directed sites though, the client wants the crop to be exact. Often, crops have been proofed by the client or the clients of the agencies we work for. As images use multiple image transforms in almost all cases, communicating the different sizes becomes tedious and error-prone (e.G. ”page teaser 720x720, page header mobile 410x596, page header desktop 1920x1080” etc…)

I still prefer the approach of uploading everything bigger than it has to be and letting Craft crop it based on the focus point.

• In case the template code changes and the final image size get resized in the process, no extra work is needed to upload new images.
• Also, some scenarios (portrait and landscape crops of the same image) cannot be achieved without uploading multiple images and using different assets, which would mean having to use multiple asset fields in the entry… which overcomplicates a lot of the process.
• In most cases when using stock photos, the editor can upload them straight after downloading them from the source (if the file size is okay).

Benchmark

I recall that in a TYPO3 project a couple of years back, every time you placed an image, you could select and move multiple bordered crop-boxes on top of the image in the UI, each corresponding to a crop/ratio defined by the development team. The UI was messy, but it got the job done, letting editors define cropping for a single upload. I’m not sure if this is what I used back then, but the TYPO3 docs show something similar at the bottom of the following screenshot: https://docs.typo3.org/m/typo3/tutorial-editors/main/en-us/_images/EditContentImageProperties.png

Suggestion: show effect of image transforms when setting focus point.

I’ve made a quick sketch of the UI I have in mind, as a way to get the discussion started. This shows the image editor:

1. A new tab for transforms (in addition to Rotate and Crop)
2. A list of defined transforms with a name and their resolution (could come from general.php, plus the named transforms defined in control panel by devs — we rarely use these anymore and mainly use template-side transforms).
3. When placing the focus point, show the effect of the selected image transform by displaying the result of the transform on top of the image with a border and/or dimming of the rest of the image.

Related feature requests

I found a couple of requests dealing with the fact that transforms could be defined in the asset field instead of the asset itself. This would of course be a very nice addition. However, what I’m suggesting in this discussion is merely a UI improvement to better show the effect that the focus point has on the end result.

Per-transform focus point

The next level would be defining the focus point independently for each transform. This would match the benchmark experience and possibilities.

Plugins available?

I couldn’t find something as a plugin, but if there is one, I’d love to try it out.

[brandonkelly]

Like the concept!