Group Templating

The Group field is used to create a repeatable collection of fields.

Repeatable Group

Example 1

Here’s how to integrate a repeatable Group field into your templates. Just loop through each item in the group as shown below.

  • ejs
  • pug
  • pug (API v1)
Copy
<ul>
  <% document.data.references.forEach(function(reference){ %>
    <li>
      <a href="<%= reference.link.url %>" target="_blank"><%= reference.label %></a>
    </li>
  <% }) %>
</ul>
Copy
ul
  each reference in document.data.references
    li
      a(href=PrismicDOM.Link.url(reference.link, ctx.linkResolver))
        != PrismicDOM.RichText.asText(reference.label)
Copy
ul
  each reference in document.getGroup('blog-post.references').toArray()
    li
      a(href=reference.getLink('link').url())
        != reference.getText('label')

Example 2

Here’s another example that shows how to integrate a group of images (e.g. a photo gallery) into a page.

  • ejs
  • pug
  • pug (API v1)
Copy
<% document.data.photoGallery.forEach(function(imageWithCaption){ %>
  <img src="<%= imageWithCaption.photo.url %>" />
  <span><%= imageWithCaption.caption %></span>
<% }) %>
Copy
for photoWithCaption in document.data.photo_gallery
  img(src=photoWithCaption.photo.url)
  span
    != PrismicDOM.RichText.asText(photoWithCaption.caption)
Copy
for imageWithCaption in document.getGroup('page.photo-gallery').toArray()
  img(src=imageWithCaption.getImage('photo').url)
  span !{imageWithCaption.getText('caption')}

Non-repeatable Group

Even if the group is non-repeatable, the Group field will be an array. You simply need to get the first (and only) group in the array and you can retrieve the fields in the group like any other.

Here is an example showing how to integrate the fields of a non-repeatable Group into your templates.

  • ejs
  • pug
  • pug (API v1)
Copy
<% var banner = document.data.banner_group[0]; %>
<div class="banner">
  <img src="<%= banner.banner_image.url %>" />
  <p><%= PrismicDOM.RichText.asText(banner.banner_text) %></p>
  <a href="<%= PrismicDOM.Link.url(banner.link, ctx.linkResolver) %>">
    <%= PrismicDOM.RichText.asText(banner.link_label) %>
  </a>
</div>
Copy
- var banner = document.data.banner_group[0];
div.banner
  img(src=banner.banner_image.url)
  p !{PrismicDOM.RichText.asText(banner.banner_text)}
  a(href=PrismicDOM.Link.url(banner.link, ctx.linkResolver))
    != PrismicDOM.RichText.asText(banner.link_label)
Copy
- var banner = document.getGroup('page.banner_group').toArray()[0];
div.banner
  img(src=banner.getImage('banner_image').url)
  p !{banner.getStructuredText('banner_text').asText()}
  a(href=banner.getLink('link').url(ctx.linkResolver))
    != banner.getStructuredText('link_label').asText()