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 007a538. 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 :)

[mmikkel]

...as the 3.7 slideouts are about to rejuvenate Asset HUDs big time, it'd be the perfect time to implement this one, I think 😍

[brandonkelly]

Not going to happen for 3.7 but it’s on our radar. We’ll have to revisit the thumb UI a bit, as the overlaying Preview and Edit buttons could get in the way of the focal point icon.

[jsunsawyer]

@brandonkelly With the new element slideouts, I have an additional step due to my preferred viewport sizes.

I use a 1440p (2560px by 1440px) monitor with most working windows snapped to the left/right side. So with my browser being 1280px wide, I have to open the asset's slideout, then open a secondary slideout, then click edit on the asset.

This extra step isn't the worst part about it though. My fear is that some clients may just miss the edit portion entirely, as it's hidden behind an icon that isn't very clear.

Hoping you can put some thought into this aspect of things as well.

Perhaps the slideouts should take up more than 1/2 the screen at smaller viewport widths, giving them a minimum width.

[mmikkel]

Craft 4 adds focal point editing capabilities to image preview modals – but not to the HUD/slideout thumb UIs, which was the point of this FR.

Is adding focal point editing to the thumb UI in slideouts still on the table?

[brandonkelly]

We’re still experimenting a bit, yes.