Build content block by block
Block gallery
Custom grid
Block constructors
Custom blocks
Edit column structure
Responsive content
AI Text
Widgets and media
Widgets basics
Boostrap widgets
Image widgets
Image Editor
File Manager
Font Awesome
YouTube
Placeholder
Page embed
Typography and basics
Text, paragraphs, headers
Links and anchors
Tables
Custom widget
Source code
Classes, styles, attributes
Working with breadcrumbs
Translator

ImgPen image editor

Images are an essential part of the content. When you prepare articles for publishing, be that your blog or a serious internet magazine, you face the need to modify an image, for example, crop, rotate, or resize it. ImgPen image editor can do this for you.

The component involves all possible functionality to process images. Seamless integration with Flmngr file manager allows you to upload and save edited images to your server. You can find the complete description of its functions in the table below.

Image Editor toolbar screenshot
Image editor toolset
Crop tool screenshot
Crop tool
Tools to add text, a color picker and font family screenshot
Tools to add text, a color picker, and font family

Features and buttons

Crop button
Crop		 Crop photo to one of the specified aspect ratios or let a user select custom crop zone via the UI
Resize button
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 button
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° CCW
  • Flip Horizontal
  • Flip Vertical
Corners button
Corners		 Round corners of the image using UI
Filters button
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 button
Draw		 A tool for freehand drawing
  • Color picker
  • Brush types
  • Brush size
Text button
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
  • Outline
  • Color
  • Background
  • Texture
  • Gradient
  • Opacity
  • Text style
Shapes button
Shapes		 A tool to add shapes (circle, rectangle, triangle, ellipse, line, etc.)
Stickers button
Stickers		 Available categories: emoticons, doodles, landmarks, stars, clouds, bubbles, transport, beach
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/Redo Any changes in the image can be undone or redone

The option Edit image with ImgPen is avilable from several places:

  1. The Edit image button on the CKEditor or TinyMCE toolbar is active if the image is selected

    Button Edit image on toolbar

  2. The Edit button on the sidebar or in the editing dialog image widgets

    Edit image button on the sidebar

  3. In Flmngr: before you insert an image to the content, you can edit it

    Edit image button in File Manager