Rendering Links / Link to Media

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 Link to Media field is a specific type of Link that allows a content author to only select a link to an item from the Prismic Media Library. This page will show you how to render these two types of fields.

There is another specialized link type called a Content Relationship which is covered in another article.

Before Reading

This page assumes that you have retrieved your content and stored it in a variable named document as shown in theĀ Retrieve the document object page.

Link types are Link.document, Link.web, Link.image, and Link.file. You need to use these in your project code to handle all the different possible link types. We'll show you each one then provide an example with all of them together.

Here's how to render a web link type. In this example we are restricting our code to 'Link.web' type and we have added rel="noopener" to the link target as a precaution to avoid "tab nabbing" . The Link field here has the API ID of web_link.

Copy
import { Link } from 'prismic-reactjs'

let target = {}
if (document.web_link.target) {
  target = {
    target: document.web_link.target,
    rel: "noopener"
  }
}

if(document.web_link._linkType === 'Link.web') {
  return (
    <a href={Link.url(document.web_link)} {...target}>Web Link</a>
  )
}

Target blank with GraphQL/Gatsby

Please note that managing the Html target attribute in Prismic is not implemented yet in the GraphQL API. A feature request has been created for this, so the first if condition in the code snippet above will not do anything until this is implemented.

Here's how to render a Link.document link type. In this example, this Link field has the API ID of document_link.

Copy
import { Link } from 'prismic-reactjs'
import { linkResolver } from 'gatsby-source-prismic-graphql'

if(document.document_link._linkType === 'Link.document') {
  return (
    <a href={Link.url(document.document_link, linkResolver)}>Go to page</a>
  )
}

Here's how to render a generic Link field of the Link.image link type. In this case, the Link field has the API ID of media_link.

Copy
import { Link } from 'prismic-reactjs'

if(document.media_link._linkType === 'Link.image') {
  return (
    <a href={Link.url(document.media_link)}>View Image</a>
  )
}

Here's how to render a generic Link field of the Link.file link type. In this case, the Link field has the API ID of media_link.

Copy
import { Link } from 'prismic-reactjs'

if(document.media_link._linkType === 'Link.file') {
  return (
    Click <a href={Link.url(document.media_link)}>here</a> to download the file.
  )
}

A full example

In this full example, you can see how to combine each of the snippets above to be able to handle any type of link. In this case, the API ID of the Link field is generic_link.

Copy
import React from 'react'
import { graphql } from 'gatsby'
import { Link } from 'prismic-reactjs'
import { linkResolver } from 'gatsby-source-prismic-graphql'

const Page = ({ data }) => {
  const prismicContent = data.prismic.allPages.edges[0]
  if (!prismicContent) return null
  const document = prismicContent.node

  if(document.generic_link._linkType === 'Link.document') {
    return (
      <a href={Link.url(document.generic_link, linkResolver)}>Go to page</a>
    )
  } else if (document.generic_link._linkType === 'Link.web') {
    let target = {}
    if (document.generic_link.target) {
      target = {
        target: document.generic_link.target,
        rel: "noopener"
      }
    }
    return (
      <a href={Link.url(document.generic_link)} {...target}>Web Link</a>
    )
  } else if (document.generic_link._linkType === 'Link.image') {
    return (
      <a href={Link.url(document.generic_link)}>View Image</a>
    )
  } else if (document.generic_link._linkType === 'Link.file') {
    return (
      <p>
        Click <a href={Link.url(document.generic_link)}>here</a> to download the file.
      </p>
    )
  } else {
    return null
  }
}

export const query = graphql`
  query {
    prismic {
      allPages(uid: "test-page") {
        edges {
          node {
            generic_link {
              ... on PRISMIC_Linked_page {
                _linkType
                _meta {
                  uid
                }
              }
              ... on PRISMIC__ExternalLink {
                _linkType
                url
              }
              ... on PRISMIC__ImageLink {
                _linkType
                url
              }
              ... on PRISMIC__FileLink {
                _linkType
                url
              }
              _linkType
            }
          }
        }
      }
    }
  }
`

export default Page

Using a Link Resolver

Note that a Link Resolver is only required for a Link to a Document. You can learn more about link resolving in this article.

The Link to a Media field only allows a content author to select a Link to a Media item. This makes rendering this type of field more simple than a normal Link field, because the options are limited.

In this example, the Link to a Media field has the API ID of media_link.

Copy
import React from 'react'
import { graphql } from 'gatsby'
import { Link } from 'prismic-reactjs'

const Page = ({ data }) => {
  const prismicContent = data.prismic.allPages.edges[0]
  if (!prismicContent) return null
  const document = prismicContent.node 

  if (document.media_link._linkType === 'Link.image') {
    return (
      <a href={Link.url(document.media_link)}>View Image</a>
    )
  } else if (document.media_link._linkType === 'Link.file') {
    return (
      <p>
        Click <a href={Link.url(document.media_link)}>here</a> to download the file.
      </p>
    )
  } else {
    return null
  }
}

export const query = graphql`
  query {
    prismic {
      allPages(uid: "test-page") {
        edges {
          node {
            media_link {
              ... on PRISMIC__ImageLink {
                url
                _linkType
              }
              ... on PRISMIC__FileLink {
                _linkType
                url
              }
            }
          }
        }
      }
    }
  }
`

export default Page