Slices that can have a child slice

Hi Everyone,

I’m fairly new to Prismic. I’ve built a few very basic sites using it, but really basic.

I’m now trying to build something a bit bolder and have a group of components. I have components for layout, these accept child components for items like a rich text block or an image for example.

My question, can I create a slice for something like a column and have one of the fields select another slice as a child?

Hey James. Yes, you can create a Slice for nested content and for creating a column and have one of the fields select another slice as a child using Content Relationship fields.

To achieve this, you can follow these steps:

  1. Create a Slice for the parent component, in this case, the column. This Slice will contain the Content Relationship field that will allow you to select the child component.
  2. Create a Slice for the Custom Type that'll be the child component, in this case you'd use a rich text block or image.
  3. When you create a new document, select the parent Slice and choose the child Document with the 'child component' Slice from the Content Relationship field.
  4. Repeat this process for each column in that you want to have child components.

Using Content Relationship fields, you can create complex components with child components that content editors can select and add. This allows for greater flexibility and customization of your content.

This is a great starting block, is there any video tutorials to this effect? I'm getting lost a little in the slice machine between creating component slices and custom types.

My understanding was custom types were for content creation like pages, is what you are saying is to create a slice for the layout and then custom types for each component?

My objective is to output something nested like the below:

    Component Block { props around column width definition }
        Image component
        Richtext component
        ...Any other child component within the component block

In my head I would create a slice for each of the components and then, the layout component being able to select the image, rich-text or any other component slice.

Are we saying that each child component has to be its own custom type?

Yes, Custom Types are designed for modeling pages. Content Relationship fields help you link content from one document to another. And you can add this field inside or outside Slices. I mentioned Slices because it's a good practice to think of Slices as components in your app.

So you could also select a Content relationship field at the top level of your Custom Type and then link the document you need from there. Can you tell me more details about your use case? What content do you need to showcase, do you have a visual example?

Thanks for the further explanation. That makes sense to me now. And have had a further play with passing things between other bits I can see now how it all works and how I can attempt to model things.

Many thanks

1 Like