Forum

Thread tagged as: Question

Using content from a perch:content id="" with PerchSystem::set_var

Hi,

I have a file that is accessed by every php file in a website:

<?php include($_SERVER['DOCUMENT_ROOT'].'/perch/runtime.php');?>
<?php set_include_path($_SERVER['DOCUMENT_ROOT']);?>
<?php preg_match('/MSIE (.*?);/',$_SERVER['HTTP_USER_AGENT'],$matches);
if(count($matches)<2){preg_match('/Trident\/\d{1,2}.\d{1,2};rv:([0-9]*)/',$_SERVER['HTTP_USER_AGENT'],$matches);}
$userAgent=isset($_SERVER['HTTP_USER_AGENT'])
?strtolower($_SERVER[$userAgent])
:'';
if(count($matches)>1){Header("Location:/unsupported/");}
?>
<?php header('Last-modified: . the_modified_date()');?>
<?php perch_layout('global.header',array('business_name'=>'Name of the Business'));?>
<?php
$url="https://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
PerchSystem::set_vars(array(
'googleid'=>'',
'fbappid'=>'',
'sitename'=>'Name of the Site',
'url'=>$url,
'heading3',perch_pages_title(true)
));
?>

which, denies IE among other things, that is later used:

<title><?php perch_layout_var('business_name');?> — <?php perch_pages_title();?> ‑ <?php perch_pages_navigation_text();?></title>
<meta charset="utf-8">
<?php perch_page_attributes(array('template'=>'default.html'));?>

and calls on a perch_page_attributes file (default.html):

<meta name="google-site-verification" content="<perch:pages id="googleid" type="hidden"/>">
<meta name="description" content="<perch:pages id="description" label="Description" type="textarea" escape="true" count="chars"/>">
<meta name="keywords" content="<perch:pages id="keywords" label="Keywords" type="textarea" escape="true" help="Separate with commas" count="chars"/>">
<meta property="fb:app_id" content="<perch:pages id="fbappid" type="hidden"/>">
<meta property="og:site_name" content="<perch:pages id="sitename" type="hidden"/>">
<meta property="og:url" content="<perch:pages id="url" type="hidden"/>">
<meta property="og:title" content="<perch:pages id="og_title" label="Social title" type="text" divider-before="Facebook Open Graph Tags"/>">
<meta property="og:description" content="<perch:pages id="og_description" label="Social description" type="textarea" escape="true"/>">
<meta property="og:image" content="">

however if there is an image on each page, I would like to be able to access this as per content="" using an id="" from a region in the current page (as per a .html template), e.g. for <meta property="og:image" content=""> so is this at all possible?

The .html template is:

<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="Class" options="image_home,image_custom,image_custom1,image_custom2,image_about" help="Select image classname"/>">
</picture>
</template>

and I would like to be able to use the attribute value for the <img src=""> element. I am aware I can create a variable using PerchSystem::set_var() and use the assigned value in a .html template but I am hoping to be able to do the reverse.

Any help, as always is greatly appreciated.

P.S. I tried using <meta property="og:image" content="<perch:content id="_id1" type="hidden"/>"> to no avail so I'm not sure if what I am doing is wrong.

Garth Holmes

Garth Holmes 0 points

  • 4 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

First, don't use a field with an ID of _id as that's used by Perch internally, so you're going to suffer a world of strange occurrences.

Where's the content defined? Is it a page attribute?

Hi Drew,

I've updated my template and changed the information in this topic.

As to the content, I have tried to define the order of what is being used, but the first codeblock (global.inc) is referenced by this:

<?php include('_includes/global.inc');?>
<?php perch_content_create('upper_content',array('template'=>'_upper_content.html'));?>

that references a .html template (_upper_content.html) which has the last codeblock in it. Here is the full .html template:

<template id="image_template">
<style>
#image{padding-right:.75rem;}
@media(max-width:480px){#image{padding-right:0;}}

/* home */

.image_home{width:470px;height:705px;}
@media(max-width:1366px){.image_home{width:330px;height:495px;}}
@media(max-width:1366px) and (orientation:landscape){.image_home{width:349px;height:523px;}}
@media(max-width:1024px){.image_home{width:250px;height:375px;}}
@media(max-width:1024px) and (orientation:portrait){.image_home{width:370px;height:555px;}}
@media(max-width:768px){.image_home{width:265px;height:398px;}}
@media(max-width:480px){.image_home{width:290px;height:435px;}}

/* custom */

.image_custom{width:250px;height:401px;}
@media(max-width:1139px){.image_custom{width:190px;height:305px;}}
@media(max-width:1024px){.image_custom{width:250px;height:401px;}}
@media(max-width:768px){.image_custom{width:230px;height:369px;}}
@media(max-width:480px){.image_custom{width:290px;height:468px;}}

/* custom1 */

.image_custom1{width:332px;height:420px;}
@media(max-width:1024px){.image_custom1{width:250px;height:316px;}}
@media(max-width:480px){.image_custom1{width:290px;height:367px;}}

/* custom2 */

.image_custom2{width:350px;height:459px;}
@media(max-width:1366px){.image_custom2{width:310px;height:406px;}}

/* about */

.image_about{width:230px;height:353px;}
@media(max-width:480px){.image_about{width:290px;height:446px;}}
</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="Class" options="image_home,image_custom,image_custom1,image_custom2,image_about" help="Select image classname"/>">
</picture>
</template>

<div id="image"></div>

<script>
var imagearray=["imagetemplate","imageclone","imagehost"];
imagearray[0]=document.querySelector('#image_template');
imagearray[1]=document.importNode(imagearray[0].content,true);
imagearray[2]=document.querySelector('#image');
imagearray[2].appendChild(imagearray[1]);
</script>

I'm guessing that what I am asking is, is it possible to use data from a <perch:content id=""> as per an attribute since I've noticed that references in the page attribute .html files actually have <perch:pages id=""> instead.

Thank you for pointing to my error and I hope I have given enough information.

Drew McLellan

Drew McLellan 2638 points
Perch Support

The only way to do that would be to fetch the content from the region and pass it into your template wherever you need it.

Hi Drew,

Thank you for writing back.

I will look into this and maybe post clearer code.

Kind regards