Template Content

On this page, you'll learn how to template content from the Prismic API in your Express application.


Intro to templating

Content from Prismic comes in different types. Some are simple fields, like Numbers or Booleans. Others are structured fields, like Titles, Rich Texts, and Links.

Before Reading

This article assumes that you have queried your API and saved the document object in a variable named document, as described in Fetch Data.

Simple field types can be injected directly into your application:

Copy
<span>$<%- document.data.example_number %></span>
<!-- <span>$74.5</span> -->

@prismicio/helpers includes special utilities for rendering structured fields. To render the Rich Text field, for instance, use prismic.asHTML():

Copy
<%- ctx.prismicH.asHTML(document.data.example_rich_text) %>

To get started, let's look at the structure of the API response.

The structure of the API response

When you use Prismic's query methods, you will see three different types of API responses:

  • paginated responses, which return a response object
  • get-all responses, which return a results array
  • get-single responses, which return a document object

In fact, these are all part of the same structure: the response object contains the results array, in which each item is a document object.

Here's more detail about what that each looks like:

The response object

When you make a query by get() to the Prismic API, you will get a JSON object containing pagination information and an array of query results. Here is a truncated example of an API response containing some simple fields:

Copy
{
  page: 1,
  // ...
  results: [
    {
      uid: 'example_document',
      // ...
      data: {
        example_date: '2020-12-10',
        example_timestamp: '2020-12-10T04:05:09+0000',
        example_color: '#c7ab5d',
        example_number: 74.5,
        example_key_text: 'Example Key Text Value',
        example_select: 'North',
        example_boolean: true,
      }
    },
    // ...
  ]
}

If you store the response in a variable called response you might access a single data point like this:

Copy
response.results[0].data.example_key_text 
// 'Example Key Text Value'

In Express with, EJS templating, like this:

Copy
<h3><%- response.results[0].data.example_key_text %></h3>
<!-- <h3>Example Key Text Value</h3> -->

The most important property on the response object is the results array.

The results array

When you make a query using a get-all method, such as getAllByType(), you will get a results array containing all matching results.

The getAll*() methods, such as getAllByType(), will directly return a results array.

Here is a truncated example of an API response using getAllByType() :

Copy
[
  {
    uid: 'example_blog_post',
    type: 'blog_post',
    data: {
      example_date: '2020-12-10',
      example_key_text: 'Example Key Text Value',
    }
  },
  {...},
  {...},
  {...}
]

If you store the response in a variable called results you might access a single data point like this:

Copy
results[0].data.example_key_text
// Example Key Text Value

In Express.js with, EJS templating, like this:

Copy
<h3><%- results[0].data.example_key_text %></h3> 
<!-- <h3>Example Key Text Value</h3> -->

Each item in the results array is a document object.

The document object

The helper functions getSingle()getByUID(), and getByID() will return a document object, which contains the data for an individual document directly.

Here's a truncated example of the response for those queries:

Copy
{
  uid: 'about',
  // Metadata for this result
  // ...
  data: {
    example_date: '2020-12-10',
    example_color: '#c7ab5d',
    example_key_text: 'Example Key Text Value',
  }
}

With a single document query, you might access your data like this:

Copy
<h3><%- document.data.example_key_text %></h3> 
<!-- <h3>Example Key Text Value</h3> -->

Simple fields

The content for each Prismic field is delivered as either a simple primitive value or an object. The simple fields can be injected directly into your app since their value is either a string, a number, or a boolean. Here are the simple fields:

  • Color
  • Key Text
  • Number
  • Select
  • Boolean
  • Date
  • Timestamp

Here's an example of how to template the Number field value from its API ID. You can template the other simple fields the same way.

Copy
<h3>$<%- document.data.example_number %></h3>
<!-- <h3>$74.5</h3> -->

Color

Retrieving the Color field is similar. Here we can see how to do inline styling in Express:

Copy
<h3 style="color: <%= document.data.example_color %>">Colorful Title</h3>
<!-- <h3 style="color: #FF0000">Colorful Title</h3> -->

Date and Timestamp

The Date and Timestamp fields from Prismic are strings. The raw response for each of these fields has the following formats:

  • Date: YYYY-MM-DD
  • Timestamp: YYYY-MM-DDTHH:MM:SS+0000

prismicH.asDate() takes a Date or Timestamp field from Prismic and converts it to a JavaScript date object. To learn more about JavaScript Date objects, see the MDN Date documentation or this tutorial by Tania Rascia.

Copy
 <!-- Date field -->
<span>
  <%- ctx.prismicH.asDate(document.data.example_date).getFullYear() %>
</span>
<!-- <span>2021</span> -->


<!-- Timestamp field -->
<span>
  <%- ctx.prismicH.asDate(document.data.example_timestamp).toISOString() %>
</span>
<!-- <span>2018-01-16T13:46:15.000Z</span> -->

GeoPoint

The GeoPoint field is served as an object with two properties: latitude and longitude. Here is an example API response:

Copy
example_geopoint: {
  latitude: 48.85392410000001,
  longitude: 2.2913515000000073
}

Here is an example of how to retrieve the latitude & longitude coordinates for a GeoPoint field.

Copy
<% const { latitude, longitude } = document.data.example_geopoint %>

<p>My location: <%= latitude %>, <%= longitude %></p>
<!-- <p>My location: 48.85392410000001, 2.2913515000000073</p> -->

Embed

The Embed field will let content authors paste an oEmbed supported service resource URL (YouTube, Vimeo, Soundcloud, etc.), and add the embedded content to your website. This is the API response of the Embed field:

Copy
example_embed: {
  version: '1.0',
  url: 'https://prismic.io',
  type: 'link',
  title: 'Make your website editable for the whole team - Prismic',
  provider_name: null,
  thumbnail_url:
    'https://images.prismic.io/prismic-     website/6e49007fec52f99861047cdd55b3ab190ea04295_dev-landing-page-image.png?auto=compress,format',
  html: '<div data-type="unknown"><a href="http...',
  embed_url: 'https://prismic.io/',
}

Here’s an example of how to integrate the Embed field into your templates.

Copy
<%- document.data.example_embed.html %>

Images

