Skip to content
  • Documentation >
  • Content management >
  • Images >
  • Configure Image Editor

Configure Image Editor

When a content item contains Fields of the ezimage type, users can perform basic image editing functions with the Image Editor. For more information, see the user documentation.

Note

The Image Editor does not support images that come from a Digital Asset Management (DAM) system.

Note

If you intend to modify images in formats other than JPEG in image editor, consider adding a library to optimize them.

Configuration

You can modify the default settings to change the appearance or behavior of the Image Editor. You can also expand the default set of parameters to create buttons that may be required by custom features that you add by extending the Image Editor, for example, to enable changes to the color palette of an image.

To do this, under the ibexa.system.<scope>.image_editor configuration key add a settings tree similar to the following example. The settings tree can contain one or more action groups. You can control the order of actions within a group by setting the priority parameter. You can also toggle the visibility of actions within the user interface. Image Editor settings are SiteAccess-aware.

The following example sets the aspect ratio values and label names for buttons used by the Crop feature. 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
ibexa:
    system:
        default:
            image_editor:
                action_groups:
                    default:
                        id: default
                        label: Default
                        actions:
                            crop:
                                id: crop
                                priority: 1
                                visible: true
                                buttons:
                                    1-1:
                                        label: 1:1
                                        ratio:
                                            x: 1
                                            y: 1
                                    3-4:
                                        label: 3:4
                                        ratio:
                                            x: 3
                                            y: 4
                                    4-3:
                                        label: 4:3
                                        ratio:
                                            x: 4
                                            y: 3
                                    16-9:
                                        label: 16:9
                                        ratio:
                                            x: 16
                                            y: 9
                                    custom:
                                        label: Custom

Image quality

You can configure the quality of the images modified in the Image Editor with the following configuration.

The setting accepts values between 0 and 1, which corresponds to the compression level, with 0 being the strongest compression. The default quality is 0.92:

1
2
3
4
5
ibexa:
    system:
        default:
            image_editor:
                 image_quality: 0.8

Additional information

Each image can be accompanied by additional information that is not visible to the user. By default, additional information stores the coordinates of the focal point, but you can use this extension point to pass various parameters of custom features that you add by extending the Image Editor.

To modify the value of additional information programmatically, you can set a value of the Image field by using the PHP API, for example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
new FieldValue([
     'data' => [
         'width' => '100',
         'height' => '200',
         'alternativeText' => 'test',
         'mime' => 'image/png',
         'id' => 1,
         'fileName' => 'image.png',
         'additionalData' => [
             'focalPointX' => 50,
             'focalPointY' => 100,
             'author' => 'John Smith',
         ],
     ],
 ]),