How Do I Wagtail?
How Do I Wagtail?
When using the paragraph editing tool, make sure to use the H2 and H3 buttons in the markup bar to ensure headings are marked up correctly. Doing so will let the CMS auto-generate anchors for these headings.
As an important note, make sure not to mark up the heading text itself outside of "setting the heading", as things like bolding or adding italics will interfere with generating the anchors (additionally, heading styling from our style guide assumes no additional markup is used, so that's a good rule to follow in general).
In order to find out what the anchor is, you can either preview the page, or you can publish it and then view the live version - with the page open in the browser:
You will see that the heading has a little drop down icon, which you can click to reveal the anchor element for this heading. The anchor element should have an "id" attribute, which is the important bit we need:
The text in this id attribute is what we can use to directly link to the anchored heading on the page. If the id attribute reads "purchasing-adult-and-youth-tickets", for example, then the associated direct link to that heading consists of the page URL plus "#purchasing-adult-and-youth-tickets" added to the end of that URL.
To link to a page header that was created by the above approach, the "link" button in the paragraph editor can be used to turn any stretch of text into a link. After selecting some text and pressing the link button:
Pick "external link" in the link dialog, and use the live URL for the page the header is on, with the anchor id added. E.g. if the page is our campaigns/eu-misinformation page, and the anchor id attribute for the heading we want to directly link to reads "tools", the external link should be as shown:
Save draft or publish and your anchor links should be set up. Remember to test your links to make sure they're jumping to the sections you want them to jump to.