Link field relative

Prismic Administrative Support Features
1

Any thought given to allowing relative links for the link field?

11 Likes
2

Hey @alexanderfountain can you give me some uses cases for relative link ? Have you tried to link to another document and to resolve the link with the link resolver to redirect to another page ?

I will anyway track this as a feature request but Iā€™m really interested in your use case.

Thanks a lot,
Renaud

3

So I created a custom type for my main navigation including label, link, and repeatable label, link fields for sub menu items. Because my blog index page is a custom template not associated with a unique document, but rather renders blog teasers, I donā€™t have a document to reference for the link. I could use a absolute link to the web, but would lose gatsby Link performance and prefetch capabilities.

What I ended up doing was adding plain text field to my ā€œmenuā€ custom type, and using that if available instead of the link field.

4

Hey @alexanderfountain, thanks for the explanation. I would still see this as a best practice to create a homepage document in prismic to resolve your link yes but moreover to manage SEO metadata. I donā€™t think we will work on relative links in the next months to come, but if there is anything new, Iā€™ll let you know.

5

Just going to be clearer on the workaround here.

My suggestion would be to create a a document in Prismic of a type for example ā€˜relativeā€™, then you create a document with the UID ā€˜other-pageā€™, finally in your rich text field you would link to to this document and in your project you would configure the link resolver to direct to this route in your document paths.

That way you could have the use of an easily linkable path in your Rich text fields.

6

Thanks Phil for responding to the flag; your idea makes a little more sense, but the engineering work to accomplish this workaround still seems quite large compared to just being able to put /relative-url/ in the link field. Do you know if this feature is projected to be worked on? I can only imagine it will make quite a few of your clients happy :slight_smile:

My current workaround is to add {relative}/link-url/ to the link field, then we have link helper function that looks for a variety of things in curly braces and handles the link accordingly. So, it works, but it would still be nice to be able to simply assign a relative url. Hope you have a lovely day!

2 Likes
7

I agree I think this would be easier, we are tracking this as an open feature request. Like Renaud said above it isn't something that we have in our immediate road map, but once we have any update on that situation we will update everyone here.

I'm also going to quote your exact use case here for the team:

Thank you also for sharing your current work around for this task, this might help others.

Have a nice day :slight_smile:

3 Likes
8

@jake.mosher I have detailed a few modelling possibilities to work around the limitations of links in prismic in Modeling buttons/links which covers pro and cons of various models to handle relative urls, anchors, custom labels, etc.

9

I will second that having a relative link option would be really nice. It would by far be the cleanest solution and avoid having to add multiple fields depending on the type of link required.

1 Like
10

Yes, also interested in something like this. I had posted in this thread before finding this one. For us, Prismic is critical but there are other CMSā€™ involved such as our ecommerce platform. Making it harder than it should be to link to a collection from a blog article without some fragile link resolver middleman. Being able to just pipe in a ā€˜/route/some-pageā€™ would be awesome!

11

Have a similar issue to anchor links and in our case its wanting relative links. For example clicking the link icon in rich text and linking to ā€œ/pages/some-pageā€ for example. Not all of our content is in Prismic.

Having absolute URLs can be challenging to work with and test around due to staging environments, especially when working with dynamic serverless staging URLs like Vercel or Netlify, etc. The absolute URL may fail in QA or UAT.

It would be nice for the Rich Text link to have a ā€˜relativeā€™ option where https:// is not appended and only the text that is added is added as the link href. This behavior could solve the same for anchor links.

Unfortunately because of this limitation we find ourselves using Key Text way more than we should have to. Relative links and anchor links should have some measure of support, IMHO.

Thank you for your time, looking forward to having solutions for this!

6 Likes
12

Hey Justin,

I moved your post to this thread.

Thank you for such a clear and precise use case. This really helps the product team when it comes to considering what we plan to implement. I can see how not having relative links in this situation could be frustrating and how the feature would save you a lot of time.

I've passed your feedback to the team and hopefully I can talk with them about this in more detail. Though as you've seen it's not something being worked on at the moment. So the workaround described above or your own solution might be the best options for the moment.

Once I have more information from the team I'll update you here.

Thanks.

2 Likes
14

This is being tracked as an open feature request.

If you have another use-case for this feature, you can 'Flag' this topic to reopen. Please use the :heart: button to show your support for the feature and check out our Feature Request Guidelines.

16

I came across this while googling for a solution for a slightly different thing. What I ended up doing is creating a rich text field with only links enabled. Not quite the solution needed here, but a reasonable solution for me creating links (in a footer).

18

Hi Donald,

I'm not sure I fully understand you solution, can you give me more details?

Thanks.

20

So this is not the most elegant solution, and several colleagues described it as "gross."

In my case, I wanted to create a static pre-rendered footer, which also an interesting problem i solved with Preval, so I created a rich text field and only enabled the hyper link wyswyg option.

Then I created a custom link resolver, and ran a quick regex like \.(com|org|net|co)$ and if it doesn't match that, strip out the leading https://, so using next/link it looks something like this:

function LinkResolver({ href, children }: LinkProps) {
  if (/\.(com|org|net|co|io)$/i.test(href)) {
    href = href.replace('https://', '')
  }

  return (
    <Link href={href}>
      <a>{children}</a>
    </Link>
  )
}

Anyway, enabling the removal of the leading https:// would be a nice touch, because it also enables custom linking like mail:to, phone, deep app links etc.

1 Like
21

Thanks for sharing :slight_smile:

23

Prismic could remove the https:// from the links... :man_shrugging:
That should tackle it!!!

In all my projects, I just replace the https:/// with / and handle internal links on a wrapper component or in the serializer...

My use case is that I use fallback lang documents, so it isn't possible to use link documents...

1 Like
27

The complexity of doing simple things like this in Prismic is a bit shocking. Why does creating a nav menu feel like rocket science?

As others have pointed out, we have dev and staging environments.

I see no solution on this yet, so what is suggested? is it a link resolver?