Docs

ImgPen image editor

Image Editor offers all the standard instruments to fine-tune raster images before you publish them on your website, plus a number of artistic effects and nice options like emoticons or freehand drawing – all directly from your content editor or upon uploading images with File Manager.

Here is why Image Editor rocks:

Quickly edit images from the editor

Whether you work with stock CKEditor or TinyMCE, or use the more advanced N1ED, Image Editor allows you to edit embedded images easily. You click the button on the toolbar, Image Editor opens, and over 40 editing tools are instantly at your disposal.

Image Editor screenshot

Enjoy great editing capabilities

You can crop, resize, transform, apply sepia or pixelate, make drawings above the image or add text labels to it. A number of stickers, shapes and icons are available too. And if File Manager is installed, the edited image is automatically uploaded back to the server under a different name with all necessary changes to the code already done.

Image Editor crop tool screenshot Image Editor transform tool screenshot

Keep edited images in one place

Managing multiple editions of an image is simple with Image Editor, especially if coupled with the File Manager add-on. Upon saving, the edited image gets renamed automatically, and all such images are stored in one place for easier access.

Works with Node, PHP, Java

The server part takes a few minutes to install and requires the bare minimum configuration whether you use PHP, Java or Node.js backend. Use one of these manuals depending on your server environment (language/platform):

And if N1ED or File Manager are already installed, no additional server-side actions are required at all.

Features

Streamlined interface

Using Image Editor is extremely easy thanks to the minimalistic user interface where every control is where you expect to find it.

Multiple editing tools

Not Photoshop, of course, but far more than just Paint, if you know what we mean. Dozens of filters, multiple brushes, fonts, icons, frames – competition is far behind.

Accessible directly from the editor

Image Editor seamlessly integrates to the content editor, so you can quickly touch up the image here and there right on-the-job.

Automatically uploads changed images

As soon as you finish editing an image and click Save, the image gets uploaded back to the server. Even better: the content automatically uses the latest version too.

Image Editor toolbar button

ImgPen image editor icon
Edit with ImgPen image editor
When image selected this button will open ImgPen image editor dialog to edit the image.

Image Editor tools

Crop icon Crop Crop photo to one of specified aspect ratios or let user select custom crop zone via UI
Resize icon Resize Use pixel-by-pixel control with maintaining pixel aspect ratio to adjust an image to the exact dimensions you need
  • Maintain Aspect Ratio
  • Use Percenteges
Transform icon Transform Rotate an image clockwise or counter-clockwise, flip horizontally or vertically
  • Free rotation of the image using a slider
  • Rotate 90° CW Rotate 90° CW icon
  • Rotate 90° CCW Rotate 90° CCW icon
  • Flip Horizontal Flip Horizontal icon
  • Flip Vertical Flip Vertical icon
Corners icon Corners Round corners of the image using UI
Filters icon Filters Adds effects to an image such as grayscale, sharpen, vintage, sepia, blur and more
Custom filter settings:
  • Remove Color (the filter offers the color picker and distance options)
  • Brightness (adjust brightness level using the slider)
  • Gamma (manual correction of Blue, Green, Red channels)
  • Noise (noise intensity)
  • Pixelate (sets the level of pixelation for an image)
  • Blend (configures the alpha-channel)
Draw icon Draw A tool for freehand drawing
  • Color picker
  • Brush types
  • Brush size
Text icon Text A tool to add text
  • Color picker
  • Font family
All objects are in their own layers and can be easily moved, deleted or modified.
Additional settings:
  • Flip horizontally/vertically
  • Shadow Shadow icon
  • Outline Outline icon
  • Color Color icon
  • Background Background icon
  • Texture Texture icon
  • Gradient Gradient icon
  • Opacity Opacity icon
  • Text style Text icon
Shapes icon Shapes A tool to add shapes (circle, rectangle, triangle, ellipse, line, etc.)
Stickers icon Stickers Available categories: emoticons, doodles, landmarks, stars, clouds, bubbles, transport, beach
Frames icon Frames Add built-in responsive frames to photo of any size. Type of frames: basic, pine, oak, rainbow, grunge, ebony, artt
  • Color picker
  • Size
Save mode A mode to save all changes in the image save/cancel
Zoom The canvas can be scaled using the mouse and also with the +/- button on the top panel
Undo icon Redo icon Undo/Redo Any changes in the image can be undone or redone
See more manuals: