Ibexa DXP v3.3 New Feature Preview: Image Editor

Ibexa DXP v3.3 introduces Image Editor, which enables you to perform key image editing operations in a quick and simple manner. The feature includes image cropping, image flipping and determination of a focal point in an image – to ensure optimal display of the image’s primary subject across devices and screen resolutions.

This is the first in a three-part preview blog series offering a sneak peek of new features included in the upcoming launch of our latest software version, v3.3, coming soon.

The built-in Image Editor feature delivered with Ibexa DXP v3.3 has been developed as a result of our customers’ desire to be able to perform basic image editing operations on uploaded images in a user-friendly and efficient manner while working on a content item in the editing interface. Although every customer and project may have different needs, we have catered for the most wanted image editing operations in this first edition of Image Editor.

The Image Editor interface consists of: 

• The image to be edited 
• A toolbar on the right with three editing options: Flip, Focal Point and Crop
• Buttons to undo or redo image edits or reset the image to its original state
• Image information below the image, displaying the current image dimension in pixels (width x height)
• Save and Cancel buttons.

The Image Editor is launched by clicking the ‘Edit’ button which is displayed on image fields while in editing mode:

Focus on a subject or enhance the visual expression of an image with the Crop functionality

The visual impact and composition of an image can be greatly improved when thoughtfully cropped. Image cropping can highlight elements in the photograph to better express the intended story or remove distracting elements. Cropping also enables you to ‘zoom in’ on a subject in the image or change the image orientation. 

The Crop option in Image Editor’s toolbar displays the available cropping formats, which include: 

• 1:1 – Square format. The image’s width and height are equal.
• 3:4 – For every 3 units of width, there are 4 units of height, creating a rectangular portrait shape.
• 4:3 – For every 4 units of width, there are 3 units of height, creating a rectangular landscape shape.
• 16:9 – Widescreen format, 78% wider than high, e.g., an image sized at 1920 x 1080 pixels.
• Custom – Allows you to crop the image as you prefer, detached from the limitations that a predefined aspect ratio holds. 

When clicking your desired format, the crop area will be activated over the image and the aspect ratio (width x height) of the crop area will appear in the ‘Crop size’ fields. You can resize the crop area or drag it to the part of the image you want to crop:  

You can discard the crop by clicking the red X symbol or execute the crop by clicking the green check mark symbol. Once executed, Image Editor will display your cropped image:

Visual examples of the predefined crop formats available in Image Editor:

Create a more compositionally pleasing image with the Flip functionality

Our eyes enter an image frame from the left and elements moving left to right are more comfortable to view. If they are moving right to left, the image may appear less pleasing on the eye. Flipping an image can therefore influence where the eye is drawn and strengthen your storytelling by leading the viewer’s eyes to important elements in the frame and create or intensify emotion. 

Image Editor allows you to flip an image either horizontally or vertically. A horizontal flip will result in a mirrored image, while a vertical flip will turn the image upside down.

This example shows how the Image Editor’s horizontal flip functionality can create less tension in an image and lead the viewer’s eyes through the frame in a more comfortable way:  

By combining the crop and flip functionalities, you can create an image that is more compositionally pleasing, more conspicuous, or achieve impressive creative effects:

Ensure optimal display of your image across devices by determining a Focal Point

The term ‘focal point’ has a variety of definitions depending on the context. In Image Editor, the Focal Point functionality lets you define the main subject of your image; the subject that should be in focus and support responsive design requirements across devices and screen resolutions.

Because the aspect ratio is not the same across all devices, the focal point will not always remain in-frame just by shrinking the image. You need to ensure that the main subject will be displayed regardless of the device used, especially for content where the image is an important part of your storytelling. 

When clicking the ‘Show point’ button, Image Editor will display the default focal point, which is placed at the center of the image. Defining the focal point of your choice is simply done by drawing the focal point cursor to the subject of the image you want to focus on. You can reset your focal point determination by clicking the red cross symbol.

Saving your image edits

When you are satisfied with the image edits you have performed and want to exit Image Editor, your edits are saved by clicking the Save button. Your image will be stored in the image repository in its new, modified state. If the image you have edited is used by more than one content item, a warning message is displayed. You can choose to save the modified image as a new image file (to be used only for the content item you currently edit) or apply the modified image to all the content items in which it is used. 

Boost your efficiency as a content creator with Image Editor 

Although Image Editor is not a replacement for Photoshop or other full-scale image editing programs, it will surely enable you to work more efficiently as a content creator whenever you need to perform basic edits to an image while creating content in your Ibexa DXP. Image Editor will also ensure that editors without access to – or experience in using – photo editing programs can perform simple image edits without involvement of graphic designers or colleagues skilled in the use of advanced editing programs. 

Make Image Editor a part of your content creation workflow!