Full-featured photo image editor using canvas for Kirby 3. It is really easy, and it comes with great filters.
TOAST UI Image Editor
This plugin developed based on tui.image-editor. You can check out all features and documents from official website.
🎨 Editor features
- Load image to canvas
- Undo/Redo (With shortcut)
- Crop
- Flip
- Rotation
- Resize
- Free drawing
- Line drawing
- Shape
- Icon
- Text
- Mask Filter
- Image Filter
Installation
- Download the latest release
- Unzip downloaded file
- Copy/paste unzipped folder in your
/site/plugins
folder
Usage
fields:
editor:
type: image-editor
layout: cards
size: medium
Properties
The field contains all the properties of the files field (layout, size, query, etc..). Also includes followings:
Property |
Type |
Default |
Description |
cssMaxHeight |
int |
null |
Canvas css-max-height |
cssMaxWidth |
int |
null |
Canvas css-max-width |
menu |
array |
['resize', 'crop', 'flip', 'rotate', 'draw', 'shape', 'icon', 'text', 'mask', 'filter'] |
It can be selected when only specific menu is used |
menuBarPosition |
string |
left |
Menu bar position('top', 'bottom', 'left', 'right') |
Options
Option |
Type |
Default |
Description |
cssMaxHeight |
int |
null |
Canvas css-max-height |
cssMaxWidth |
int |
null |
Canvas css-max-width |
menu |
array |
['resize', 'crop', 'flip', 'rotate', 'draw', 'shape', 'icon', 'text', 'mask', 'filter'] |
It can be selected when only specific menu is used |
menuBarPosition |
string |
left |
Menu bar position('top', 'bottom', 'left', 'right') |
All options optional and the values can be updated in the config.php
file and prefixed with owebstudio.tui-image-editor.
.
Sample options
<?php
// All options optional
// /site/config/config.php
return [
'owebstudio.tui-image-editor' => [
'cssMaxWidth' => 1200,
'cssMaxHeight' => 900,
'menu' => ['resize', 'crop'],
'menuBarPosition' => 'bottom'
]
];