Templating Slices
The Slices field is used to define a dynamic zone for richer page layouts.
Before Reading
This page assumes that you have retrieved your content and stored it in a variable named $document.
It is also assumed that you have set up a Link Resolver stored in the variable $linkResolver. When integrating a Link in your templates, a link resolver might be necessary as shown & discussed below. To learn more about this, check out our Link Resolving page.
You can retrieve Slices from your documents by accessing the data property containing the slices zone, named by default body.
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.
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
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"
@php
use Prismic\Dom\RichText;
$slices = $document->data->body;
@endphp
<div class="blog-content">
@foreach ($slices as $slice)
@switch ($slice->slice_type)
@case ('text')
{!! RichText::asHtml($slice->primary->rich_text, $linkResolver) !!}
@break
@case ('image_gallery')
{!! '<h2 class="gallery-title">' . RichText::asText($slice->primary->gallery_title) . '</h2>' !!}
@foreach ($slice->items as $item)
{!! '<img src="' . $item->gallery_image->url . '" alt="' . $item->gallery_image->alt . '" />' !!}
@endforeach
@break
@endswitch
@endforeach
</div>
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.
The "faq" slice 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"
Primary
non-repeatable
- A Rich Text field with the API ID of "rich_text"
Items
repeatable
None
@php
use Prismic\Dom\RichText;
$returnFaqSlice = function ($slice) use ($linkResolver) {
$html = '<div class="slice-faq">'
. RichText::asHtml($slice->primary->faq_title, $linkResolver);
foreach ($slice->items as $item) {
$html .= '<div>'
. RichText::asHtml($item->question, $linkResolver)
. RichText::asHtml($item->answer, $linkResolver)
. '</div>';
}
$html .= '</div>';
return $html;
};
$returnFeaturedItemsSlice = function ($slice) use ($linkResolver) {
$html = '<div class="slice-featured-items">';
foreach ($slice->items as $item) {
$html .= '<div>'
. '<img src="' . $item->image->url . '" alt="' . $item->image->alt . '" />'
. RichText::asHtml($item->title, $linkResolver)
. RichText::asHtml($item->summary, $linkResolver)
. '</div>';
}
$html .= '</div>';
return $html;
};
$returnTextSlice = function ($slice) use ($linkResolver) {
$html = '<div class="slice-text">'
. RichText::asHtml($slice->primary->rich_text, $linkResolver)
. '</div>';
return $html;
};
$slices = $document->data->body;
@endphp
<div class="page-content">
@foreach ($slices as $slice)
@switch ($slice->slice_type)
@case ('faq')
{!! $returnFaqSlice($slice) !!}
@break
@case ('featured_items')
{!! $returnFeaturedItemsSlice($slice) !!}
@break
@case ('text')
{!! $returnTextSlice($slice) !!}
@break
@endswitch
@endforeach
</div>