Forum
Perch and the HTML5 Template tag
Hi,
I have the following template:
<template id="sidebar_template">
<script>
var sidebartemplate,sidebarclone,sidebarhost;
var scenario;
</script>
<style>
.sidebar{margin:1.5rem 1rem 0 .75rem;padding:0 1rem 1rem 0;white-space:nowrap;}
@media(max-width:767px){.sidebar{display:none;}}
</style>
<div class="<perch:content id="sideclass" type="select" label="Class" options="sidebar,sidebar image_sidebar,sidebar image_sidebar fader" help="Select whether Sidebar uses a List of Links, Single image or Image fader (mutually exclusive)"/>">
</div>
</template>
<div id="sidebar"></div>
<script>
sidebartemplate=document.querySelector('#sidebar_template');
sidebarclone=document.importNode(sidebartemplate.content,true);
sidebarhost=document.querySelector('#sidebar');
sidebarhost.appendChild(sidebarclone);
</script>
Which generates content that can supposedly be reused in the browser but when I attempt to do that, i.e. by instancing another Perch template:
<template id="sidebar_template1">
<script>
var sidebartemplate1,sidebarclone1,sidebarhost1;
var scenario;
</script>
<style>
.page .sidebar{display:none;}
@media(max-width:767px){.sidebar{display:block;margin:1rem .25rem 0 .5rem;}}
@media(max-width:479px){.sidebar{display:none;}}
</style>
<div class="<perch:content id="sideclass"/>">
</div>
</template>
<div id="sidebar1"></div>
<script>
sidebartemplate1=document.querySelector('#sidebar_template1');
sidebarclone1=document.importNode(sidebartemplate1.content,true);
sidebarhost1=document.querySelector('#sidebar1');
sidebarhost1.appendChild(sidebarclone1);
</script>
I get a <div></div>
with an empty class and in Perch I get a fillable field.
I'm wondering if anyone has any experience using HTML5 templates with Perch, since it would be very nice to be able to integrate the two properly, without having to use !important
rules throughout my markup.
I am using perch_content_custom()
and perch_content_create()
if that makes any difference.
Thanks for any help or assistance.
I don't understand what you're asking. Perch doesn't care what HTML tags are in your template.
Hi Drew,
Thank you for replying.
It could be simpler than what I am thinking but I thought that if I simply referenced an
id
that Perch would be able to use the content in another .html template.Regards
I still have no idea what you're asking. Can you show us the code that isn't working?
Drew,
The
id
in the first template:is not coming through in the second:
How are these templates being used?
You only have access to the content for an ID if you are using the same region (with perch_content_custom). It's not a way to include any other content you have created.
I also have no idea what this has to do with the HTML5 template element.
Hi Rachel,
I was using them (or hoping) to use them in the same page, by declaring
perch_content_create
for what are essentially two different regions calling the same template.For now I am having to use
!important
rules, as the second time the template is called a<style></style>
element cannot be used.I hope that has clarified that a bit more.
Regards
Are you using two different regions and trying to pull the content from "Region1" into "Region2"? If so, you'll need to add an array to your PHP file when calling Region2. Like so: