Media Library - Focal Point Chooser

[shaunjeffrey]

I appreciate how simple Gutenberg is for both developers and end users. One of the specific features I find nice and simple to use is the focal point chooser for the cover and media/text images.

I feel that all images should be able to have a global focal point, regardless of the context. This will allow theme developers to ensure that sliders and featured images etc can be cropped to fit fully responsive layouts. Cover and other media blocks would still allow you to select a specific focal point, so those features should not need to change.

To that effect, I propose adding the focal point chooser to the media library, and storing the focal point as part of the image meta. There may be plugins available which can provide similar functionality, however I was unable to find any which are still being maintained and are as simple or sleek as the Gutenberg version.

Please investigate the possibility of porting the existing Gutenberg focal point chooser to the media library. I've tried looking into this myself, however everything is react and I'm unable to find a nice way to add this to the media library.

Example scenarios:

1. A blog page is set out to have the posts set out into a grid or masonry layout. The featured images are displayed as either squares or similarly shaped rectangles, where the images are both cropped and centred. A new post is created and the image of a person is uploaded as the featured image, however their head is cut off when it is displayed on the blog page. Having the ability to set a global focal point for this image will allow us to position the image so that the head is visible regardless of the image dimensions.

2. Custom meta field is created which will allow a user to specify an image for a banner or slider. The image itself is quite wide but shallow and on larger desktops the full image may be visible, while on smaller desktop screens and mobiles, the sides may get cropped. If an image is uploaded with the main focus of the image close to the left hand side, it may be cropped on smaller devices. Setting the focal point of this image will allow us to ensure that just the right side is cropped as the screen size decreases.

[antpb]

This is a great idea that needs some consideration on how we would implement this. It might be tricky to add a new attribute of focal-point and adopt that attribute within the editor.

I see a ton of useful ideas that could come just from knowing the context of "important area" to an image.

Marking this Future Release while we all discuss.

[joelyoder]

I agree this is a great idea - especially for themes that use feature images to populate post previews and page banners.

To also reiterate some of what we discussed on Slack: it would be great if we can use the same focus picker component that Gutenberg uses. Perhaps this wouldn't be possible until G2 is rolled out, but that could speed up the implementation and ensure the UX is consistent.