How to display clean image path URLs in Adobe CQ5

Displaying the proper or clean image URL in Adobe CQ5 can be accomplished using the “fileReference” property from the component’s properties object and using it in the src attribute value.

If your dialog is set up the way the dialog is in the foundation image component (/libs/foundation/components/image), then the following JSP code can be used to display the direct path for the image showing the proper (clean)  filename.

Example:

<img src=”${properties.fileReference}” alt=”${properties.alt}” />

to get

<img src=”/content/dam/geometrixx/icons/magic-wand.png” alt=”Testing” />

The following items should be taken into consideration when considering using the “fileReference” property.

• You lose image manipulation: no resize, no crop, etc.
• Ensure proper error handling is in place to verify that node referred to in fileReference is actually there and is a DAM asset.
• Disable the image upload in your dialog or include a check to use the Image object if there is an uploaded file.

Following is the screen shot for an image in content repository if we upload an image:

Custom Image Component

Headstand Media has created a Custom Image Component for Adobe CQ5 that enables content authors to more conveniently select these image path options without needing to configure Adobe CQ5 in the above manner. This component is offered free to any Adobe CQ5 license holder through the Package Share feature of Adobe CQ5.