Slices Templating

The Slices field is used to define a dynamic zone for richer page layouts.

Example 1

Here is a simple example that shows how to add slices to your templates. In this example, we have two slice options: a text slice and an image gallery slice.

Text slice

The "text" slice is simple and only contains one field, which is non-repeatable.

Primary

non-repeatable

- A Rich Text field with the API ID of "rich_text"

Items

repeatable

None

The "image-gallery" slice contains both repeatable and non-repeatable fields.

Primary

non-repeatable

- A Title field with the API ID of "gallery_title"

Items

repeatable

- An Image field with the API ID of "gallery_image"

Integration

Here is an example of how to integrate these slices into a blog post.

  • ejs
  • pug
  • pug (API v1)
Copy
<div class="blog-content">
  <% document.data.body.forEach(function(slice){ %> 
    
    <%# Render the right markup for a given slice type %>
    <% if (slice.slice_type == "text") { %>
      <%- PrismicDOM.RichText.asHtml(slice.primary.rich_text) %>
    <% } %> 
    
    <% if (slice.slice_type == "image-gallery") { %>
      <h2 class="gallery-title">
        <%- PrismicDOM.RichText.asText(slice.primary.gallery_title) %>
      </h2>
      <% slice.items.forEach(function(image){ %>
        <img src="<%= image.gallery_image.url %>" />
      <% }) %>
    <% } %>
  
  <% }) %>
</div>
Copy
div.blog-content
 for slice in document.data.body

   //- Render the right markup for a given slice type.
   case slice.slice_type

     when 'text'
       != PrismicDOM.RichText.asHtml(slice.primary.rich_text, ctx.linkResolver)

     when 'image-gallery'
       h2.gallery-title
         != PrismicDOM.RichText.asText(slice.primary.gallery_title)
       for image in slice.items
         img(src=image.gallery_image.url)
Copy
div.blog-content
 for slice in document.getSliceZone('blog-post.body').slices

   //- Render the right markup for a given slice type.
   case slice.sliceType

     when 'text'
       != slice.nonRepeat.rich_text.asHtml()

     when 'image-gallery'
       h2.gallery-title
         != slice.nonRepeat.gallery_title.asHtml()
       for image in slice.repeat.toArray()
         img(src=image.getImage('gallery_image').url)

Example 2

The following is a more advanced example that shows how to use Slices for a landing page. In this example, the Slice choices are FAQ question/answers, featured items, and text sections.

FAQ slice

The "faq" slice is takes advantage of both the repeatable and non-repeatable slice sections.

Primary

non-repeatable

- A Title field with the API ID of "faq_title"

Items

repeatable

- A Title field with the API ID of "question"

- A Rich Text field with the API ID of "answer"

The "featured_items" slice contains a repeatable set of an image, title, and summary fields.

Primary

non-repeatable

None

Items

repeatable

- An Image field with the API ID of "image"

- A Title field with the API ID of "title"

- A Rich Text field with the API ID of "summary"

Text slice

The "text" slice contains only a Rich Text field in the non-repeatable section.

Primary

non-repeatable

- A Rich Text field with the API ID of "rich_text"

Items

repeatable

None

Integration

Here is an example of how to integrate these slices into a landing page.

  • ejs
  • pug
  • pug (API v1)
Copy
<body class="page">
  <div id="page-content">
    
    <% document.data.body.forEach(function(slice){ %>
      
      <%# Render the right markup for a given slice type %>
      <% if (slice.slice_type == 'faq') { %>
        <div class="faq">
          <%- PrismicDOM.RichText.asHtml(slice.primary.faq_title, ctx.linkResolver) %>
          <% slice.items.forEach(function(faq){ %>
            <div>
              <%- PrismicDOM.RichText.asHtml(faq.question, ctx.linkResolver) %>
              <%- PrismicDOM.RichText.asHtml(faq.answer, ctx.linkResolver) %>
            </div>
          <% }) %>
        </div>
      <% } %>
    
      <% if (slice.slice_type == 'featured_items') { %>
        <div class="featured-items">
          <% slice.items.forEach(function(featuredItem){ %>
            <div>
              <img src="<%= featuredItem.image.url %>" />
              <%- PrismicDOM.RichText.asHtml(featuredItem.title, ctx.linkResolver) %>
              <%- PrismicDOM.RichText.asHtml(featuredItem.summary, ctx.linkResolver) %>
            </div>
          <% }) %>
        </div>
      <% } %>
    
      <% if (slice.slice_type == 'text') { %>
        <div class="text">
          <%- PrismicDOM.RichText.asHtml(slice.primary.rich_text, ctx.linkResolver) %>
        </div>
      <% } %>

    <% }) %>
  </div>
</body>
Copy
mixin faq(slice)
 div.faq 
   != PrismicDOM.RichText.asHtml(slice.primary.faq_title, ctx.linkResolver)
   each faq in slice.items
     div
       != PrismicDOM.RichText.asHtml(faq.question, ctx.linkResolver)
       != PrismicDOM.RichText.asHtml(faq.answer, ctx.linkResolver)

mixin featuredItems(slice)
 div.featured-items
   each featuredItem in slice.items
     div
       img(src=featuredItem.image.url)
       != PrismicDOM.RichText.asHtml(featuredItem.title, ctx.linkResolver)
       != PrismicDOM.RichText.asHtml(featuredItem.summary, ctx.linkResolver)

mixin text(slice)
 div.text
   != PrismicDOM.RichText.asHtml(slice.primary.rich_text, ctx.linkResolver)

