Repeater woes

ContentBlocks
#1

I am doing something horribly wrong.

I have a Layout with the outer HTML of a section with cards, much like the Repeater example in the docs. My Repeater has four fields. I can’t figure out how to tell the Layout to display the Repeater items.

The Repeater template:

<div class="card">
    [[+card-image]]
<div class="card-icon">  
    [[+card-icon]]
</div>
<div class="card-body">
    [[+card-title]]
    [[+card-text]]
  </div>
</div>

But I can’t seem to figure out how to get this output into the Layout.

#2

I figured out how to get the structure of the Layout and the HTML markup from the Repeater’s template, but nothing from the Repeater’s fields.

#3

Ok! Figured out most of it, in the Fields you don’t use the field’s key, you use the “value” placeholder. The key is for the Repeater’s use.

Now to figure out the image field.

#4

Stuck on the image field and the icon field.

#5

The Image field template:
<img src="[[+url]]" class="card-img-top" alt="">

The Icon field template:
<i class="bx bx-[[+value]]"></i>

The card-title and card-body show up just fine, but not these two.

#6

Layouts only has direct access to the full output of its columns. So if your layout has a column named “main”, you only have [[+main]] and whatever is in that column will be rendered into that placeholder. That does not have access to something like [[+main.repeater.image]]

Does your repeater still the same template (“markup” :wink: ) as you posted before? If so, make sure those subfields are configured with the right keys “card-image” and “card-icon”.

When things don’t seem to get rendered the way you’d expect, it can be useful to check the resource in quick update. The content shown there is the end result of ContentBlocks’ parsing (but before MODX parses it further) so that may help pinpoint specific placeholders that aren’t getting set for whatever reason.

#7

Yes, that’s the exact Repeater template. And those are all four the same as the fields’ keys.

This is what shows in Quick Update for each of the repeated blocks.

<div class="col-lg-4 col-md-6 d-flex align-items-stretch">
  <div class="card">
    [[+card-image]]
    <div class="card-icon">  
        [[+card-icon]]
     </div>
      <div class="card-body">
         <h5 class="card-title"><a href="">Our Mission</a></h5>
         <p>Lorem ipsum dolor sit amet, consectetur elit, sed do eiusmod tempor ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
       </div>
   </div>
</div>
#8

I’ll try deleting the layout in the editor and add it again from the beginning.

#9

That did it. Something must have gotten stuck somewhere while I was messing around with it.

Screen Shot 2021-02-25 at 15.18.20

1 Like