Cms: Edit the image focal point in asset HUDs and Edit Asset pages directly

[carlcs]

I’m glad to see the asset editor improvements that came with 007a538ff65c153cfeb9c6c255b0d9085a11f25d. Nice work!

One thing I’d like to see added to it is displaying of the focal point in the HUD’s image preview directly, so you don‘t have to load the image editor to see if a focal point is set, and where approximately it’s set.

[davidhellmann]

But I say it again, to set the point would be also nice. You're right that it's easier when the Image is larger (within the image editor) but most of the time this size is more as OK. I used Plugins in Craft2 and the image was not bigger but the workflow was straight and fast.

+1

[carlcs]

@davidhellmann images in the Focal Point plugin for Craft 2 are displayed bigger, portrait ones at least.

But you are right, size is probably still okay to position the point. Also, most users are probably editing with Live Preview open, to see the end result directly – the crop based on the focal point. With the current implementation this is not possible at all, as the image editor overlays Live Preview.

I’ll update the issue title.

[brandonkelly]

Would be cool

[davidhellmann]

@carlcs what's that for plugin for the EXIF data? : )

[carlcs]

https://github.com/carlcs/craft-assetmetadata
@davidhellmann Craft 3 release will be out in Feb.

[khalwat]

@carlcs If you use ImageOptimze, it'll show you whether or not the focal point as been set:

...and the image previews shows you how the cropping looks/works. I thought about putting the focal point in the display, but it's a little pointless, because it'll always be centered (that's the whole idea) in the image preview.

The issue I have with showing the focal point in the Craft image preview is that it doesn't really show you how any final image/transforms will actually end up looking based on where the focal point is set.

And then indicating that it's _not_ set might be a little weird; I guess you could just have it not be there, but that wouldn't help anyone who doesn't know to look for that.

[mmikkel]

I built a tiny plugin (internal only, at least for now) to add an inline focal point editor to the image preview in Asset modals. It works well enough (I basically copied the Focal Point plugin for Craft 2), with the only real tradeoff being that the user has to actually hit the "Edit" button to launch the image editor.

Having the focal point editor more easily available is a big timesaver compared to having to launch the full image editor every time, and it also exposes a very important feature that a lot of clients forget about because it's hidden inside the image editor. I also find that the small size of the preview doesn't really matter – focal points are typically fairly approximate anyway, since image sizes and formats are often all over the place in the frontend. And, if higher fidelity is needed when setting the focal point, the user can still pop open the image editor and set the focal point there.

As a proof of concept, here's how it looks in action: https://recordit.co/MMlyfYO7pD

Really hope something like this can be added to core.

[khalwat]

@mmikkel that's a fantastic UX improvement. I agree that for many of my clients, setting the focal point is a very common operation, whereas needing an actual image editor is not.

[carlcs]

It makes me sad that this is still untouched.

I know that our clients are setting focal points on images every day, and for every single one of them they have to accept these extra steps Craft requires them to go through.

• hover over the image to find the edit button, which isn’t very accessible
• click the edit button, and wait long seconds for the image editor to be done loading
• search for the focal point icon in the image, because a focal point might have already been set
• click on the set focal point button
• move the focal point icon
• click save, or rather think about the choices given here first (save / save as new image)

[khalwat]

We miss you on Discord @carlcs :)