New in Sulu 1.4: Image cropping

A big part of a CMS is asset management. Because of that Sulu allows you to define multiple image formats and automatically scales and crop your uploaded images behind the scenes. But sometimes Sulu will not exactly match the crop you have imagined when defining the image formats as it crops from the center of the image by default. For this reason we have implemented multiple ways to directly influence the crops of your images.

Focus point

Arrows in the focus point slide show the direction of the crop. Arrows in the focus point slide show the direction of the crop.

The first and easier variant is to set a focus point. This allows you to define the important region of the image similar to the positioning in the media selection. Therefore you select a region on a 3x3 grid. All crops will start from the selected edge respectively from the center and spread to the other directions, as indicated by the arrows appearing on the grid.

This selection is valid for all formats and will be sufficient for most of the images being uploaded to Sulu.

Manual cropping

Manual cropping allows to define crops pixel exact. Manual cropping allows to define crops pixel exact.

The second variant jumps in when the first one does not lead to good enough results. This might be the case if there is a very small format applied to a big image or for a header image on which the positioning has to be pixel exact.

Note that in contrast to the focus point this functionality only affects one single format. This has to be selected from a dropdown showing all formats available on your website. We have also added the possibliity to define a title for each image format. If you make use of that Sulu will use the titles instead of the cryptic keys, which makes it easier for the content manager to recognize where the format is used.

So the content of your image-formats.xml files will look like in the following snippet.

<format key="640x480">
        <title lang="en">Header image</title>
        <title lang="de">Headerbild</title>
        <title lang="fr">Image l'en-tĂȘte</title>
        <title lang="nl">Header afbeelding</title>
    <scale x="640" y="480"/>

The title will also be used on the media formats tab in the overlay for images.

We hope you like the new image cropping features and look forward to your feedback!