Templating Link & Content Relationship fields
The Link field is used for adding links to the web, to documents in your prismic.io repository, or to files in your prismic.io media library. The Content Relationship field is a Link field specifically used to link to a Document.
This page assumes that you have already required the prismic-dom library as shown below.
var PrismicDOM = require('prismic-dom');
This page also assumes that you have retrieved your content and stored it in a variable named document.
It is also assumed that you have set up a Link Resolver stored in the variable linkResolver.
A note about Link Resolving
When integrating a Link in your templates, a link resolver might be necessary as shown & discussed below. To learn more about this, check out our Link Resolving page.
Link to the Web
Here's how to retrieve the url for a Link to the Web which has the API ID of web_link.
var PrismicDOM = require('prismic-dom'); var link = document.data.web_link; var linkUrl = PrismicDOM.Link.url(link, linkResolver); var targetAttr = link.target ? 'target="' + link.target + '" rel="noopener"' : '';
Link to a Document / Content Relationship
When integrating a Link to a Document in your repository, a Link Resolver is necessary as shown below. To learn more about this, check out our Link Resolving page.
In the following example the Content Relationship (Link to a Document) field has the API ID of document_link.
var PrismicDOM = require('prismic-dom'); var docLink = PrismicDOM.Link.url(document.data.document_link, linkResolver)
Link to a Media Item
Here's how to retrieve the url for a Link to a media item which has the API ID media_link.
var PrismicDOM = require('prismic-dom'); var mediaLink = PrismicDOM.Link.url(document.data.media_link, linkResolver)
Using a Link Resolver
Note that all the examples above use a Link Resolver to output the link. This is only required for a Link to a Document.
If you know that your link will always be to Media Item or to the Web, then you can remove this. If the link is to or might be to a Document, then you need to use the Link Resolver.
Was this article helpful?
Can't find what you're looking for? Get in touch with us on our Community Forum.