Link / Content Relationship Templating

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.

Before Reading

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 ctx.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.

Here's the basic integration of a Link to the Web into your templates. In this example, the Link field has an API ID of web_link.

  • ejs
  • pug
  • pug (API v1)
Copy
<%
var link = document.data.web_link 
var linkUrl = PrismicDOM.Link.url(link, ctx.linkResolver)
var targetAttr = link.target ? 'target="' + link.target + '" rel="noopener"' : ''
%>

<a href=<%= linkUrl %> <%= targetAttr %>>Click here</a>
Copy
- var link = document.data.web_link
- var linkUrl = PrismicDOM.Link.url(link, ctx.linkResolver)
- var targetAttr = link.target ? { 'target': link.target, 'rel': 'noopener' } : {}

a(href=linkUrl)&attributes(targetAttr) Click here
Copy
- var link = document.getLink('page.web_link')
- var linkUrl = link.url(ctx.linkResolver)
- var targetAttr = link.value.target ? { 'target': link.value.target, 'rel': 'noopener' } : {}
 
a(href=linkUrl)&attributes(targetAttr) Click here

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 this example, the Link / Content Relationship field has the API ID of document_link.

  • ejs
  • pug
  • pug (API v1)
Copy
<% var documentUrl = PrismicDOM.Link.url(document.data.document_link, ctx.linkResolver) %>
<a href=<%= documentUrl %>>Go to page</a>
Copy
- var documentUrl = PrismicDOM.Link.url(document.data.document_link, ctx.linkResolver)
a(href=documentUrl) Go to page
Copy
- var documentUrl = document.getLink('page.document_link').url(ctx.linkResolver)
a(href=documentUrl) Go to page

Adding a link to a Media item doesn't require a link resolver.

In this example, the Link field has an API ID of media_link.

  • ejs
  • pug
  • pug (API v1)
Copy
<% var mediaUrl = PrismicDOM.Link.url(document.data.media_link, ctx.linkResolver) %>
<a href=<%= mediaUrl %>>View Image</a>
Copy
- var mediaUrl = PrismicDOM.Link.url(document.data.media_link, ctx.linkResolver)
a(href=mediaUrl) View Image
Copy
- var mediaUrl = document.getLink('page.media_link').url(ctx.linkResolver)
a(href=mediaUrl) View Image

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 should always use the Link Resolver.