how to nested content blocks

[DarsVaeda]

Hi,

I have the following simplified layout on my page:

...

row1_card1 - row1_card2 - row1_card3

row2_card1 - row2_card2 - row2_card3

...

You can add as many rows and cards per row as you like. Each card has a title, text and a button whose text is the same on every card but should be editable too, just not individually.

I wonder what is the best approach to do this without making it awfully complicated to setup in the admin from an editors perspective.
I thought about a solution using a PageTable for the rows and a Repeater for the cards but that started to be complicated to setup even.

It would be awesome if you could use the FrontpageEditing to edit these cards and even add more or add rows.

How would you implement it?

[AndZyk]

Welcome @DarsVaeda,

you could try to solve this layout with the recently introduced repeater depth. For example depth 0 are your rows and depth 1 are your cards. In combination with the commercial RepeaterMatrix this could be an pleasing solution for editors.

Regards, Andreas

[DarsVaeda]

Hey Andreas,

that's how I solved it in the end.

Thanks a lot!

[asbjorn]

I have been trying to tweak the example from the blog post about repeater depth to work with a two level repeater. Where each "first level" should indicate the start of a Bootstrap column (e.g. col-md-4). And the last item of each "second level" should indicate the end of the previously "opened" column.

Examples:

Repeater input:
Repeater level 0
- Repeater level 1
- Repeater level 1
Repeater level 0
- Repeater level 1
- Repeater level 1

Output example:

<div class=col-md-4>
  <h2>Repeater level 0</h2>
  <p>Repeater level 1</p>
  <p>Repeater level 1</p>
</div>

<div class=col-md-4>
  <h2>Repeater level 0</h2>
  <p>Repeater level 1</p>
  <p>Repeater level 1</p>
</div>

Even though I could imagine other solutions to this exact problem, the code would be helpful because of the whole detecting and closing opened <div> tag based on level.

How would one approach such a problem?