Image transformation in WCM

Alfresco leverages the power of ImageMagick for image transformations. Refer to Chapter 2, Installation and Configuration for installing ImageMagick. Alfresco JavaScript provides some APIs to perform image transformations. The prerequisite for this is to have ImageMagick installed. The Script node has the APIs mentioned in the following section for image transformation.

Image transformation APIs

Alfresco provides the following APIs for image transformations. transformImage is overloaded with different parameters. You can use any of these based on your requirement:

  • transformImage(string mimetype): This will transform an image to a new type specified in mimetype and will return the transformed image node if successful or null if failed.
  • transformImage(string mimetype, string options): This will transform an image to a new type specified in mimetype by applying the supplied ImageMagick options and will return the transformed image node if successful or null if failed.
  • transformImage(string mimetype, ScriptNode destination): This will transform an image to a new type specified in mimetype and will return the transformed image node if successful or null if failed. A new image document will be created in specified destination folder.
  • transformImage(string mimetype, string options, ScriptNode destination): This will transform an image to a new type specified in mimetype by applying the supplied ImageMagick options and will return the transformed image node if successful or null if failed. A new image document will be created in the specified destination folder.

Configuring new action for image transformation in WCM

Following are the steps to configure image transformation as an action in Alfresco.

  1. Configure action for transform image in web-client-config-custom.xml file as:
    <config>
<actions>
<!-- Transform Image Action -->
<action id="tranform_image">
<permissions>
<permission allow="true">Write</permission>
</permissions>
<evaluator>org.alfresco.web.action.evaluator. WCMWorkflowEvaluator</evaluator>
<label-id>title_action_transform_image</label-id>
<image>/images/icons/action.gif</image>
<action>browseSandbox</action>
<script>/Company Home/ Data Dictionary/Scripts/transform_image.js</script>
<params>
<param name="id">#{actionContext.id}</param>
</params>
<target>new</target>
</action>
</actions>
</config>
  2. Add this action in the action group for avm_file_browse in the web-client-config-custom.xml file, as follows:
    <config>
<actions>
<action-group id="avm_file_browse" replace="true">
<show-link>false</show-link>
<action idref="edit_file" />
<action idref="update_file" />
<action idref="preview_file" />
<action idref="cut_avm_node" />
<action idref="copy_avm_node" />
<action idref="file_details" />
<action idref="unlock_file" />
<action idref="delete_file_browse" />
<action idref="tranform_image" />
</action-group>
</actions>
</config>
  3. Now we need to create JavaScript file, which will be executed when this action is performed. This JavaScript will be responsible for transforming the image. The JavaScript transform_image.js will look as follows:
    logger.log("called :: " + args["id"]);
var path = args["id"];
var node = avm.lookupNode(path)
logger.log("node : "+ node);
var thumbImage = node.transformImage("image/png", "-resize 120",node.parent);
  4. Here, you can specify any image type for transformation instead of image/png and also can specify the required options as the second argument in transformImage API.
  5. Upload this JavaScript in the Company Home | Data Dictionary | Scripts folder as shown in the following screenshot:
    Configuring new action for image transformation in WCM
  6. Now the new action for Image Transformation will be available for any content in WCM.

Using image transformation action in WCM

In this section, we will see how we can use this action, which we configured in the previous section.

  1. Go to the Cignex web project and click on Browse Website. Browse to the ROOT | images folder. You can see the images available there as shown in the following screenshot:
    Using image transformation action in WCM
  2. Currently, we have the Expand-snap.JPG image file available. We will apply the Transform Image action on this and we will have the same image transformed into PNG as Expand-snap.png file with resizing.
    Using image transformation action in WCM

Note

Download the sample code files from the Packt website.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset