Define an image’s subject by manually choosing the most important part of the image. If later the image needs to be cropped for rendering, this focus point is taken into account to make the that part always visible, regardless of the size and aspect ratio of the image.
Set Focus Point
The asset object needs a new property named focuspoint. This can be a simple text field where 2 values are stored as a comma-separated list. Value ranges are
-1,-1 (bottom left) to
1,1 (top right).
0,0 means the focus point is in the center of the image. More details here: https://github.com/jonom/jquery-focuspoint#1-calculate-your-images-focus-point
Within the Asset Manager the edit asset screen can be extended. The property Focus Point should be displayed beneath the Description text field. Default value should be
0,0 for newly uploaded images.
The form field is not a normal textfield but a specific form control to be developed. It should have an icon at the far right end of it that can be clicked.
Clicking the icon opens a modal to be able to manually select the focus point in a visual way.
The image is displayed to select the point from. In addition various aspect ratios of the same image are displayed to help find the best focus point. If changing the focus point all helper images automatically change based on the selected value.
A demo of this functionality can be found here:
This helper tool could also be integrated/lifted. The code can be found here:
Use Focus Point
If an image has a non-empty focus point property, this can be used in derivatives.
No change is required in how derivatives are defined. The resize functionality should be extended. Focus point should be taken into account if one is available and if the attribute
maintainAspectRatio=true.and both x and y dimensions are specified.
maintainAspectRatio=false the image should simply be resized without cropping anything.
Via Image Picker
If an image is used in the rich editor via the image picker, the dimensions can be entered/selected manually there. If the aspect ratio is locked, and both x and y dimensions are specifed the focus point should be taken into account.
Example: Original image size: 1000x500, resize to: 100x50
If however the aspect ratio should be changed (unlocked aspect ratio icon), then the focus point should be not used during image transformation.
Example: Original image size: 500x500, resize to: 100x30 (from square to landscape format)
Things to consider
Update the focus point
If a focus point of an image changes, all generated derivatives of that image should be deleted to make sure that they are regenerated on the next request using the new focus point.
There is not need to change the naming and/or storage of derivatives. It can be stored as before with either the derivative name or the dimensions within the folder name.
Currently if auto-cropping an image based on derivatives the image is cropped from the upper left corner (e.g. throwing either the bottom part or the right part away, depending on the aspect ratio).
If no focus point is defined (property is empty) then the system should behave exactly like before.
For new uploaded images the focus point is automatically set to the center (
0,0) of the image.
This way there are no image display changes if focus point is introduced.
Existing image assets after the change is applied should not get the default focus point value assigned to it. The focus point for those should remain empty to ensure backward compatibility.