We are transitioning over to a new forum platform. Please post new issues there. Existing threads will be dealt with here unless you choose to move them over. Visit the new forum

Forum

Thread tagged as: Question

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.

Garth Holmes

Garth Holmes 0 points

  • 2 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

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

Drew McLellan

Drew McLellan 2638 points
Perch Support

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:

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

is not coming through in the second:

<div class="<perch:content id="sideclass"/>">
</div>
Rachel Andrew

Rachel Andrew 394 points
Perch Support

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:

perch_content_custom(array('Region1', 'Region2'), array(...));