In-page Anchors

[ViM]

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 :

Browsing the media library and adding an asset to a document

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.

[ViM]

Hello Prismic Team,

Could we have an update on that ticket ?

Do you need more infos or you get the point ?

Thanks

[Phil (Phil Snow)]

Hey,

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

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:

In-page Anchors

Hey @jerry.nummi, For your use case of the sub navigation. Something I do is use the HTMLSerializer to automatically add id's to my H2's from my rich texts. Like I do here: if (type === Elements.heading2) { var id = element.text.replace(/\W+/g, '-').toLowerCase(); return '<h2 id="' + id + '">' + children.join('') + '</h2>'; } Then I build a component that looks at the Slices on the current page, takes any H2 titles and creates a link to these. This example is in Vue, but you can e…

[jean.helou]

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.

[ts1 (Tobias Schifftner)]

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

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.

[Michal (Michał Nielubszyc)]

Hello,
Is adding in-page anchors going to be possible? We really need it for our marketing team, so that they can easily add tables of contents, document navigation etc in their blogposts. It would be much appreciated, especially as I see more than 1 year ago this topic was already discussed and actually this is a big disadvantage of using Prismic for us.
Regards

[Phil (Phil Snow)]

@kris @Michal
The team isn't working on this at the moment as this will most likely be rolled into the larger revamp of the rich text editor project. We are working hard at the minute to make it easier for our develops to push updates to the document writing room which should help this project.

If/when this changes we'll update you here.

The only thing I can recommend for a table of contents is the solution suggested above, this is what we do on our documentation website:

In-page Anchors

Hey @jerry.nummi, For your use case of the sub navigation. Something I do is use the HTMLSerializer to automatically add id's to my H2's from my rich texts. Like I do here: if (type === Elements.heading2) { var id = element.text.replace(/\W+/g, '-').toLowerCase(); return '<h2 id="' + id + '">' + children.join('') + '</h2>'; } Then I build a component that looks at the Slices on the current page, takes any H2 titles and creates a link to these. This example is in Vue, but you can e…

[Michal (Michał Nielubszyc)]

Thank you for the response.

[konrad.nojman]

Hi! It's been quite some time since the last post here.
I understand this is still a pending feature on the roadmap. I have one more use case here I want to share to take into consideration when working on it.

I am working on the Single Page landing site. So in multiple places, I have Call To Action buttons that usually link to another section on the same page. But sometimes it can link to the external pages or do some other action.
Because I can't be sure how the CTA button will be used by page editors, currently I need to both add a Link field and Key Text field (as mentioned here) to allow for both internal (scroll anchors) and external links. Of course, it's less than ideal, as stated in this thread already.

• I can't only use a Link field, because of the problem with local development
• I could use only the Key Text field and just let users post the external links as a text there, but I would lose some nice functionalities of the Prismic links
• I don't think I can use Content Relationship Fields, as my understanding is, that they only can connect to the different documents, which I don't have in my single-page landing

I'm sure the dev team has a broader perspective on how it should be developed. My quick ideas on how this feature could work from the user perspective:

• Add 1 more option to the Link field to specify any text value. So the user can just type "#some-section" and it could be used as
• Add an Anchor field or Reference field, that can be used in the content building process and appended to the page. And let the Content Relationship Fields see those anchors as a valid relationships that could be linked to.

Anyways, I'm sure I am missing a ton of complexity that comes with this issue, so I hope at least part of this message will be helpful for the product and dev team Can't wait for this ticket to be rolled out!
Thanks

[Pau]

Thanks for sharing your use case and solution @konrad.nojman

[luana.lima]

This would help my team a lot!
any update on this?

[Pau]

We don't have news for this feature at the moment @luana.lima.
Check out our progress page to see everything we're working on!

What's new - Prismic

[engineering5 (Fernando Rojo)]

I'm writing a blog post with a table of contents. I want the table of contents to link to certain sections down below. For example, each one could link to a corresponding Heading 2. I come from writing markdown so I'm super used to this feature.

This would be easy if I could simply pass an anchor string like #artist-metrics when creating a link.

[Phil (Phil Snow)]

Hi Fernando,

Here's an example of how to create a table of contents:

In-page Anchors

Hey @jerry.nummi, For your use case of the sub navigation. Something I do is use the HTMLSerializer to automatically add id's to my H2's from my rich texts. Like I do here: if (type === Elements.heading2) { var id = element.text.replace(/\W+/g, '-').toLowerCase(); return '<h2 id="' + id + '">' + children.join('') + '</h2>'; } Then I build a component that looks at the Slices on the current page, takes any H2 titles and creates a link to these. This example is in Vue, but you can e…

[anika.keller (Ani Keller)]

Any news regarding the in-page anchors?

[Priyanka (Priyanka Maheshwari)]

Hello, @anika.keller Our team hasn't implemented that feature yet, and I have no update on the same. We will update you if I have any news, or you can also check our progress page: What's new - Prismic. Thanks.

[anika.keller (Ani Keller)]

Hello Priyanka, thanks.

Unfortunately, as a user, we get this answer for pretty much everything.

We have to build workarounds for standards like an HTML anchor, which costs us time and unnecessary money

It would be nice if you could offer such standards as soon as possible.

Otherwise you will permanently lose customers like us to the competition. Since we are looking around because of these missing standards.

[Priyanka (Priyanka Maheshwari)]

Hello Anil,

I understand that it is frustrating not to have such features. Our team is redoing the editor, and I will pass your request on to them.

Thanks,
Priyanka