Overriding views

This topic shows you how to use the Cloudinary tag library provided by Jahia. The tag library generates a URL that is compatible with Cloudinary network. You can modify parameters in the URL to transform how images are served from Cloudinary to your site.

First, clone and deploy the cloudinary-digitall-views sample module from github. Then, deploy the module on your Jahia server and add it to the Digitall site that you created previously.

The Cloudinary taglib is made available by including the cloudinary-integration dependency in the pom.xml file

<plugins>
   <plugin>
      <groupId>org.apache.felix</groupId>
      <artifactId>maven-bundle-plugin</artifactId>
      <extensions>true</extensions>
      <configuration>
         <instructions>
            <Jahia-Module-Priority>100</Jahia-Module-Priority>
         </instructions>
      </configuration>
   </plugin>
</plugins>

<dependencies>
   <dependency>
      <groupId>org.jahia.modules</groupId>
      <artifactId>cloudinary-integration</artifactId>
      <version>1.0.0-SNAPSHOT</version>
      <scope>provided</scope>
   </dependency>
</dependencies>

To modify the view, open the project in your favorite IDE and locate the person view under ./src/main/resources/jnt_person/html. The Jahia Cloudinary taglib is imported in the view by the following line.

<%@ taglib prefix="cl" uri="http://www.jahia.org/tags/cloudinary" %>

The following code (line 47) uses the taglib:

<img src="<cl:url node='${photo.node}' width='686' crop='fill' gravity='auto__face' raw="ar_1__1,r_max,e_grayscale" />"
     alt="${name}"/>

You can provide values for the following attributes to apply transformations on an image and have it served by Cloudinary:

• node (required)
  An image node used to derive the path of the asset to be displayed
• width (optional)
  Defines the width of the target image. Omitting the value or supplying a value of 0 will default to the width of the source image.
• crop (optional)
  The mode used by Cloudinary to perform image cropping, for example, scale, fit, fill, and crop.
• gravity (optional)
  The mode used by Cloudinary that determines the focus point for the applied transformation
• raw (optional)
  Passes any number and valid combination of transformations to be applied on target image