Forum
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.
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:
Hi Hussein,
Thank you for putting me on track.
Here is my revised 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 theid=""
for the<perch:content/>
element?Thank you once again
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"
tooptions="Home|0, Custom|1, Custom1|2, Custom2|3, About|4"
.More on this in the docs.
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.