Forum

Thread tagged as: Question

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

Garth Holmes

Garth Holmes 0 points

  • 3 years ago
Hussein Al Hammad

Hussein Al Hammad 105 points
Registered Developer

depending on the outputted content

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

Hussein Al Hammad

Hussein Al Hammad 105 points
Registered Developer

I would simply like to be able to do this arbitrarily.

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.

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

Drew McLellan

Drew McLellan 2638 points
Perch Support

If you want to give the editor the ability to choose then that's the way to go.

Hi Drew,

I did this:

<<perch:if exists="link1 AND link2 AND link3">nav<perch:else/>aside</perch:if> 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>></<perch:if exists="link1 OR link2 OR link3">nav<perch:else/>aside</perch:if>>

but it never seems to evaluate, i.e. I only ever get <aside></aside>

Drew McLellan

Drew McLellan 2638 points
Perch Support

What does <perch:showall /> output for your link fields?

It shows the following (some parts redacted):

<table class="showall">
<tbody>
<tr>
<th>ID</th><th>Value</th>
</tr>
<tr>
<td><b>businessname</b></td>
<td></td>
</tr>
<tr>
<td><b>googleid</b></td>
<td></td>
</tr>
<tr>
<td><b>fbappid</b></td>
<td></td>
</tr>
<tr>
<td><b>sitename</b></td>
<td></td>
</tr>
<tr>
<td><b>url</b></td>
<td>https://localhost/</td>
</tr>
<tr>
<td><b>heading3</b></td>
<td></td>
</tr>
<tr>
<td><b>perch_page_path</b></td>
<td>/index.php</td>
</tr>
<tr>
<td><b>_id</b></td>
<td>236</td>
</tr>
<tr>
<td><b>_blocks</b></td>
<td>
<pre>Array
(
    [0] => Array
        (
            [citation] => 
            [quote] => 
            [caption] => 
            [link1] => weddings
            [text1] => Weddings
            [image1] => 
            [alt1] => 
            [spanned1] => 
            [link2] => occasions
            [text2] => Occasions
            [image2] => 
            [alt2] => 
            [spanned2] => 
            [link3] => commercial
            [text3] => Commercial
            [image3] => 
            [alt3] => 
            [spanned3] => 
            [_block_type] => flex
            [_block_id] => osifuu
            [_block_index] => 0
        )

)
</pre>
</td>
</tr>
<tr>
<td><b>contactclass</b></td>
<td></td>
</tr>
<tr>
<td><b>_page</b></td>
<td>/index.php</td>
</tr>
<tr>
<td><b>_pageID</b></td>
<td>2</td>
</tr>
<tr>
<td><b>_sortvalue</b></td>
<td>1000</td>
</tr>
<tr>
<td><b>perch_item_first</b></td>
<td>true</td>
</tr>
<tr>
<td><b>perch_item_last</b></td>
<td>true</td>
</tr>
<tr>
<td><b>perch_item_zero_index</b></td>
<td>0</td>
</tr>
<tr>
<td><b>perch_item_index</b></td>
<td>1</td>
</tr>
<tr>
<td><b>perch_item_rev_index</b></td>
<td>1</td>
</tr>
<tr>
<td><b>perch_item_rev_zero_index</b></td>
<td>0</td>
</tr>
<tr>
<td><b>perch_item_odd</b></td>
<td></td>
</tr>
<tr>
<td><b>perch_item_count</b></td>
<td>1</td>
</tr>
<tr>
<td><b>perch_namespace</b></td>
<td>perch:content</td>
</tr>
</tbody>
</table>
Drew McLellan

Drew McLellan 2638 points
Perch Support

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>:

const bottomarray=["bottomtemplate","bottomclone"];
bottomarray[0]=document.querySelector('#bottom_template');
bottomarray[1]=document.importNode(bottomarray[0].content,true);
document.querySelector('#bottom').appendChild(bottomarray[1]);
Drew McLellan

Drew McLellan 2638 points
Perch Support

Are you inside a block and trying to reference values outside of that block?

Drew McLellan said:

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. via perch:if exists while using AND or OR 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 to AND all conditions must evaluate to true, except when using perch: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:

<perch:content id="navigator" type="checkbox" label="Navigation Content" suppress="true"/>

<perch:if id="navigator" value="1">
<nav id="bottom" allowempty="true"/>"</perch:if>></nav>
</perch:if>

<perch:if id="navigator" value="0">
<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>
</perch:if>

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