2.18. Image editor (PRIVATE)

Owned by Karol Schönsee
Last updated: Jun 23, 2023
3 min read

The following feature is not part of default content constructor module. It requires installation of additional module which is currently only available to creativestyle merchants.

In order to be able to edit images directly in the admin panel, the admin user can work with the Image editor

The image editor is based on the open-source library Filerobot Image Editor.

Filerobot Image Editor Demo

 

How it works

In the Magento admin, you can open the media library (e.g. when working with image teasers or adding images via WYSIWYG editor) a new button Edit image was added:

It opens the image editor with the selected file. You can either upload a new image and edit it or edit an existing image.

Cropping

Cropping allows the editor to adjust the framing, size, and focus point of shop images for optimal impact on delivery.

In order to crop image, an admin editor can choose from preset aspect-ratios or use the custom option.

Please note that square and rectangle presets from the screen are custom Rieker options. In order to customize the editor in your project pass your setting in the xml (see bottom section of this documentation)

Finetune

Change the brightness of your image.

Filters

Add various fancy filters your image.

Watermark

In order to protect images place a discrete logo, an image, or a simple text line as a watermark. Placement and orientation are up to you.

Drawing

Enrich and collaborate directly on your media.

Resize

Scale your image.

In order to save image click red Save button and give the image a new name. The edited image is saved in the same folder as the original image. You can choose between png or jpg formats. Please do not use webp, as there is another image optimization on the server side and also it is not possible to save webp in magento.

 

When being done with editing, click “save” on the top left corner. Here you can enter a filename and select the filetype (JPG, PNG, JPEG, WEBP). Also you can define the resolution.

After saving the edited image, you can select it in the media library.