The Image Editor module allows editors to modify or create images directly from a Drupal site. For example, an editor uploads an image into an image field, they edit the image using a 3rd party web-based image editor. Then the modified image is uploaded back to their server and attached to the original field.
In this tutorial, we’ll setup Image Editor so that we can create and edit images directly from Drupal.
Getting Started
The website that is running Image Editor needs to be on the internet. If you are testing out this module on
localhost, the module will not work.
Go download Image Editor and FileField Sources. Once downloaded, go to the Modules (admin/modules) page and enable “Image Editor” and “Image Editor for Image Field”.
Configure Image Editor
We’ll setup the module to work with a few online image editors that do not require an API key. These online image editors are the easiest to setup because no registration is required. We’ll also use the Article content type and Image field that comes with the standard installation profile.
1. Go to Structure -> Content types (admin/structure/types) and click on the “Manage fields” link within the Article row.
2. Click on the “edit” link for the Image field.
3. Scroll down and click on the “File sources” field-set, check the “Remote URL textfield” and “Image editor: Create new image” checkbox.
4. Click on the “Image editor” field-set and choose which image editors you would like to use.
5. Change the “Number of values” field to Unlimited.
If you’re planning on using an editor that requires an API key go to the Image editor configure page to save the keys. Go to Configuration -> “Image editor” (admin/config/media/imageeditor).
Image Editor in Action
Now that everything is setup, go and create an Article node. Go to Content -> “Add content” and click on Article. If you upload an image, you’ll see links to the image editors after you upload the file.
If you want to create an image, click on the “Create image” link and then select an editor.
Finally, if you want non administrator users to use image editor then you’ll have to assign them the “Use Image Editor” and “Use Image Editor for Image Field” permission.
If you have any questions, please leave a comment.
Ivan,
Thank you for this tutorial! Glad you had time to put it online – I have added the link to it from Image Editor project page.
Thanks again.
AndyB
Thanks for writing the module.
Dear ivan, I am a regular follower of your drupal tutorials, thanks a ton for taking time to create these wonderful tutorials. Keep it coming.. we all are loving it .
Thanks a lot.
Thanks for putting this together. I appreciate it.
Thanks.
I know I’ll probably need to use this for a project, soon. Nice, added value to be able to edit images from Drupal (using third-party software). Thanks!
Hi! Thanks for the tutorial. Anyways, I have a problem. the editor doesn’t pop up when i hover the image.
Thanks!
Are you getting any PHP or JavaScript errors? Also, make sure you enable some image editors.
Hi!,
I have a big problem , I would like use image editor but it not work in bootstrap themes.
Can you help me please ?
Thanks!!
What I recommend you do is, create an issue in the project’s issue queue (https://drupal.org/project/issues/imageeditor?categories=All)
And detail the exact problem you’re having: JavaScript and/or PHP errors.