Using Image Editor in Drupal 7

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

Fig 1.0

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.

Fig 1.1

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

Fig 1.2

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.

Fig 1.3

If you want to create an image, click on the “Create image” link and then select an editor.

Fig 1.4

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 Zugec

About Ivan Zugec

Ivan is the founder of WebWash and spends most of his time consulting and writing about Drupal. He's been working with Drupal for 12 years and has successfully completed several large Drupal projects in Australia.

11 thoughts on “Using Image Editor in Drupal 7”

  1. Andrew Berezovsky

    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

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

  3. 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!

  4. Hi! Thanks for the tutorial. Anyways, I have a problem. the editor doesn’t pop up when i hover the image.

    Thanks!

  5. 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!!

Leave a Comment

You have to agree to the comment policy.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Media Management in Drupal

Download a FREE 8 part video course on managing media in Drupal.