Render Slices

In Prismic, Slices are repeatable, rearrangeable content sections of your webpage. On this page, you'll learn how to template your document's Slices in your Express project.


Create Slices in Prismic

In Prismic, navigate to the Custom Type that you're developing (for instance, "page" or "blog_post") and create Slices. Learn more about Slices in What is a Slice?

Want to follow along with this example?

If you want to use the example Slices on this page, you can follow along. Create a new Custom Type in your repository. In the Custom Type editor, open the JSON editor and copy-paste in this JSON.

Warning! This will overwrite the current configuration, fields, and Slices for this Custom Type.

This will create a simple Custom Type with a UID and two Slices: text_slice and image_gallery_slice. Create a document with this Custom Type. Then change your project setup to query this Custom Type (as described in Fetch Data) and proceed.

Setup

Inside your views/ directory, Create a slices/ directory. In your slices/ directory, create separate ejs templates for each Slice that you created in Prismic.

Each ejs template will receive the slice object as a prop.

Create a SliceZone

To template your array of Slices, create a SliceZone.ejs template in views/. The template will receive your array of Slices as a prop called SliceZone.

Then, it will loop over the Slices in the SliceZone prop with a map() function and render an EJS template with the data from each Slice based on a conditional block that evaluates the Slice type.

An example might help illustrate how this works:

Example

In our example, we have two Slices: a text_slice and an image_gallery_slice. You can see what the API response for a Slice Zone looks like in Template Content.

In views/slices/ Create separate templates to render each Slice field: TextSlice.ejs and ImageGallery.ejs.

In the API response, the content of the repeatable zone is found in the items property and the content of the non-repeatable zone is inside the primary property of the Slice. Here's how you might render different fields inside the ejs templates:

  • TextSlice.ejs
  • ImageGallery.ejs
Copy
<h3><%- slice.primary.key_text %></h3>
Copy
<h2>
  <%- slice.primary.gallery_title %>
</h2>
 <% slice.items.map(eachImage => { %>
  <img src="<%- eachImage.gallery_image.url %>"
       alt="<%- eachImage.gallery_image.alt %>"
  />
<% }) %>

Here is what SliceZone.ejs will look like:

Copy
<% getSlices = ((SliceZone) => {
  return SliceZone.reduce((prevSlices, slice) => {
    if (slice.slice_type === 'text_slice') {
      return prevSlices + include('./slices/TextSlice.ejs', { slice: slice })
    }  
    else if (slice.slice_type === 'image_gallery_slice') {
      return prevSlices + include('./slices/ImageGallery.ejs', { slice: slice })
    }
    else {
      return '<h1>No Slices found</h1>'
    } 
  }, '') 
}) %> 

<%- getSlices(SliceZone) %>

Include the SliceZone on a page

Open the ejs template where you would like to render your Slices and add the SliceZone. This should be the page where you are passing your response from the query.

Including the SliceZone on page.ejs:

Copy
<%- include('SliceZone', {SliceZone: document.data.body}) %>


Was this article helpful?
Not really
Yes, Thanks

Can't find what you're looking for? Get in touch with us on our Community Forum.