Asset focal point: Working draft spec


#1

Draft specification

Introduction

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:
http://jonom.github.io/jquery-focuspoint/demos/helper/index.html

This helper tool could also be integrated/lifted. The code can be found here:

Use Focus Point

Via Derivatives

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.

If 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.

Derivative storage/naming

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.

Backward compatibility

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.


Image manipulation UIs
#2

This is looking great, thanks @smoufa for the edits (complete work). @lukehold I wonder could we take this and make some wireframes/screen designs based on Preside admin?


#3

Quick mock up of the edit asset screen in asset manager

  • Could the focal point could be a safe area that is resizable to have more control?
  • Could we combine the suggested focus point modal with asset preview to simplify workflow?
  • Having the golden 3rd lines helps create visually pleasing images


#4

picking a good focus point for an image is eased a lot if you can see different ratio/cropped image version during picking.

This is used here:
http://jonom.github.io/jquery-focuspoint/demos/helper/index.html

I am not sure whether something like that fits within the screen. a modal could make more sense here.


#5

another option would be to have quick links (e.g. buttons with various square + rectangle shapes on it) to preview the image in different formats.
example: pick the focus point on the preview image and then click a button next to it to show a modal with a preview in landscape, banner, square, portrait, etc - incorporating the focus point calculation.


#6

I really like the idea of golden 3rd grid + ability to select a region - I wonder @smoufa how a region select affects the overall logic?

To have it combined with the asset preview I think we would need some kind of call to action to make it clear that you could actually do this focal point setting. As it is there, I think it is unclear as to what you are doing when changing this rectangle (I imagine that many would believe they were cropping the image).


#7

@smoufa only made corrections - I created the spec… :wink:


#8

I could also imagine that a user might think she crops the image.
Focus point will always crop only either x or y axis, never both.


#9

You both make a good point, I will have a think on it. Here’s an initial idea of seeing the derivatives, maybe a model is needed


#10

Sorry that the UI is german only.
That is the way they defined it at hotelwebservice.

Translating:

  • Wichtigen Bildbereich… = Define important image part (Focus)
  • Originalbild = Original image
  • Klick ins Bild… = click on image = define focus
  • Vorschau = Preview

#11

We could add a “Cropping” call to action beside the image preview. This could either open up a modal dialog or link to a new screen. This new screen could just contain the cropping focal point option for now but eventually allow you to manage all derivatives for the image (i.e. completely recrop them, etc.)


#12

@dominic that’s what I had in mind. I suggest to start simple with the focus point picking + live preview for various aspects in a modal. And then iterate over that and make it more complex as you suggested.

Minor thing:
Regarding naming: “Cropping” may be misleading as it is very specific - why not name it a little more general like “optimize”, “image edit”, …
I have no strong feelings about either option though - and also not a good alternative name :wink:


#13

Agreed, a better name required there.


#14

Regarding the logic of setting a focal area rather than just a focal point, I think it should be quite simple.

The area set would always be a (resizable) square, and your general focal point would be the centre of the square (to be used as per the focal point spec above).

A derivative definition could then have a new attribute, zoomToFocalArea (or whatever we decide to call it), which would default to false for backwards compatibility. If true, then the image would be zoomed in so the selected area would fill the resulting image either horizontally or vertically, depending on the orientation of the desired image. If false, then the whole of the image would be processed around the focal point.

I would suggest that derivatives such as thumbnails would be set with zoomToFocalArea=true.

Does anyone have any more comments on the working draft spec? I was thinking I might try to make a start on this soon…


#15

I think the default would have to be to crop around the focal point. Regards backward compatibility - no existing assets would have a focal point set so I think that would be correct.

My only “concern” is around how we manage this through the UI - we have versions of assets to consider too! But awesome, if you can figure something out that works well - maybe a quick animated gif demo to post here or in the pull request :slight_smile: