Forum

Thread tagged as: Question

Perch Repeater Inside Block

Hi guys,

I'm having some difficulty putting a repeater inside a block - all that happens is that all of the fields in the block sit within the repeater, instead.

Below is my block (containing the repeater):


<perch:block type="title-text-left-half-with-faq" label="title text left half (with FAQ Section)"> <div class="title-text-left-half"> <div> <perch:if exists="title-left"> <div class="inner"> <h2><perch:content id="title-left" type="text" label="Title left" /></h2> </div> <!-- /div.inner --> </perch:if> </div> <!-- /div.left-col --> <div> <div class="inner"> <perch:content id="text-right" type="textarea" label="Text right" markdown="true" editor="markitup" /> </div> <!-- /div.inner --> </div> <!-- /div.right-col --> <perch:repeater id="faq-and-text" label="FAQ Section"> <div id="theStory" style="clear:both;"> <span id="storyHeader"> <h3> <span style="width: 17px;margin-top:13px;" id="hrzntlLine" ></span><span style="width: 17px;margin-top:13px;" id="vrtclLine" ></span><span id="storyStory" ><perch:content id="question" type="textarea" label="Question" textile="true" editor="markitup" /><span></h3> </span> <div id="storyContent" style="display:none; -moz-column-count: 1; -webkit-column-count: 1; column-count: 1;"> <perch:content id="content" type="textarea" label="Story content" textile="true" editor="markitup" /> </div> </div> </perch:repeater> </div> <!-- /div.title-text-left --> <perch:if exists="title-image-right-tiny"> <div class="title-image-right-half"> <perch:if exists="title-image-right-tiny"> <div class="right-half-digital"><img src="<perch:content id="title-image-right-tiny" type="image" label="Image 1" width="400" height="400" crop="true"/>" /></div> </perch:if> <perch:if exists="title-image-right"> <div class="right-half-digital"><img src="<perch:content id="title-image-right" type="image" label="Image 2" width="400" height="400" crop="true"/>" /></div> </perch:if> <perch:if exists="title-image-right-big"> <div class="right-half-digital"><img src="<perch:content id="title-image-right-big" type="image" label="Image 3" width="400" height="400" crop="true"/>" /></div> </perch:if> <perch:if exists="title-image-right-big-four"> <div class="right-half-digital"><img src="<perch:content id="title-image-right-big-four" type="image" label="Image 4" width="400" height="400" crop="true"/>" /></div> </perch:if> </div> </perch:if> </perch:block>

Any ideas?

Thanks!

Harry Ray

Harry Ray 0 points

  • 4 years ago

Hi Harry,

I think you might need to use <perch:before> and <perch:after> tags for anything not included in the repeater. So something like this:

<perch:block type="title-text-left-half-with-faq" label="title text left half (with FAQ Section)">
<perch:before>
<div class="title-text-left-half">
<div>

<perch:if exists="title-left">
<div class="inner">
<h2><perch:content id="title-left" type="text" label="Title left" /></h2>
</div>
<!-- /div.inner --> 
</perch:if>
</div>
<!-- /div.left-col -->

<div>
<div class="inner">
<perch:content id="text-right" type="textarea" label="Text right" markdown="true" editor="markitup" />
</div>
<!-- /div.inner --> 
</div>
<!-- /div.right-col --> 
</perch:before>
<perch:repeater id="faq-and-text" label="FAQ Section">
<div id="theStory" style="clear:both;">
<span id="storyHeader"> 
<h3> <span style="width: 17px;margin-top:13px;" id="hrzntlLine" ></span><span style="width: 17px;margin-top:13px;" id="vrtclLine" ></span><span id="storyStory" ><perch:content id="question" type="textarea" label="Question" textile="true" editor="markitup" /><span></h3>
</span>
<div id="storyContent" style="display:none; -moz-column-count: 1; -webkit-column-count: 1; column-count: 1;">
<perch:content id="content" type="textarea" label="Story content" textile="true" editor="markitup" />
</div>
</div>
</perch:repeater>
<perch:after>
</div>
<!-- /div.title-text-left --> 
<perch:if exists="title-image-right-tiny">
<div class="title-image-right-half">
<perch:if exists="title-image-right-tiny">
<div class="right-half-digital"><img src="<perch:content id="title-image-right-tiny" type="image" label="Image 1" width="400" height="400" crop="true"/>" /></div>
</perch:if>
<perch:if exists="title-image-right">
<div class="right-half-digital"><img src="<perch:content id="title-image-right" type="image" label="Image 2" width="400" height="400" crop="true"/>" /></div>
</perch:if>
<perch:if exists="title-image-right-big">
<div class="right-half-digital"><img src="<perch:content id="title-image-right-big" type="image" label="Image 3" width="400" height="400" crop="true"/>" /></div>
</perch:if>
<perch:if exists="title-image-right-big-four">
<div class="right-half-digital"><img src="<perch:content id="title-image-right-big-four" type="image" label="Image 4" width="400" height="400" crop="true"/>" /></div>
</perch:if>
</div>
</perch:if>
</perch:after>
</perch:block>

Hi Mike,

I initially tried that, however, it didn't work (maybe caching was at play).

You've cleared it up for me, thanks!