Templating the Link & Content Relationship field

The Link field is used for adding links to the web, to documents in your Prismic repository, or to files in your Prismic media library. The Content Relationship field is a Link field specifically used to link to a Document.


Before Reading

This article assumes the following:

1. That you have saved the document object in a variable named document as shown in the Retrieve the document object page.

2. That you have already included and installed the prismic-dom library.

3. That you have set up a Link Resolver stored it in a variable named linkResolver.

A note about Link Resolving

When integrating a Link / Content Relationship in your templates, a link resolver might be necessary as shown & discussed below. To learn more about this, check out the Link Resolving with Javascript page.

Link to the Web

Here's how to access the url for a Link to the Web. In this case the Link field has the API ID of web_link.

Copy
const PrismicDOM = require('prismic-dom');

const linkUrl = PrismicDOM.Link.url(document.web_link, linkResolver);

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 with Javascript page.

In the following example the Content Relationship (Link to a Document) field has the API ID of document_link.

Copy
const PrismicDOM = require('prismic-dom');

const docLink = PrismicDOM.Link.url(document.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.

Copy
const PrismicDOM = require('prismic-dom');

const mediaLink = PrismicDOM.Link.url(document.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 / Content Relationship field.

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.