Crop Image in Hybris Product Cockpit

Crop Image in Hybris Product Cockpit

The default hybris, it is required to upload separate image variants for different resolutions and purposes. As a rule, these images are downscaled copies of the larger image. In OOTB hybris you need to resize/crop the images manually using 3rd party software installed on your PC.

There are a couple of reasons why SAP didn’t integrate the automatic crop and resize into the platform.

The first one is that different variants may have different proportions and cropping may not work well for some images.Smart cropping needs an intervention of the designers, so you need to provide them with the appropriate tools.

The second reason is that a dumb resize won’t work for the images that are full of small details or small fonts (and it is important to leave them readable)..


To enable the crop feature in Product Cockpit We have to follow the below steps.

Step 1. Create an yempty extension.

Step 2: Create folder yourextensionname+ cockpits in resources folder of your extension.

This folder contains the spring configuration information of the corresponding cockpit.

Please find below screen shot.

We have to give this Spring information to corresponding cockpits. Then Application Context loads this Spring beans files. Please find below screen.

Step 3: we have create another folder youextensionname+cockpits-config for Configurations.

These files contains Editor Area , Brower Area And Navigation Area Related information.


For Our Crop Image we have to do changes in Media Type and that’s is at Editor Level . So I have to Select file editorArea_Media.xml

Below is Sample file.

Create Custom class for this and Add Crop Image Button on this class. Once click on this Button save this image to DAM.

Crop Image.zul  :

This is the file showing the Crop Image Window (step4 window)



About The Author

Leave a Reply