Forum

Thread tagged as: Question

Perch Repeaters - duplicated content

Hi,

My template:

<template id="sidebar_template">
<perch:template path="js/sidebar_js.html"/>
<perch:template path="css/sidebar_css.html"/>

<perch:blocks>

<perch:block type="image" label="Image">
<perch:template path="css/sidebar_image_css.html"/>
<figure>
<img src="<perch:content id="sidebarimage" type="text" label="Sidebar Image"/>" alt="<perch:content id="alt" type="text" required="true" label="Alternate Text" help="Define Alternate Text"/>">
<perch:if exists="caption"><figcaption><perch:content id="caption" type="text" label="Caption" help="Include an optional caption"/></figcaption></perch:if>
</figure>
</perch:block>

<perch:block type="images" label="Fader">
<figure>
<perch:repeater id="fader" max="8">
<img src="<perch:content id="sidebarimages" type="text" label="Fader images"/>" alt="<perch:content id="alt1" type="text" required="true" label="Alternate Text" help="Define Alternate Text"/>">
</perch:repeater>
</figure>
</perch:block>

<perch:block type="slides" label="Random Sideslide">
<perch:template path="css/sidebar_slides_css.html"/>
<script>
for(i in document.styleSheets)
if(document.styleSheets[i].title=='stylesheet'){ss=document.styleSheets[i];}
<perch:repeater id="sideslider" max="3">
ss.insertRule('#sidebar figure div:nth-child(<perch:content id="slidechild" type="select" label="Slide Child" options="1,2,3" help="Select slideshow child"/>){background:url(<perch:content id="sideslideimage" type="text" label="Slide Image" help="URL for sideslide image"/>) center center / cover no-repeat;}',<perch:content id="sliderule" type="text" label="Slide Rule" help="Rule number for sideslide image"/>);
</perch:repeater>
</script>
<figure>
<div></div>
<div></div>
<div></div>
</figure>
</perch:block>

<perch:block type="text" label="Links">
<perch:template path="css/sidebar_links_css.html"/>
<h6><perch:content id="sidebarheading" type="text" label="Sidebar Heading"/></h6>
<perch:if exists="links">
<perch:repeater id="links" max="4">
<perch:before><ul></perch:before>
<li><a href="<perch:if exists="hypertextlink"><perch:content id="hypertextlink" type="text" label="Hypertext Link"/><perch:else/>mailto:<perch:content id="emaillink" type="text" label="Email Link"/></perch:if>"><perch:if exists="hypertextlink"><perch:content id="hyperlinktext" type="text" label="Hyperlink Content"/><perch:else/><perch:content id="emaillinktext" type="text" label="Email Content"/></perch:if></a></li>
<perch:after></ul></perch:after>
</perch:repeater>
</perch:if>
</perch:block>

</perch:blocks>
</template>

<div id="sidebar" <perch:if exists="sidebarclass">class="<perch:content id="sidebarclass" type="select" label="Sidebar type" options="custom,custom1,custom2,fader,links" help="Leave empty for single image" allowempty="true"/>"</perch:if>></div>

<perch:template path="/js/sidebar_js1.html"/>

Output:

<div id="sidebar" class="links">
<script>var customgallery,custom1gallery,custom2gallery,scenario,ss;</script>
<style>
#sidebar{margin:1.5rem 1rem 0 .5rem;}
@media(max-width:1024px){#sidebar{margin-right:.5rem;}}
@media(max-width:768px){#sidebar{display:none;}}
</style>

<style>
.links{padding-right:1.5rem;}
#sidebar li{padding-right:.5rem;}
</style>
<h6>Links</h6>
<ul>
<li><a href="terms">Terms</a></li>
<li><a href="help">FAQ</a></li>
<li><a href="checklist">Checklist</a></li>
<li><a href="/sitemap">Sitemap</a></li>
</ul>
<style>
.links{padding-right:1.5rem;}
#sidebar li{padding-right:.5rem;}
</style>
<h6>Contacts</h6>
<ul>
<li><a href="/contact">Contact Us</a></li>
</ul>
</div>

I understand there is superfluous code in terms of my example but I'd like to know if anyone can tell me why there is a repeated <style></style> element in the output, when in the template it is outside of a Repeating section? Thanks for any help offered or provided.

Garth Holmes

Garth Holmes 0 points

  • 4 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

Where's the <style> block in the template?

Hi Drew,

The <style></style> block is accessed via <perch:template path="css/sidebar_links_css.html"/> of which the sidebar_links_css.html file has the following code:

<style>
.links{padding-right:1.5rem;}
#sidebar li{padding-right:.5rem;}
</style>

Thank you

Rachel Andrew

Rachel Andrew 394 points
Perch Support

The way to debug this would be to simplify your code until you can isolate the issue. Remove stuff until you figure out where it is, that is all anyone else would have to do.

Here is some good info about creating Reduced Test Cases https://css-tricks.com/reduced-test-cases/

Duncan Revell

Duncan Revell 78 points
Registered Developer

Garth,

it looks to me as if the code is doing what it should do - you must have 2 "Links" blocks and the <style></style> elements are coming from each block.

The repeater is correctly outputting the <li></li> elements.