Posted by sime on February 12, 2007 at 11:18pm
Eye-drop Editor is finally seeing some light. This is a jquery/ajaxy image editor that integrates with server-side image manipulation.
There is still a lot of work, and bug-fixes, and prettyiness to occur. but I thought it was worth sharing because of a few reasons like:
- It now has an implementation module (eyedrop_field) which demonstrates end-to-end how the thing is supposed to work
- I am reasonably happy with the code. I don't think it's too crufty to look through
- Because of the above, collaboration starts becoming feasible, so I start marketing
The next step is to draw a line in the sand. Polish up what I've done so far and tag it. In the longer term the goal is to integrate with imagecache and transformer. Anyroads, that's the news.
Simon
Comments
Nice
...and image... (kind of done with image_attach, I suppose)
...and maybe TinyMCE / other WYSIWYG editors
I can see a big value in something like img_assist for selecting / including new images, then cropping and (somehow?) also saving this derivative. Maybe in revisions? We start getting into the whole file vs. node thing again.
I've been excited for something like this to see the light of day. Will follow with interest.
As soon as I look two steps
As soon as I look two steps ahead there are too many questions and possibilities. The beta is part of a short-term goal to keep me in the real world. ;-)
I've written up a summary of my current job:
My client runs a fancy dress shop. She needs to have one image per product, and each image has 2 or 3 derivatives used in various parts of the theme. She gets images from everywhere, suppliers and customers. Customers often send a pic of 4 people at a party showing 4 different costumes. She's happy with the quality, but needs to crop (and change the crop) without too much fuss.
So I'm working with image, image_attach (maybe img_assist later). I'm relying on the image.module's derivative settings (eg. thumbnail, preview), both for setting the "target size" as well as for a file naming.
The CCK eyedrop_field enables a new field on the node which is linked to an image.module derivative (so I might have two fields, one "thumbnail" and one "preview") and the actual data that is stored is a serialized x,y,w,h co-ords. These crop numbers are drupal_to_js and sent out in an attribute (eg
<img class="eyedrop-image" src="blah" eyedrop="{ some json info}" />The editor's document.ready routine attaches click events as appropriate. On the click event the editor pops up, loads the original unedited image, shows the current crop area. On submitting (ajax) the new crop area is sent back to the server, which creates the new derivative. The editor then forces the image in the page to reload and voila!
Files are named eye-nid-iid-derivative.jpg (
eg. eye-5-9-preview.jpg) which keeps the derivatives unique in a separate directory.All in all, I'm leaving parts of the grand plan out, so that I can finish my client's site. For example, the editor should eventually be able to handle different layers and different actions (crop, rotate, watermark) that added as neat .js plugins. But to get to this level I need to extend my javascript skills, get some good design patterns into my head. Of course, it should be possible for any module to use the editor, only time will tell how hard that is to achieve.
Yeah, it's a bit like passing a camel, but having something that actually does something is a big step.
Sounds really, really awesome
Does this relate to the ImageMagick summer of code project at all?
All I really want is a way to rotate images (the original) through the user interface! I know there's a lot of potential to do this and many things in PHP that hasn't quite made its way to the UI.
~ ben melançon
member, Agaric Design Collective
http://AgaricDesign.com - "Open Source Web Development"
benjamin, agaric
Ideally the distinction b/t
Ideally the distinction b/t GD and ImageMagick is at the Toolkit level (ie. any solution should be possible with either).
You might refer to the transformer project where discrete transformation tasks (like "rotate", "watermark", "resize"...) are being implemented. The goal of eyedrop will be to allow the user to trigger transformer actions through toolbar buttons and to chain these actions together. At the moment eyedrop simply implements its own crop/resize for the purposes of developing the interface.
There is little happening on this right now. It is not funded, it is just when I have time.
You might also find another module that does specifically what you want, rather than trying to do everything like this project is! :-P
documentation
Some modest install documentation: http://drupal.org/node/119604
And
And release
http://drupal.org/node/119789
a demo (yes a plug for collaboration)
OK, so in the interest of collaboration, I've set up a demo. Let people see something for themselves. The site is http://eyedrop.emspace.com.au
For login details (to try the editing) please contact me in IRC #drupal-ecommerce. If I am there, then I'm online and will respond shortly.