How to create an anchor link to a Sitecore rendering

Question

We are using Sitecore 10.1 and GlassMapper 5. We would like to create anchor links to renderings on the same page and to other pages.

Ideally we'd like to use the general link field type to generate these links. Is there an easy way to generate the anchors without having a control with a link field to create the anchors on each rendering.

Also is there an easy way to select such links from the anchor box in the insert internal link dialog?

Answer 1

This is an out-of-the-box feature of Sitecore's Horizon editor. As you are already on Sitecore version 10.1 you can use Horizon editor to link to an anchor on the current or another page:

1. In the Content tree, navigate to the page where you want to create an anchor link;
2. Click the Edit content button for the rich text field where you want to create the anchor link;
3. In the opened Visual editor, select a text that you want to format as a link and click the Create or edit hyperlink icon in the editor panel on the right;
4. In the Add link panel, in the Link type field, select External URL;
5. For the anchor link on the CURRENT page: in the URL field, enter #<anchor-name>; for the anchor link on ANOTHER page: expand the Optional parameters section and enter <anchor-name> (without #!) in the Anchor field;
6. Click the Close icon to close the Add link panel;

You can create anchors programmatically at a rendering level or give your content editors more flexibility and allow them to create anchors themselves in rich text field - in the HTML code an anchor can be inserted using the format id=“anchor-name”.

Find more details here.