Creating Control Sets and Filters for the Image Editor

concrete5 version 7 shipped with an exciting, full-featured image editor directly accessible from within the File Manager.

The Image Editor provides simple cropping, rotation and resizing controls, and some simple, fun image filters. Extending this functionality is something that developers can do.

Extension Points

Image editor extensions give you the ability to add html into the image editor sidebar and control the editing image using javascript. There are two types of extensions in concrete5, "control" and "filter". Controls manage things like resizing and rotating an image while filters just change the imagedata to do things like blur or brighten the active image.

Adding a control with configuration

Image editor configuration lives under its own group imageeditor, to modify this group create and edit application/config/imageeditor.php. Extensions live underneath the extensions item so a proper image editor config file looks something like:

<?php
return array(
'extensions' => array(
// Name the item in the extensions array so that we can easily override it
'custom_extension' => array(
// Define the type as ImageEditorExtensionControl
'type' => Concrete\Core\ImageEditor\ImageEditor::ImageEditorExtensionControl,
// Give it a cool display name
'name' => 'My Custom Extension',
// Give it a neat handle
'handle' => 'custom_extension',
// Provide the name of a registered javascript asset
'src' => 'my_javascript_asset',
// Provide the path to a view
'view' => 'editor/controls/custom_extension',
// List the additional assets you want added to the page, make the key the asset handle and the value an array of types
'assets' => array(
'my_javascript_asset' => array('css')
)
)
)
);

Adding a control with code

You can retrieve the editor object by using the `editor/image/core' application binding:

<?php
$editor = \Core::make('editor/image/core');

Using the core extension class

Concrete5 provides an EditorExtensionInterface implementation that is easy set up without having to extend any classes

<?php
// Create a new extension instance
$extension = new \Concrete\Core\ImageEditor\Extension();
// Set name and handle
$extension->setName('My Custom Extension');
$extension->setHandle('custom_extension');
// Set the view
$view = new View('path/to/view');
$extension->setView($view);
// Create a new JavaScript asset
$asset = new \Concrete\Core\Asset\JavascriptAsset();
$asset->mapAssetLocation('imageeditor/controls/custom.js');
$extension->setExtensionAsset($asset);
// Add additional assets
$asset = new \Concrete\Core\Asset\CssAsset();
$asset->mapAssetLocation('imageeditor/controls/custom.css');
$extension->addAsset($asset);
// Add the extension to the editor as a control
$editor = \Core::make('editor/image/core');
$editor->addControl($extension);
// If this extension is a filter, you can run `$editor->addFilter` instead of `$editor->addControl`

Providing your own implementation

The core image editor expects only implementations of EditorExtensionInterface to be added, because it's an interface
we can provide a completely custom implementation