The Image field returns an object with data about the image, including a URL for your image (hosted on Prismic's servers) and alt text.

Copy
example_image : {
  dimensions: {
    width: 1920,
    height: 1302
  },
  alt: "cool cat pic",
  copyright: null,
  url: "https://images.prismic.io/sm-20201204-2/7d1fba99-5bec-4d59-b8eb-402706e2d36c_a-pril-62u95KgB49w-unsplash.jpg?auto=compress,format"
}

You can template an image using the asImageSrc() function and an <img> element:

Copy
<% const image = prismicH.asImageSrc(document.data.example_image) %>

<img 
  src="<%- image.src %>"
  alt="<%- document.data.example_image.alt %>"
/>

Images can be transformed using Prismic’s built-in Imgix integration and asImageSrc(). This allows you to resize, crop, recolor, and more. See Imgix’s URL API Reference for a full list of available information.

The following example converts the image to grayscale with sat: -100:

Copy
<% const image = prismicH.asImageSrc(document.data.example_image, { sat: -100 }) %>

<img 
  src="<%- image.src %>"
  alt="<%- document.data.example_image.alt %>"
/>

Image fields can have responsive views. Retrieve their URLs by passing each view to asImageWidthSrcSet().

The asImageWidthSrcSet() and asImagePixelDensitySrcSet() functions build responsive srcset attribute values that can be passed to <img> or <source> elements:

Copy
<% const image = prismicH.asImageWidthSrcSet(document.data.example_image) %>

<img 
  src="<%- image.src %>"
  srcset="<%- image.srcset %>"
  alt="<%- document.data.example_image.alt %>"
/>

Rich Text and Titles

Rich Text and Titles are delivered in an array that contains information about the text structure. Here's an example of the API response of the Rich Text field (Title fields follow the same format).

Copy
example_rich_text: [
  {
    type: "paragraph",
    text: "Example Rich Text Value",
    spans: [
      {
        start: 8,
        end: 17,
        type: "strong"
      }
    ]
  }
]

Learn more about Rich Text

To learn more about how Rich Text is structured in Prismic and how to configure it, see the Rich Text and Title Reference.

Output as HTML

To render the Rich Text and Title fields, use the prismicH.asHTML() method to convert your Rich Text field to HTML.

Copy
<%- ctx.prismicH.asHTML(document.data.example_rich_text) %>

Modify Rich Text HTML

You can modify the HTML output of a Rich Text with an HTML Serializer function. Learn more about the HTML Serializer function in Advanced Templating.

Output as plain text

The prismicH.asText() method will output the Rich Text or Title field as a string. Here is an example of how to get plain text from a Rich Text or Title field.:

Copy
<h3><%- ctx.prismicH.asText(document.data.example_rich_text) %></h3>
<!-- <h3>Example rich text</h3> -->

Links and Content Relationship

The Route Resolver

Prismic does not know the routing of your Express app. You can tell Prismic the structure of your app with a Route Resolver when you create a client. (You should have already created a Route Resolver when you Installed Prismic in your app.) Prismic will then use that information to add a url property to each document. Alternatively, you can create the URLs yourself with a Link Resolver.

To learn more about creating URLs, see our article on the Link Resolver and the Route Resolver.

The Link field allows you to link to an external webpage, an internal Prismic document, or an item in your Media Library (like a PDF). The Content Relationship field allows you to link specifically to an internal Prismic document.

Here's what a Content Relationship field looks like from the API (a Link field takes a similar format). This field has an API ID example_content_relationship, and it links to another document that has the UID another-document and the type page.

Copy
example_content_relationship: {
  id: "X9C65hEAAEFIAuLo",
  type: "page",
  tags: [],
  slug: "another-document",
  lang: "en-us",
  uid: "another-document",
  link_type: "Document",
  isBroken: false
}

There are two things that you might want to do with a link:

  • Link to another page or media item, internally or externally
  • Pull in content from another document

Here's how to do those things.

Link internally or externally

To render a link to the web, you can use the asLink() method from @prismicio/helpers. asLink() accepts a Link or Content Relationship field and an optional Link Resolver and returns an absolute or relative URL as a string. You can inject that string into an <a> tag, like so:

Copy
<% const mediaUrl = ctx.prismicH.asLink(document.data.example_link) %>
<a href="<%= mediaUrl %>">Click here</a>

Pull in data from another document

To pull content from a linked document, you must fetch that content in your API Query using the graphQuery or fetchLinks API options. You can learn more about both options in the Rest API Technical Reference. Here, we'll explain more about fetchLinks.

The fetchLinks option allows you to retrieve a specific content field from a linked document and add it to the document response object. In your query options, use fetchLinks as the key, with the value formatted like so:

  • first, the API ID of the Custom Type referenced in your Content Relationship field
  • then, the API ID of the field that you want to retrieve

For instance, if you have a Custom Type called blog that includes a Content Relationship field called example_content_relationship linked to a Custom Type called author where you want to retrieve a field that has an API ID is author_name, you would format the option like so:

Copy
const document = await client.getByUID('blog','my-blog-post', {
  'fetchLinks': 'author.author_name'
})

Once you have adjusted your API query, the linked content will appear in a data object nested in the Link or Content Relationship field:

Copy
example_content_relationship: {
  id: "X9C65hEAAEFIAuLo",
  type: "blog",
  tags: [],
  slug: "another-document",
  lang: "en-us",
  uid: "my-blog",
  data: {
    author_name: "John Doe"
  },
  link_type: "Document",
  isBroken: false
}

You can then template that content normally:

Copy
<strong> 
  By <%- document.data.example_content_relationship.data.author_name %>
</strong>
<!-- <strong>By John Doe</strong> -->

Groups

A Group field renders an array of content fields. Here's what the API response looks like for a hypothetical Group field modeling a nav menu.

Copy
example_group: [
  {
    example_nav_label: "Homepage",
    example_nav_link: {...},
  },
  {
    example_nav_label: "Post",
    example_nav_link: {...},
  },
]

To integrate a repeatable Group field into your template, loop through each item in the Group as shown below using the map() method:

Copy
<ul>
  <% document.data.example_group.map(item => { %>
    <li>
      <a href="<%- ctx.prismicH.asLink(item.example_nav_link) %>">
        <%- item.example_nav_label %> 
      </a>       
    </li>
  <% }) %>
</ul>

Slices

Slices are repeatable, rearrangeable content sections. Learn more about Slices in What is a Slice?

On the document object, Slices are stored in the body array, like so:

Slices vs Groups

Slices and Groups both allow you to create repeatable content templates. Groups are available in the static section of your document, and Slices are available in the SliceZone. The difference between Groups and Slices is that Groups can only be repeated, while Slices can be repeated and mixed.

Copy
body: [
  {
    slice_type: 'text_slice',
    slice_label: null,
    items: [{}],
    primary: {
      key_text: 'Some example text in a Slice.',
    },
  },
  {
    slice_type: 'image_gallery_slice',
    slice_label: null,
    items: [
      {
        gallery_image: {
          dimensions: { … },
          alt: 'An illustration of a cool dancing boy.',
          copyright: null,
          url: 'https://images.prismic.io/slicemachine-blank/6b2bf485-aa12-44ef-8f06-      dce6b91b9309_dancing.png?auto=compress,format',
        },
      },
    ],
    primary: {
      gallery_title: 'The title of this gallery',
    },
  },
]

To learn how to render slices, see the Render Slices article.


Was this article helpful?
Not really
Yes, Thanks

Can't find what you're looking for? Spot an error in the documentation? Get in touch with us on our Community Forum or using the feedback form above.