Forum

Thread tagged as: Question, Problem

Perch Block with repeater - curtail element output

Hi,

I have the following block:

<perch:block type="text" label="Links">
<style><perch:template path="sidebar_links_styles.css"/></style>
<h5><perch:content id="sidebarheading" type="text" label="Sidebar Heading"/></h5>
<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>

but I am getting multiple <style></style> elements being output.

I am wondering if there is another way to template the desired output minus the additional <style></style> elements, and while it may not be much in the way of superfluous content, it is nonetheless duplicating what has already been output by Perch.

If anyone has any ideas on how I might go about reformatting this template, it would be well appreciated.

Thanks for all the assistance rendered by forum members thus far.
Garth Holmes

Garth Holmes 0 points

  • 3 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

3 years ago

I am getting multiple <style></style> elements being output.

You should get those tags once for each time the block is used.

What are you seeing?
Garth Holmes

Garth Holmes 0 points

3 years ago

Hi Drew,

The source is as follows:

<figure id="sidebar" class="links">
<style>.links{
padding-right:1.5rem;
margin-left:.5rem;
background:rgb(66,58,58);background:rgb(var(--grey));
border:solid;border:var(--solids);border-width:1px;border-width:var(--onepixel);border-color:rgb(217,27,91);border-color:rgb(var(--theme));
border-radius:5px;border-radius:var(--fivepixels);
}

#sidebar ul:last-of-type li:last-of-type{padding-bottom:1rem;}
#sidebar li{padding-right:.5rem;}
#sidebar a{text-decoration:none;text-decoration:var(--nought);}
</style>
<h5>Links</h5>
<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;
margin-left:.5rem;
background:rgb(66,58,58);background:rgb(var(--grey));
border:solid;border:var(--solids);border-width:1px;border-width:var(--onepixel);border-color:rgb(217,27,91);border-color:rgb(var(--theme));
border-radius:5px;border-radius:var(--fivepixels);
}

#sidebar ul:last-of-type li:last-of-type{padding-bottom:1rem;}
#sidebar li{padding-right:.5rem;}
#sidebar a{text-decoration:none;text-decoration:var(--nought);}</style>
<h5>Contacts</h5>
<ul>
<li><a href="/contact">Contact Us</a></li>
<li><a href="">Email</a></li>
<li><a href="">Facebook</a></li>
</ul>
</figure>

I know it is by design, that the two <style></style> elements are being output but I'm hoping to achieve a better design so if you have any ideas they would be greatly appreciated since I'm not sure if the only way is to have each <ul></ul> in a separate Perch Block.

Regards,
Mathew Doidge

Mathew Doidge 2 points

3 years ago

If you're only wanting the style tags once, could you not place them in the <perch:before>?
Hussein Al Hammad

Hussein Al Hammad 105 points
Registered Developer

3 years ago

It looks like you are adding the same block more than once:

<style>.links{
padding-right:1.5rem;
margin-left:.5rem;
background:rgb(66,58,58);background:rgb(var(--grey));
border:solid;border:var(--solids);border-width:1px;border-width:var(--onepixel);border-color:rgb(217,27,91);border-color:rgb(var(--theme));
border-radius:5px;border-radius:var(--fivepixels);
}

#sidebar ul:last-of-type li:last-of-type{padding-bottom:1rem;}
#sidebar li{padding-right:.5rem;}
#sidebar a{text-decoration:none;text-decoration:var(--nought);}
</style>
<h5>Links</h5>
<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>

And here:

<style>.links{
padding-right:1.5rem;
margin-left:.5rem;
background:rgb(66,58,58);background:rgb(var(--grey));
border:solid;border:var(--solids);border-width:1px;border-width:var(--onepixel);border-color:rgb(217,27,91);border-color:rgb(var(--theme));
border-radius:5px;border-radius:var(--fivepixels);
}

#sidebar ul:last-of-type li:last-of-type{padding-bottom:1rem;}
#sidebar li{padding-right:.5rem;}
#sidebar a{text-decoration:none;text-decoration:var(--nought);}</style>
<h5>Contacts</h5>
<ul>
<li><a href="/contact">Contact Us</a></li>
<li><a href="">Email</a></li>
<li><a href="">Facebook</a></li>
</ul>

A block tag outputs what's inside it. If you have <style> in your block template and add the block more than once on the same page, then the <style> will be output to your document more than once because that's how you set up your block template.