Admins often overlook the focal point, let's make it choose a smart/intellegent default

Created on 29 February 2024, 4 months ago

Problem/Motivation

Here's a common scenario: A content editor uploads a new image, but they don't set the focal point. Either because they didn't understand it, or they forgot. Heads are still cut off in crops of this image.

Proposed resolution

What if we used image analysis to intelligently/automatically/smartly set a default?

Take a look at this promising JS library:
https://github.com/jwagner/smartcrop.js
https://29a.ch/sandbox/2014/smartcrop/examples/testbed.html

Here's a proposed workflow

As a site builder...

If I configure the form view-mode for an entity that has an image field
And choose the "Image (Focal Point)" widget
And adjust the widget settings
Then I see a new setting for "Automatically choose a default focal point"
* checkbox
* default: checked
* help text: When an image is first uploaded it will be analyzed and the focal point will be set to the most important part of the image. The content editor can then make further adjustments. The analysis happens by JavaScript in the user's browser, the image is not sent to a third party.

If "Automatically choose a default focal point" is checked
Then "Default focal point value" is hidden

As a content editor...

If I upload a new image to an image field that uses the Focal Point widget, and and is configured for "Automatically choose a default focal point"
Then immediately after the file is uploaded it is analyzed with the smartcrop.js library in the user's browser
And the focal point (and crosshairs) is set to the centre of the what smartcrop.js determined
And I can then drag the crosshairs to set a different focal point
And this analysis only happens when an image file is first uploaded

Remaining tasks

Build it.

User interface changes

For site builders: A new widget setting.
For content edtiors: none.

API changes

None?

Data model changes

Ideas future enhancements (future tickets)

* Add some of the smartcrop.js config options to the widget settings form
* Add support for the facial recognition libraries that smartcrop.js supports
* Create a new widget (or widget setting) that completely hides the crosshairs and only relies on the auto analysis. This can be used if you need an ultra-simple content form (e.g. for kids, or seniors, or for a user profile picture).

✨ Feature request
Status

Active

Version

2.0

Component

Other Code

Created by

πŸ‡¨πŸ‡¦Canada dalin Guelph, πŸ‡¨πŸ‡¦, 🌍

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Production build 0.69.0 2024