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.

Example 1

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.

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

Image gallery slice

The "image_gallery" slice contains both a repeatable and non-repeatable field.

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.

Copy

@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>

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 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"

Featured Items slice

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.

Copy

@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>