Level 3

Solved

Does anyone have official documentation of cq:htmlTag?

14 replies
13000 views
Translate

I am trying to use it, but I could not find a official good documentation.

The link from the docs at the cq:htmlTag is broken

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

M

murilod74686477Accepted solution

Level 3

Replace the automatically include outer div.

I was missing cq:tagName.

My issue is solved, thank you for the help.

Just a head-ups as the documentation is broken.

Show previous replies

smacdonald2008

Level 10

what topic is broken? Let me know and I will log a bug,

Translate

M

murilod74686477AuthorAccepted solution

Level 3

Replace the automatically include outer div.

I was missing cq:tagName.

My issue is solved, thank you for the help.

Just a head-ups as the documentation is broken.

Translate

smacdonald2008

Level 10

What are you trying to do?

Translate

kautuk_sahni

Employee

Hi

I have asked Documentation team to help you here.

For you help as of now:-

To change the default div tags to something else , use cq:htmlTag nodes in your components. This lets you modify the tag , classes and id associated with the decorator tag.

Create cq:htmlTag node [primaryType:nt:unstructured] under your component.
Add cq:tagName property [type:String] with the tag to be used as value.
Add class property [type:String] with class(es) to be added to the enclosing tag **
Add id property [type:String] with id to be added to the enclosing tag

// Link:- http://www.codermag.net/2016/02/remove-component-wrapper-divs-in-cqaem.html

Using the cq:htmlTag to manipulate component divs

Out of the box AEM components creates a number of wrapper div in the generated HTML code which are used by the editing system and to identify various components in the DOM.

However sometimes this may cause unnecessary problems as the HTML structure becomes different from the one you started with.

We can use cq:htmlTag to manipulate the wrapper divs.

First we need to create a nt:unstructured node under our component.

[img] https://4.bp.blogspot.com/-8HYN7uuv7Jk/VtWYJggmyLI/AAAAAAAAAWw/8cWSNwRnLCw/s1600/cq_nodecoration%2Bexample%2B3%2Bcoderma… [/img]

This node will contain the following:

1. class - The CSS class names that may be used for styling.

2. id - The id of the element in the rendered HTML.

3. cq:tagName - The tag that will be used to represent our component in the DOM (div, span, p, etc.)

[img]https://1.bp.blogspot.com/-7PniUsdjAiA/VtWYxtivtDI/AAAAAAAAAW4/PRoAPnkJMy0/s1600/cq_nodecoration%2Bexample%2B2%2Bcoderma… [/img]

this will render the component as:-

I hope this would help you.

Thanks and Regards

Kautuk Sahni

Translate

Kautuk Sahni

Using the cq:htmlTag to manipulate component divs

Sign up

Login with SSO

Login to the community

Login with SSO