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.

24 comments
AmezingLive
AmezingLive

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.

search engine optimization files http://www.completeandutter.tv/

burnhamresources
burnhamresources

All are highly skilled business, recruitment and HR professionals with extensive commercial experience and relevant professional qualifications, with many having run their own businesses. The experience and skill of our consultants is our greatest strength and we take great pride in being able to offer a superior service as a direct result.


  “…high-level knowledge of recruitment…”


Importantly, our consultants are all carefully selected professionals. Whilst all have high-level knowledge of the recruitment process, each individual also has specific expertise which relate to different aspects of the recruitment lifecycle.


    “…a mix of recruitment, HR and business professionals…”


http://www.burnhamresources.co.uk/our-consultants/ 

jackman301
jackman301

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.

pure garcinia cambogia extract reviews http://garcinia-cambodia.com/

FarzeenKhan
FarzeenKhan

The facial was nothing impressive....just an inexpensive collagen mask that you can buy at a beauty supply store. At least the mask was put on correctly.

<a title="massage Parlour in London" href="http://londonadultmassage.blogspot.com/">massage Parlour in London</a>

AmezingLive
AmezingLive

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.

interserver coupon code 2015 http://mycoupon2014.blogspot.com

dial9259
dial9259

<p>The blessed <strong><a href="http://www.hanumanchalisa.yantra.co/">Hanuman Chalisa Yantra</a></strong> is a one-of-a-kind gold-plated Yantra with <strong>Complete <a href="http://www.hanumanchalisa.yantra.co/">Hanuman Chalisa</a> </strong>printed in a miniature form, which is visible to naked eyes. This Yantra is Made-in-European Union with a patented technique for such small-scale inscription and comes in form of a beautiful pendant. This cutting-edge European technology results in engraving of miniature text permanently on a crystal glass. The gold plating on the pendant is of high-quality and long lasting. The back of Yantra is with Hanuman Raksha Kavach engraved to protect the one, who wears it, from all evil.</p>

<br />

<p>There cannot be a better way of keeping <a href="http://www.skycloudid.com/hanuman-chalisa-Yantra">Hanuman Chalisa yantra</a> around, which in fact is like living in the shadow of Lord’s blessings always. As it is said, no evil can touch the one who is blessed with Lord’s blessings. This divine Yantra comprises complete Hanuman Chalisa, not just a single verse, making it a unique treasure for all devotees. This amazing Yantra comes with lifetime warranty of the inscription and is backed with an Authenticity certificate. The Yantra comes with a free gold-plated plated chain.</p>

<br />

<p>Give spirituality a chance to heal your life, come to the shadow of Lord’s blessings, feel the divine energy nourishing your thoughts, wear the Yantra today!</p>

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>