Creating an Image component

Enabling authors to add images to pages is a very fundamental requirement of a CMS. CQ5 lets you do this in two ways. You can add images through the rich text editor by simply dragging the images onto it. There is also an image component that comes out of the box. This works for a lot of things, but there is always a situation that requires customization(a slider for example).

Let's take a look at creating an image component.

Step 1: Right-click on your components folder and create a component called myImage (refer my previous posts if you don't know how to do this)

Step 2: Right Click on your component and create a dialog. Traverse to "/libs/foundation/components/image/dialog/items/image" and copy the image code and paste it under the items (widget collection) node of the dialog.

Notice that we are not creating this node under a tab panel. That because this particular xtype works well as a tab and not a widget (even though its a widget).
The node will have a lot of properties but the only essential ones are

• fileReferenceParameter
• name
• xtype 

xtype as you already know tells what kind of widget it is. (html5smartimage)
name is the name with which the value will be stored.fileReferenceParameter is the path to the image in the DAM. This value will come up only if you drag and drop the image onto the panel.

map, crop, and rotation are all self-explanatory. you can delete them if you don't want your authors to have that control. If these properties are deleted then the options won't show up in the dialog.

The other fields come into the picture when you want the authors to be able to upload pictures from the hard drive. Not a good choice, its best to allow the use of pictures that are only in the DAM to maintain a common collection of images that have been arranged with a convention. As an added bonus DAM gives you different renditions of the same image.

If you check out the image component in the foundation they have written a chunk of java code. you won't have to do that if the image has been drag dropped. The fileReferenceParameter will have the path to the image. All you have to do in myImage.jsp is write

<%@include file="/libs/foundation/global.jsp"%>
<img src="<%=properties.get("fileReferenceParameter",String.class)%>"/>
//or if you prefer jstl

<img src="${properties.fileReferenceParameter }"/>

you can disable the upload feature by adding allowUpload(Boolean) - false property to your widget.