Skip to main content

Editing ImgPen image editor configuration

ImgPen is the image editor of N1ED: it opens from the Edit button of the file manager and the toolbar. Its settings are in the Image Editor section of your Dashboard's Settings tab, and all of them are part of the Premium plan.

Image Editor section of the N1ED Dashboard
Image Editor settings
  • Tools: click a tool to hide or show it in the image editor.
  • Colors, Crop ratios, Fonts, Stickers and Shapes: add your own to the ones the editor has. Once you have added some colors, crop ratios, stickers or shapes, Remove default … leaves only yours.
  • Resize: the smallest and the largest size the Resize tool gives an image.
  • New text title: the text of a new caption.
  • Saving → JPEG quality: the quality the Save image dialog starts at.

A set of options used to customize ImgPen image editor is listed below. You can also set them in the editor's own config, see Dynamic config.

Tools​

The list of tools will be shown on the main ImgPen toolbar, in this order.

API parameter
ImgPen.tools
Type
string[]
Valid values
crop, resize, corners, filter, draw, text, shapes, stickers
Dashboard
Settings → Image Editor → Tools

All of them by default. A tool you leave out is not shown.

Custom colors​

Customize the color palette with your own website colors with this option. They are added after the default colors.

API parameter
ImgPen.colors
Type
string[]
Default
null
Dashboard
Settings → Image Editor → Colors → Add custom color

Colors in HEX notation (like #54b9ff)

Remove default colors​

Check this checkbox to clear the default colors list and use only custom one.

API parameter
ImgPen.removeDefaultColors
Type
boolean
Default
false
Dashboard
Settings → Image Editor → Colors → Remove default colors

Minimum and maximum resize widths and heights​

The Resize tool keeps images between these sizes, and changes a size you type to the nearest allowed one. Cropping is not limited by them.

API parameter
ImgPen.resizeMinWidth
Type
number
Dashboard
Settings → Image Editor → Resize → Minimum

In pixels

API parameter
ImgPen.resizeMinHeight
Type
number
Dashboard
Settings → Image Editor → Resize → Minimum

In pixels

API parameter
ImgPen.resizeMaxWidth
Type
number
Dashboard
Settings → Image Editor → Resize → Maximum

In pixels

API parameter
ImgPen.resizeMaxHeight
Type
number
Dashboard
Settings → Image Editor → Resize → Maximum

In pixels

Crop ratios​

If you need to adopt all images inside your content to some predefined aspect ratios, define them for crop tools too. They are added after the default ones.

API parameter
ImgPen.cropRatios
Type
{w: number, h: number}[]
Default
null
Dashboard
Settings → Image Editor → Crop ratios → Add custom crop ratio

In abstract units: only the proportion matters, {w: 16, h: 9} is 16:9.

Remove default crop ratios​

Check this checkbox to clear the default crop ratios list and use only custom one

API parameter
ImgPen.removeDefaultCropRatios
Type
boolean
Default
false
Dashboard
Settings → Image Editor → Crop ratios → Remove default crop ratios

Fonts​

If your website uses some custom fonts and you wish to add captions on your images with these fonts, add links to the fonts here. They are added after the default fonts.

API parameter
ImgPen.fonts
Type
{family: string, url: string}[]
Default
null
Dashboard
Settings → Image Editor → Fonts → Add custom font

Use absolute URLs (https://…): a font from a path like /fonts/my.woff2 is not loaded. The server of the font has to allow loading it from other websites (CORS). An empty url is a font the browser already has.

New text title​

The text of a caption just added to an image.

API parameter
ImgPen.defaultText
Type
string
Dashboard
Settings → Image Editor → Fonts → New text title

Stickers​

Custom stickers will be added to the special sticker category in the ImgPen dialog.

API parameter
ImgPen.stickers
Type
string[]
Default
null
Dashboard
Settings → Image Editor → Stickers → Add custom sticker

Array of absolute URLs to PNG/SVG stickers.

Remove default stickers​

Check this checkbox to clear the default stickers list and use only custom one.

API parameter
ImgPen.removeDefaultStickers
Type
boolean
Default
false
Dashboard
Settings → Image Editor → Stickers → Remove default stickers

Shapes​

You can extend the list of shapes by typing SVG paths in this section.

API parameter
ImgPen.shapes
Type
{title: string, path: string, freeScaling: boolean}[]
Default
null
Dashboard
Settings → Image Editor → Shapes → Add custom shape

path is the data of an SVG path, like M 16 256 h 480. freeScaling: false keeps the proportions of the shape when it is resized.

Remove default shapes​

Check this checkbox to clear the default shapes list and use only custom one.

API parameter
ImgPen.removeDefaultShapes
Type
boolean
Default
false
Dashboard
Settings → Image Editor → Shapes → Remove default shapes

JPEG quality​

When you save an edited image, the Save image dialog asks for its name and its format, PNG or JPEG (it starts with the format of the original, or PNG for other formats). For a JPEG it also asks for the quality, and this is the value it starts at. You can still change it for each image.

API parameter
ImgPen.jpegQuality
Type
number
Default
95
Dashboard
Settings → Image Editor → Saving → JPEG quality

From 1 to 100