Repeatable group of fields inside repeatable zone

Hi, I have a question about repeatable group of fields into repeatable zone in Slice.

I want to create Slider, where I have one main image (Room Image), and various number of nested images(Product Image).

For example:
Slide #1

  • Room Image
  • 1 Product Image
  • 2 Product Image
  • 3 Product Image
  • 4 Product Image
    Slide #2
  • Room Image
  • 1 Product Image
  • 2 Product Image
    etc.

Is there any option to do this? I was looking for examples of it and I couldn't find. :frowning:

Hi @angelika.wronska ,

Welcome to the Prismic community, and thanks for this question :slight_smile:

There is no way to do nested groups in Prismic, though it is something that our product team discusses from time to time.

There are some workarounds that you could use to make this work. To me, the easiest would be to create a repeatable zone with two properties: the slide and the image. So, the model would look like this:

.
├── Non-repeatable Zone
│   └── Title
└── Repeatable zone
    ├── Slide Number
    ├── Parent/Child (Select)
    └── Image

Then, your content might look like this:

.
├── Non-repeatable Zone
│   └── Title: Interiors
└── Repeatable zone
    ├── Item
    │   ├── Slide Number: 1
    │   ├── Parent/Child: Parent
    │   └── Image: house-main.jpg
    ├── Item
    │   ├── Slide Number: 1
    │   ├── Parent/Child: Child
    │   └── Image: house-living-room.jpg
    ├── Item
    │   ├── Slide Number: 1
    │   ├── Parent/Child: Child
    │   └── Image: house-bedroom.jpg
    ├── Item
    │   ├── Slide Number: 2
    │   ├── Parent/Child: Parent
    │   └── Image: office-main.jpg
    └── Item
        ├── Slide Number: 2
        ├── Parent/Child: Child
        └── Image: office-kitch.jpg

In your project, you would parse the data and organize it into a nested hierarchy:

Slider
├── Slide 1
│   ├── Parent: house-living-room.jpg
│   └── Children
│       ├── Child: house-bedroom.jpg
│       └── Child: house-living-room.jpg
└── Slide 2
    ├── Parent: office-main.jpg
    └── Children
        └── Child: office-kitchen.jpg

Alternatively, some users choose to do this with Content Relationships. That way, you could define each slider as a document, and each slide as a slice, with a main image in the non-repeatable zone, and sub-images in the repeatable zone.

Let me know what you think!

Best,
Sam

1 Like

Thanks Sam for reply! This idea is a little bit messy for me and not comfortable. I will try with Content Relationships. Is there any guide for that Content Relationships?

Hey @angelika.wronska ,

We don't have a guide. But, it would look something like this:

Create a Custom Type called "Slider" with an Image field "Main image". Then, create a group field, and inside the group field add an Image field called "Product Image".

Then, you'll link to the Slider document from another Custom Type, which I'll call "Page". On the "Page" Custom Type, create a Content Relationship field called "Slider".

In your code, you can use fetchLinks when you query the Page Custom Type to fetch the Slider data along with the Page content data.

If you'd like a more detailed example, let me know what technology you're using, and I might be able to create an example of the query and templating.

Sam

This issue has been closed due to inactivity. Flag to reopen.