Level 2

Solved

Creating Anchor Links in AEM 6.4

Forum|Forum|4 years ago
April 7, 2021
5 replies
13204 views

How do you create Anchor Link in AEM 6.4?

Best answer by Asutosh_Jena_

Hi @clarence_bunch

Do you mean by jump links/hash links? i.e. something with #abcd in the URL and it will take you to certain position in the website?

If this is the ask then, you can configure the id attribute to any of the component that you have on your website so that the markup will have an attribute in DOM such as:

<div id="abcd" class="Something">Some Content</div>

Now in your RTE component, you can configure the link as #(id) i.e. #abcd in this case and save the dialog. Now whenever you will click on the Some Content link, it will take you to the destination hash link.

Let me know if there is any other requirement that I might have misunderstood.

Thanks!

Asutosh_Jena_

Accepted solution

Community Advisor

Hi @clarence_bunch

Do you mean by jump links/hash links? i.e. something with #abcd in the URL and it will take you to certain position in the website?

If this is the ask then, you can configure the id attribute to any of the component that you have on your website so that the markup will have an attribute in DOM such as:

<div id="abcd" class="Something">Some Content</div>

Now in your RTE component, you can configure the link as #(id) i.e. #abcd in this case and save the dialog. Now whenever you will click on the Some Content link, it will take you to the destination hash link.

Let me know if there is any other requirement that I might have misunderstood.

Thanks!

D

dheerajmoudgil

Thanks @asutosh_jena_ for your answer.

I have a multifield which takes an RTE input. I tried same approach to create a link using the multifield RTE input but for some reason the URL field of hyperlink icon in my RTE input doesn't allows anything starting with #.
It saves the dialog, but the href attribute of the link is not rendered. Can I edit this validation anywhere?

Lokesh_Shivalingaiah

Level 10

Hi, when you say creating Anchor Links, can you give more details on where are you looking to create it ? within component, within page authoring ?

C

Clarence_BunchAuthor

Level 2

Page authoring

arunpatidar

Community Advisor

Hi, To create anchor functionality -

1. Create an anchor component for Target jump, that asks for an id and create an empty div only with id.

2. Update/extend the link component and add an option to provide anchor text(trigger point) and from java/backend or from frontend append an anchor to link(link#anchor)

Arun Patidar

C

Clarence_BunchAuthor

Level 2

From an email. I want to link to a specific image or text in the AEM page. I don't have the anchor addin. How can you accomplish this from the RTE?

Asutosh_Jena_

Community Advisor

@clarence_bunch You can configure the link of the destination page with #link to the image or text which will have an id associated with it.

So the link in RTE on the email will be something like below:

www.abc.com/abcd#someid

now the id attribute on the destination page image/text will be having the value as "someid".

Thanks!

C

Clarence_BunchAuthor

Level 2

How do we add or edit the id from an authoring perspective if we don't have access to the HTML.

Asutosh_Jena_

Community Advisor

If the website is on AEM platform and if it's managed by your team, then you should be able to author the id. If there is no way that you can update the markup in the HTML on the destination website then you cannot achieve this.

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded