Forum
Alternate between elements as a selection
Hi,
I have the following template:
<template id="bottom_template">
<style><perch:template path="bottom_styles.css"/></style>
<perch:blocks>
<perch:block type="flex" label="Flexbox">
<style><perch:template path="bottom_services_styles.css"/></style>
<h3>Services</h3>
<perch:if exists="quote"><blockquote cite="<perch:content id="citation" type="text" label="Citation"/>"><perch:content id="quote" type="text" label="Blockquote"/></blockquote></perch:if>
<p><perch:content id="caption" type="text" label="Caption"/></p>
<figure>
<h4><perch:if exists="link1"><a href="<perch:content id="link1" type="text" label="Link 1" divider-before="Links 1"/>"><perch:content id="text1" type="text" label="Text 1"/></a><perch:else/><perch:content id="text1"/></perch:if></h4>
<perch:if exists="link1"><picture><a href="<perch:content id="link1"/>"><img src="<perch:content id="image1" type="text" label="Image 1"/>" alt="<perch:content id="alt1" type="text" label="Alternate Text" help="Alternate text is required for HTML5 validity when using images"/>"></a></picture><perch:else/><picture><img src="<perch:content id="image1"/>" alt="<perch:content id="alt1"/>"></picture></perch:if>
<perch:if exists="spanned1"><span><perch:content id="spanned1" type="text" label="Text Content" help="Caption for Image 1"/></span></perch:if>
</figure>
<figure>
<h4><perch:if exists="link2"><a href="<perch:content id="link2" type="text" label="Link 2" divider-before="Links 2"/>"><perch:content id="text2" type="text" label="Text 2"/></a><perch:else/><perch:content id="text2"/></perch:if></h4>
<perch:if exists="link2"><picture><a href="<perch:content id="link2"/>"><img src="<perch:content id="image2" type="text" label="Image 2"/>" alt="<perch:content id="alt2" type="text" label="Alternate Text" help="Alternate text is required for HTML5 validity when using images"/>"></a></picture><perch:else/><picture><img src="<perch:content id="image2"/>" alt="<perch:content id="alt2"/>"></picture></perch:if>
<perch:if exists="spanned2"><span><perch:content id="spanned2" type="text" label="Text Content" help="Caption for Image 2"/></span></perch:if>
</figure>
<figure>
<h4><perch:if exists="link3"><a href="<perch:content id="link3" type="text" label="Link 3" divider-before="Links 3"/>"><perch:content id="text3" type="text" label="Text 3"/></a><perch:else/><perch:content id="text3"/></perch:if></h4>
<perch:if exists="link3"><picture><a href="<perch:content id="link3"/>"><img src="<perch:content id="image3" type="text" label="Image 3"/>" alt="<perch:content id="alt3" type="text" label="Alternate Text" help="Alternate text is required for HTML5 validity when using images"/>"></a></picture><perch:else/><picture><img src="<perch:content id="image3"/>" alt="<perch:content id="alt3"/>"></picture></perch:if>
<perch:if exists="spanned3"><span><perch:content id="spanned3" type="text" label="Text Content" help="Caption for Image 3"/></span></perch:if>
</figure>
</perch:block>
<perch:block type="contact" label="Contact">
<style><perch:template path="bottom_contact_styles.css"/></style>
<div class="foot_left_contact">
<address>
<span class="proprietor"></span>
<br>
<div><span class="contact"></span><span><a href="tel:"></a></span></div>
<div><span><svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 29 29"><path d="M26.4 0H2.6C1.714 0 0 1.715 0 2.6v23.8c0 .884 1.715 2.6 2.6 2.6h12.393V17.988h-3.996v-3.98h3.997v-3.062c0-3.746 2.835-5.97 6.177-5.97 1.6 0 2.444.173 2.845.226v3.792H21.18c-1.817 0-2.156.9-2.156 2.168v2.847h5.045l-.66 3.978h-4.386V29H26.4c.884 0 2.6-1.716 2.6-2.6V2.6c0-.885-1.716-2.6-2.6-2.6z" fill-rule="evenodd"></path></svg></span><a href=""><span></span></a></div>
<div><span><svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 29 19"><g transform="matrix(0.05974319,0,0,0.05974319,0,-4.8884268)"><path d="m 0,81.824 0,321.763 485.411,0 0,-321.763 L 0,81.824 Z M 242.708,280.526 43.612,105.691 l 398.187,0 -199.091,174.835 z m -79.311,-37.877 -139.53,122.529 0,-245.059 139.53,122.53 z m 18.085,15.884 61.22,53.762 61.22,-53.762 138.002,121.187 -398.437,0 137.995,-121.187 z m 140.526,-15.878 139.535,-122.536 0,245.059 -139.535,-122.523 z"></path></g></svg></span><a href="mailto:"><span></span></a></div>
</address>
</div>
<div class="foot_centre_contact">
<a href=""><span><svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 29 29"><path d="M26.4 0H2.6C1.714 0 0 1.715 0 2.6v23.8c0 .884 1.715 2.6 2.6 2.6h12.393V17.988h-3.996v-3.98h3.997v-3.062c0-3.746 2.835-5.97 6.177-5.97 1.6 0 2.444.173 2.845.226v3.792H21.18c-1.817 0-2.156.9-2.156 2.168v2.847h5.045l-.66 3.978h-4.386V29H26.4c.884 0 2.6-1.716 2.6-2.6V2.6c0-.885-1.716-2.6-2.6-2.6z" fill-rule="evenodd"></path></svg></span></a>
<a href="><span><svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 29 19"><g transform="matrix(0.05974319,0,0,0.05974319,0,-4.8884268)"><path d="m 0,81.824 0,321.763 485.411,0 0,-321.763 L 0,81.824 Z M 242.708,280.526 43.612,105.691 l 398.187,0 -199.091,174.835 z m -79.311,-37.877 -139.53,122.529 0,-245.059 139.53,122.53 z m 18.085,15.884 61.22,53.762 61.22,-53.762 138.002,121.187 -398.437,0 137.995,-121.187 z m 140.526,-15.878 139.535,-122.536 0,245.059 -139.535,-122.523 z"></path></g></svg></span></a>
</div>
<div class="foot_right_contact">
<a href=""><span></span></a>
<a href="mailto:"><span></span></a>
</div>
</perch:block>
</perch:blocks>
</template>
<aside id="bottom" <perch:if exists="contactclass">class="<perch:content id="contactclass" type="select" label="Contact class" options="Contact|contact" help="Leave empty unless contact section is used" allowempty="true"/>"</perch:if>></aside>
<script><perch:template path="bottom_script.js"/></script>
for which I would like to have the ability of choosing between <nav></nav>
and <aside></aside>
elements depending on the outputted content so I was wondering if this is possible since I haven't found any information other Perch Conditionals.
Thanks for any help or assistance.
P.S. It's great now we can use filetypes other than .html in Perch Templates, a very welcome improvement
Can you give us more details? Do you want to check whether content exists, check a field's value or something else?
Hi Hussein,
I am simply trying to select different elements, i.e. either use a
<nav></nav>
or an<aside></aside>
element.I know I can use conditionals to output different elements but I would simply like to be able to do this arbitrarily.
I hope this gives you enough information.
Thanks for replying
Based on what?
Your aim to use
<section>
or<nav>
is clear. What's not clear is how you want to decide which one to use.For example, you can have a checkbox field in your edit form to toggle between the two with the help of conditional tags. This is based on user (editor) input.
That sounds to be what I'd need but I'm wondering whether there is another way or if Conditional Tags are the only way.
Regards
If you want to give the editor the ability to choose then that's the way to go.
Hi Drew,
I did this:
but it never seems to evaluate, i.e. I only ever get
<aside></aside>
What does
<perch:showall />
output for your link fields?It shows the following (some parts redacted):
So it looks like those are set - would you agree?
Yes but I have no idea why the output defaults to
<aside></aside>
when there are values present for links (either AND or OR should work).I tried
not-exists
and that outputs<nav></nav>
so it seems that while the values do exist, for some reason Perch says they do not.I also tried using
<perch:before></perch:before>
and<perch:after></perch:after>
from within a<perch:block></perch:block>
but due to my use of a HTML5<template></template>
element, the content only outputs within#document-fragment
.I thought it might be because I am checking for values from outside of a
<perch:blocks></perch:blocks>
tag or that it may be some kind of Scoping issue but it seems Scoping only applies to content that is outside of a<perch:blocks></perch:blocks>
element, whereas I am trying to access content that is within a Perch `<block></block>.This is the script I use to instance content from within a HTML5
<template></template>
:Are you inside a block and trying to reference values outside of that block?
Hi Drew,
I believe I am trying to do the opposite in fact, that I am trying to use values that are inside a
<perch:block></perch:block>
or<perch:blocks></perch:blocks>
tag, to verify whether conditions are true or not, i.e. viaperch:if exists
while usingAND
orOR
to verify multiple conditions at once.Of course, only one condition needs to evaluate to true, e.g. in the case of
OR
but with respect toAND
all conditions must evaluate to true, except when usingperch:if not-exists
but even when verifying a single value, nothing is working for me and I'm suspicious it is due to the fact that I am running a conditional from outside the<perch:blocks></perch:blocks>
tag.What I don't know of course is how this might actually work in practice, since I am not a developer but saying that, as a workaround, I created the following code:
and while not as elegant as I'd like, due to the fact that I must now involve the Editor; it is nonetheless a solution.
Best regards