Image manipulation UIs


#1

There are several tickets in JIRA dedicated to improving image editing and manipulation control for editors within the admin and front end editing UIs. Also several people are interested in getting involved.

Let’s use this space to organise and co-ordinate the work so that we can all get involved and keep a unified direction.

The tickets:

https://presidecms.atlassian.net/browse/PRESIDECMS-223 (Front end image crop)
https://presidecms.atlassian.net/browse/PRESIDECMS-225 (Picking focal point)
https://presidecms.atlassian.net/browse/PRESIDECMS-452 (Editing derivative crops)

So firstly, who is interested in helping move these tickets forward?


#2

I think I can help here. I already did an image editor in an other project. Main feature was resizing and cropping an image. Other functions like rotating, black/white, etc. were done with cfimage. I used http://jcrop.org/ for the cropping stuff. I’ve seen that the latest version can also crop circles. What it quite interesting for user pictures.

One feature was really, really important: An undo function!


#3

I’ll do my comments separate for the topics above. Makes it easier to reply.

Regarding focal point. I don’t know how good this works especially for different image sizes (rectangle vs. square, eg.). Is it maybe neccessary do have different focal points on different image derivatives?


#4

seprate crops for derivatives? YES!
I had this issue too often in Mura. The automatic resizing for different images sizes wasn’t good. Especially you had some limitations when the image format wasn’t good.
For instance, you have a very wide image for a banner, but needed also a square image for a thumbnail. Sometimes it wasn’t possible to create a proper selection. What I was missing sometimes was the possibility to automatically add a white/black/transparent background to get the right image size. You had to manipulate them image in Photoshop, eg. to get a more square image. Cropping a banner from a square image is much easier than cropping a square from a banner image.


#5

I had requests from the HWS product owner that it would be cool to know if an image is landscape or portrait. If we store this information in the database we could show it in the asset manager and for instance sort the list accordingly. That could be really useful if picking an image to be integrated anywhere.

Regarding focal point:
HWS implemented that in their current system. I can have a look at their solution and ask whether we could lift some code to bring it into Preside.


#6

At HWS they used the following jQuery lib:

For serverside manipulation they used the internal image functions:

  • imageRead/imageWrite
  • imageResize
  • imageCrop
  • imageGrayscale (do we have that in mind as well?)

#7

Happy to contribute to this too. Will add to this conversation soon.


#8

This can be tricky. I stumbled across this last week. The image was portrait, but recognized as landscape. The reason is, the the width/height says it is landscape, but there was an orientation information in the EXIF data. Depends on the camera.


#9

@madmike_de EXIF image information is now considered with a fix I put in for 10.7. This probably does not help @jjannek with his observation though. Having orientation stored in DB would be useful, I agree. I guess a mechanism could be included to store that information at upload time.


#10

One of the features I really like about Preside is the storage of the original image in its original form and then creating derivatives from that. I feel we need to consider this concept when creating cropped images so that the cropped image becomes a derivative of a “new” parent image, where the parent image is now the maximum resolution for the newly cropped aspect ratio. I don’t know if this makes sense? I will give this some more thought and see if I can provide further detail.


#11

To push this a little further:
I think the most important thing is the focal/focus point. cropping is then implicit based on e.g. derivatives that crop anyway - but based on the focus point.

Implementation idea/concept - maybe as a first iteration:

  • add focus point property to the asset object, default: 0,0 (which is the center of the image)
  • create a custom form control that let’s you pick the focus point (modal pops up, displaying the image, pick the focus point there, focus point coordinates get inserted into the properties text field. we could integrate the helper tool used here: http://jonom.github.io/jquery-focuspoint/demos/helper/index.html
  • add the focus point property in the edit asset form using the form control
  • integrate focus point image resizing/cropping in derivatives, using a flag useFocuspoint, which is true by default
  • integrate in ImageManipulationService, NativeImageImplementation and ImageMagickImplementation

A full image manipulation UI could come later, but I guess that we make a huge step forward if the above would be integrated.


#12

I created this specifications topic to focus on it:

I’ll make it a wiki post so people can edit it directly.