I have recently devel­oped a sam­ple CQ page com­po­nent that extends the exist­ing Image com­po­nent and adds a “tag­ging” fea­ture that mim­ics Facebook’s or Flickr’s one, so I thought this could be a nice oppor­tu­nity to write a series of blog posts using this com­po­nent as an exam­ple of how to extend an exist­ing CQ com­po­nent, adding some nifty dynamic, client-side features.

The first arti­cle in the series describes the component’s func­tion­al­ity, it includes a video and a pointer to the source code. The next few install­ments will delve into the imple­men­ta­tion details.

How it works

When a user requests the cre­ation of a tag, a square box that can be moved and resized is over­laid on the image. The cre­ation of the tag is com­pleted when the users enters a name for the tag. The name can be arbi­trary or can be the name of a CQ user, selected from a drop-down list with auto-completion. In case an exist­ing user is selected, the tag’s prop­er­ties con­tain the path of the resource cor­re­spond­ing to the user and the tag is ren­dered as a link to the user’s pub­lic pro­file page in the Geometrixx Out­doors site.

Exist­ing tags will appear when the user hov­ers on the tag’s bound­ing box and can be deleted by click­ing on the “X” icon in the box’s corner.

See this video for a usage demon­stra­tion. The first half of the video shows the addi­tion of the com­po­nent to a page on the author instance; the sec­ond half shows how to tag users in the pub­lish environment.

This is still a work in progress. If you have any issues, write me a note at ugo@​adobe.​com.
Source code for the project can be found at https://​github​.com/​u​g​o​c​e​i​/​c​q​-​t​a​g​g​a​b​l​e​-​i​m​age. You will have to clone the repos­i­tory 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 cre­ate tags, users must have per­mis­sion to cre­ate nodes under the component’s node itself.

The client-side tag­ging code is based on a mod­i­fied ver­sion of Karl Mendes’ jQuery Photo Tag Plu­gin.

5 comments
davidjohn051
davidjohn051

Exist­ing tags will appear when the user hov­ers on the tag’s bound­ing box and can be deleted by click­ing on the “X” icon in the box’s corner. 

free vpn accounts

http://freevpn.me/accounts

FarzeenKhan
FarzeenKhan

Exist­ing tags will appear when the user hov­ers on the tag’s bound­ing box and can be deleted by click­ing on the “X” icon in the box’s corner.

<a title="followfy" href="http://www.followfy.com">followfy</a>