body.page
 div#page-content
   for slice in document.data.body
     case slice.slice_type
       when 'faq'
         + faq(slice)
       when 'featured_items'
         + featuredItems(slice)
       when 'text'
         + text(slice)
Copy
mixin faq(slice)
 div.faq
   != slice.nonRepeat.faq_title.asHtml(ctx.linkResolver)
   each faq in slice.repeat.toArray()
     div
       != faq.getStructuredText('question').asHtml(ctx.linkResolver)
       != faq.getStructuredText('answer').asHtml(ctx.linkResolver)

mixin featuredItems(slice)
 div.featured-items
   each featuredItem in slice.repeat.toArray()
     div
       img(src=featuredItem.getImage('image').url)
       != featuredItem.getStructuredText('title').asHtml(ctx.linkResolver)
       != featuredItem.getStructuredText('summary').asHtml(ctx.linkResolver)

mixin text(slice)
 div.text
   != slice.nonRepeat.rich_text.asHtml(ctx.linkResolver)

body.page
 div#page-content
   for slice in document.getSliceZone('page.body').slices
     case slice.sliceType
       when 'faq'
         + faq(slice)
       when 'featured_items'
         + featuredItems(slice)
       when 'text'
         + text(slice)

Old Style Slices (deprecated)

Old Style Example 1

Here’s an example that shows how to integrate the old-style Slices into a blog post. The two available Slice choices in this example are Rich Text fields and Images.

  • ejs
  • pug
  • pug (API v1)
Copy
<div class="blog-main single container">
  <% document.data.body.forEach(function(slice){ %>         

    <%# Render the right markup for a given slice type %>
    <% if (slice.slice_type == "rich-text") { %>
      <%- PrismicDOM.RichText.asHtml(slice.value) %>
    <% } %> 

    <% if (slice.slice_type == "image") { %>
      <img src="<%= slice.value.url %>" />
    <% } %>

  <% }) %>
</div>
Copy
div.blog-main
   for slice in document.data.body
       //- Render the right markup for a given slice type.
       case slice.slice_type
           when 'rich-text'
               != PrismicDOM.RichText.asHtml(slice.value)
           when 'image'
               img(src=slice.value.url)
Copy
div.blog-main
   for slice in document.getSliceZone('blog-post.body').slices
       //- Render the right markup for a given slice type.
       case slice.sliceType
           when 'rich-text'
               != slice.value.asHtml()
           when 'image'
               img(src=slice.value.url)

Old Style Example 2

The following is a more advanced demonstration of the old-style Slices for a landing page. In this example, the Slice choices are FAQ question/answers, featured items, and text sections.

  • ejs
  • pug
  • pug (API v1)
Copy
<body class="page">
  <div id="page-content">
    
    <% document.data.body.forEach(function(slice){ %>
      
      <%# Render the right markup for a given slice type %>
      <% if (slice.slice_type == "faq") { %>
        <div class="faq">
          <% slice.value.forEach(function(faq){ %>
            <div>
              <%- PrismicDOM.RichText.asHtml(faq.question) %>
              <%- PrismicDOM.RichText.asHtml(faq.answer) %>
            </div>
          <% }) %>
        </div>
      <% } %>
    
      <% if (slice.slice_type == "featured-items") { %>
        <div class="featured-items">
          <% slice.value.forEach(function(featuredItem){ %>
            <div>
              <img src="<%= featuredItem.image.url %>" />
              <%- PrismicDOM.RichText.asHtml(featuredItem.title) %>
              <%- PrismicDOM.RichText.asHtml(featuredItem.summary) %>
            </div>
          <% }) %>
        </div>
      <% } %>
    
      <% if (slice.slice_type == "text") { %>
        <div class="text">
          <%- PrismicDOM.RichText.asHtml(slice.value) %>
        </div>
      <% } %>

    <% }) %>
  </div>
</body>
Copy
mixin faq(slice)
   div.faq
       each faq in slice.value
           div
               != PrismicDOM.RichText.asHtml(faq.question)
               != PrismicDOM.RichText.asHtml(faq.answer)

mixin featuredItems(slice)
   div.featured-items
       each featuredItem in slice.value
           div
               img(src=featuredItem.image.url)
               != PrismicDOM.RichText.asHtml(featuredItem.title)
               != PrismicDOM.RichText.asHtml(featuredItem.summary)

mixin text(slice)
   div.text
       != PrismicDOM.RichText.asHtml(slice.value)

body.page
   div#page-content
       for slice in document.data.body
           case slice.slice_type
               when 'faq'
                   + faq(slice)
               when 'featured-items'
                   + featuredItems(slice)
               when 'text'
                   + text(slice)
Copy
mixin faq(slice)
   div.faq
       each faq in slice.value.toArray()
           div
               != faq.getStructuredText('question').asHtml()
               != faq.getStructuredText('answer').asHtml()

mixin featuredItems(slice)
   div.featured-items
       each featuredItem in slice.value.toArray()
           div
               img(src=featuredItem.get('image').url)
               != featuredItem.getStructuredText('title').asHtml()
               != featuredItem.getStructuredText('summary').asHtml()

mixin text(slice)
   div.text
       != slice.value.asHtml()

body.page
   div#page-content
       for slice in document.getSliceZone('page.body').slices
           case slice.sliceType
               when 'faq'
                   + faq(slice)
               when 'featured-items'
                   + featuredItems(slice)
               when 'text'
                   + text(slice)