Forum

Thread tagged as: Question, Problem

Choosing between templates

I created this thread some time ago:

https://forum.grabaperch.com/forum/07-21-2016-perch-select-or-if-to-choose-between-templates

but never really needed a solution until now.

To answer that question, yes Blocks are fantastic but now that we can use filetypes other than .html as template content, it means things like choosing between different CSS files based on a list should (in my view at least) be possible.

So my question, is, when I have a template:

<template id="upper_template">
<style><perch:template path="upper_styles.css"/></style>
<style><perch:template path="heading_three_styles.css"/></style>
<perch:blocks>

<!--* Article Image *-->

<perch:block type="picture" label="Article Image">
<style><perch:template path="upper_image_styles.css"/></style>
<picture>
<source srcset="<perch:content id="webp" type="text" label="WebP image"/>" type="image/webp">
<img src="<perch:content id="jpeg" type="text" label="JPEG image"/>" alt="<perch:content type="text" id="alt" label="Alternate Text" help="Define alternate text for JPEG image"/>" class="<perch:content id="imageclass" type="select" label="Image Class" options="Home|image_home,Custom|image_custom,Custom 1|image_custom1,Custom 2|image_custom2,About|image_about" help="Select Image Classname" allowempty="true"/>">
</picture>
</perch:block>

<!--* Heading 3 & Paragraphs *-->

<perch:block type="heading" label="Heading 3 & Paragraphs">
<perch:template path="_paragraph_content.html"/>
</perch:block>

</perch:blocks>
</template>

<article></article>

<script><perch:template path="upper_script.js"/></script>

I need to be able to choose between stylesheets, and since I am already in a Perch Block element, I therefore need another mechanism, eg.

<style><perch:template path="upper_image_styles.css"/></style> or <style><perch:template path="upper_image_styles1.css"/></style>

I do hope this is possible.
Garth Holmes

Garth Holmes 0 points

  • 3 years ago
Hussein Al Hammad

Hussein Al Hammad 105 points
Registered Developer

3 years ago

Have you considered handling this with a select (or a checkbox if you only have 2 options) field and conditional tags?

This is an example using a checkbox:

<perch:content id="fancy_styles" type="checkbox" value="1" label="Fancy styles" suppress="true" />

<perch:if exists="fancy_styles">
    <style><perch:template path="fancy.css" /></style>
<perch:else/>
    <style><perch:template path="regular.css" /></style>
</perch:if>
Garth Holmes

Garth Holmes 0 points

3 years ago

Hi Hussein,

Thank you for putting me on track.

Here is my revised Perch Block:

<perch:block type="picture" label="Article Image">
<style><perch:template path="upper_image_styles.css"/></style>
<perch:content id="upperimagestyles" type="select" options="Home,Custom,Custom1,Custom2,About" label="Article Image Styles" suppress="true"/>
<perch:if id="upperimagestyles" value="0"><style><perch:template path="upper_image_home_styles.css"/></style></perch:if>
<perch:if id="upperimagestyles" value="1"><style><perch:template path="custom_image_styles.css"/></style></perch:if>
<perch:if id="upperimagestyles" value="2"><style><perch:template path="custom1_image_styles.css"/></style></perch:if>
<perch:if id="upperimagestyles" value="3"><style><perch:template path="custom2_image_styles.css"/></style></perch:if>
<perch:if id="upperimagestyles" value="4"><style><perch:template path="about_image_styles.css"/></style></perch:if>
<picture>
<source srcset="<perch:content id="webp" type="text" label="WebP image"/>" type="image/webp">
<img src="<perch:content id="jpeg" type="text" label="JPEG image"/>" alt="<perch:content type="text" id="alt" label="Alternate Text" help="Define alternate text for JPEG image"/>" class="<perch:content id="imageclass" type="select" label="Image Class" options="Home|image_home,Custom|image_custom,Custom 1|image_custom1,Custom 2|image_custom2,About|image_about" help="Select Image Classname" allowempty="true"/>">
</picture>
</perch:block>

which seems correct however no styles are output so I'm wondering if it needs to be wrapped in a <perch:if></perch:if> tag or can they simply refer to the id="" for the <perch:content/> element?

Thank you once again
Hussein Al Hammad

Hussein Al Hammad 105 points
Registered Developer

3 years ago

Almost there. You need to modify your perch:if tags or the values of the select field.

You can change <perch:if id="upperimagestyles" value="0"> to <perch:if id="upperimagestyles" value="Home">

Or

You can change options="Home,Custom,Custom1,Custom2,About" to options="Home|0, Custom|1, Custom1|2, Custom2|3, About|4".

More on this in the docs.
Garth Holmes

Garth Holmes 0 points

3 years ago

You can change options="Home,Custom,Custom1,Custom2,About" to options="Home|0, Custom|1, Custom1|2, Custom2|3, About|4".

I did the latter and I also used allowempty="true" on the <perch:content/> element, which meant that value 0 was reserved.

Thank you very much for your guidance with that and for such easy to grasp presentations.