RichText Field : "link to a document" with an anchor tag

Hey Prismicu Teamu,

I have a simple question :

in a RichText field, how do I create a “link to a document” with an anchor tag ?

Thanks

Duplicate of In-page Anchors

No it’s not, the author of the linked post is trying to make :

  • a link to the web
  • an anchor in the same page

Oh, my apologies! Please could you add a bit more information on what you are hoping to achieve?

Are you trying to create something like a table of contents?

Of course, I’ll try to explain a bit more.

So in a RichText, using the “hyperlink” button, I would like to :

  • link to a Document (that means an internal content, with all the usual logic from Prismic)
  • add an hash to that link object (so I can use that value in my HTML), it could be a simple optional text input

This is not an attempt to create a “one page navigation through anchor menu” or a “table of contents”.

Just the way any website make a reference to a certain part of a web page, for both UX and A11Y concerns.

As an example, the documentation of Prismic includes anchors to specific sections :

Adding #search-and-browse-your-media at the end of the url allows you to jump to the corresponding H2 on page load.

That’s pretty basic html5 stuff here, nothing fancy.

2 Likes

Hello Prismic Team,

Could we have an update on that ticket ?

Do you need more infos or you get the point ?

Thanks

Hey,

Sorry about the delay. :disappointed_relieved: This slipped through the cracks, forum teething issues. :upside_down_face:

Unfortunately this isn’t possible at the moment, though I agree that this would be really useful. I’m tagging the @features-team so they can consider this is future product improvements.

Although I don’t believe the team has the bandwidth to implement this for the foreseeable future. If / When we have any updates on this we will update you here.

Thanks.

Sidenote: For anyone searching for the ‘table of contents’ use case, we’ve posted a solution here:

Hi,

I outlined a few possible strategies on how to model links in Modeling buttons/links

I have this exact problem of having links in a paragraph that lneed to lead to specific parts of another document. The paragraph is a RichText, and after trying a few things I used a link to a “link” document instead of linking directly to the target document.
My link document looks like this:

{
  "Main": {
    "id": {
      "type": "Text",
      "config": {
        "label": "id",
        "placeholder": "Prismic id"
      }
    },
    "text": {
      "type": "Text",
      "config": {
        "label": "text"
      }
    },
    "href": {
      "type": "Text",
      "config": {
        "label": "href"
      }
    },
    "anchor": {
      "type": "Text",
      "config": {
        "label": "anchor"
      }
    },
    "alt_link": {
      "type": "Link",
      "config": {
        "label": "alt_link"
      }
    },
    "appearance": {
      "type": "Select",
      "config": {
        "options": [
          "link",
          "button"
        ],
        "default_value": "link",
        "label": "appearance"
      }
    }
  }
}

On the templating side, I systematically prefetch all the fields of link documents using fetchLinks and in the link resolver when I resolve a link to a document of type link I use more logic to resolve the actual href (either based on the href field or on the content of the alt_link field, combined with the anchor field to create the final link)
This works but requires editors to manually create the necessary link documents when simple links are not enough

The reason for the href is to be able to easily build relative links to routes which are not yet declared in prismic (app entry points mostly for which we don’t have documents yet because work in progress).

I would really like to have an anchor option, ideally editors would be able to select the title from the target document they want to point to.

2 Likes

Hey guys,

we also see the extreme need to have more linking options. Therefore I would also suggest to add an option for “Open in new Tab” for normal documents.

Two ways to get around this:

  1. Use normal links and you can use anchors and open in new tab (stupid if document urls change…)
  2. Use Google Optimize :wink:

Onpage Navigation
For onpage navigation we use two slices. One slice with anchor information and one slice to define the navigation positon and theme. With these information you can build a pretty good onpage navigation.

1 Like