I have recently developed a sample CQ page component that extends the existing Image component and adds a “tagging” feature that mimics Facebook’s or Flickr’s one, so I thought this could be a nice opportunity to write a series of blog posts using this component as an example of how to extend an existing CQ component, adding some nifty dynamic, client-side features.
The first article in the series describes the component’s functionality, it includes a video and a pointer to the source code. The next few installments will delve into the implementation details.
How it works
When a user requests the creation of a tag, a square box that can be moved and resized is overlaid on the image. The creation of the tag is completed when the users enters a name for the tag. The name can be arbitrary or can be the name of a CQ user, selected from a drop-down list with auto-completion. In case an existing user is selected, the tag’s properties contain the path of the resource corresponding to the user and the tag is rendered as a link to the user’s public profile page in the Geometrixx Outdoors site.
Existing tags will appear when the user hovers on the tag’s bounding box and can be deleted by clicking on the “X” icon in the box’s corner.
See this video for a usage demonstration. The first half of the video shows the addition of the component to a page on the author instance; the second half shows how to tag users in the publish environment.
This is still a work in progress. If you have any issues, write me a note at firstname.lastname@example.org.
Source code for the project can be found at https://github.com/ugocei/cq-taggable-image. You will have to clone the repository and build the project using Maven.
Tags are stored inside a folder called “tags” that is a child of the component’s instance node. In order to create tags, users must have permission to create nodes under the component’s node itself.
The client-side tagging code is based on a modified version of Karl Mendes’ jQuery Photo Tag Plugin.