header-data gets transfered into body

Phil · July 9, 2015

Hi, another processwire-beginner here. I am recently building my first website and got myself a strange error:

On all pages but the homepage the code from within the head-tags of the delivered html-file gets transfered into the body.

It looks like this (stripped of most html in <body>)

<html class=" js no-touch csstransforms csstransforms3d csstransitions svg js-ready" lang="de">
<head></head>
<body>
<meta content="text/html; charset=utf-8" http-equiv="content-type">
<meta content="width=device-width, initial-scale=1" name="viewport">
<title>Webbaukästen</title>
<meta content="" name="description">
<link href="/site/templates/styles/style-para.css" type="text/css" rel="stylesheet">
<link href="/site/templates/styles/unsemantic-grid-responsive-tablet-no-ie7.css" type="text/css" rel="stylesheet">
<script src="/site/templates/scripts/modernizr.js">
<div id="outer-wrap">
<script src="/site/templates/scripts/main.js">
</body>
</html>

The templates consist of an _init.php to define the variables, the template to fill the variables and a main.php with the basic structure just like in the tutorials. The head-tags are defined in the main.php. So somewhere they get scrambled while the page is calculated and delivered from the CMS.

Does anybody have an idea where I may have made an mistake?

Thanks, Phil

gebeer · July 9, 2015

Hi Phil and welcome to the forum!

I remember that I had a similar problem one time at the beginning with PW. It most likely is caused by some missing closing tag or other html syntax error.

Hard to tell without seeing code. If you can supply your main.php, we can have a look.

Phil · July 9, 2015

This is my main.php, some comments for orientation added:

<?php ?><!DOCTYPE html>
<html lang="de">
<head>
<!--the next 6 lines of code get moved into the body-->
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<title><?php echo $title; ?></title>
	<link rel="stylesheet" type="text/css" href="<?php echo $config->urls->templates?>styles/style-para.css" />
	<link rel="stylesheet" type="text/css" href="<?php echo $config->urls->templates?>styles/unsemantic-grid-responsive-tablet-no-ie7.css" />
	<script src="<?php echo $config->urls->templates?>scripts/modernizr.js"></script>
</head>
<!--two wrapping divs for off-canvas navigation-->
<body>
<div id="outer-wrap">
<div id="inner-wrap">
<div class="grid-container">
<!--header is link to home off-canvas navigation-->
	<header id="header" role="banner">
		<div>
			<h1 class="title-banner">Design Philipp Ahrendt</h1>
			<a class="nav-btn" id="nav-open-btn" href="<?php $homepage->url ?>">Menü</a>
		</div>
	</header>
	<nav id="nav" role="navigation">
		<div>
			<ul>
				<h2 class="title-banner">Menü</h2>
				<?php 
				// top navigation consists of visible children of homepage
				foreach(($homepage->children) as $item) {
				if($item->id == $page->rootParent->id) {
					echo "<li class='is-active'>";
				} else {
					echo "<li>";
				}
				echo "<a href='$item->url'>$item->title</a></li>";
				}
				// output an "Edit" link if this page happens to be editable by the current user
				if($page->editable()) echo "<li class='edit'><a href='$page->editUrl'>Edit</a></li>";
				?>
			</ul>
			<a class="close-btn" id="nav-close-btn" href="#top">Close</a>
		</div>
	</nav>
</div>
<div class="grid-container" id="main">
	<!--main content-->
	<main>
		<?php echo $content; ?>
	</main>
</div>
	<!-- footer -->
<div  class="grid-container" id="footer">
<footer id="footer">
		<p>
			Here be footer!
		</p>
</footer>
</div>
</div>
</div>
<!--script for off-canvas navigation-->
<script src="<?php echo $config->urls->templates?>scripts/main.js"></script>
</body>
</html>

I started with the code from the tutorials and the provided examples. As I already mentioned the homepage is free of the glitch.

Could it possibly be connected to the "Content Type" at the "Files"-Tab of an template? I switched it back to default/empty but tried some other values out of curiosity.

gebeer · July 10, 2015

Hi Phil,

can't see anything wrong here. Except for

<a class="nav-btn" id="nav-open-btn" href="<?php $homepage->url ?>">Menü</a>

is missing the echo statement. So it should read <?php echo $homepage->url ?>.

But this shouldn't be the cause of your problem.

You are saying that this happens on all pages but the home page. So it might be related to something that is wrong with your other templates, e.g. basic-page.php.

You might want to compare them thoroughly to home.php and maybe you can spot the difference. If not, post one of the templates that cause this behaviour.

I don't think that it is related to the "Content Type" at the "Files"-Tab. If you leave these all at defaullt you should be fine.

Phil · July 10, 2015

Good morning gebeer,

thank you for your help. I just fixed the missing echo in _main.php, it is not the reason. So here is one of the misbehaving templates. Still quite minimal.

<?php
//headline
$content = '<article><div class="grid-50 tablet-grid-66 mobile-grid-100 suffix-50 tablet-suffix-33"><h1>'.$title.'</h1>';
//picture if available
if ($page->pictures) {
	$content.='<figure><img class="artikelbild" src="'.$page->pictures->url.'" alt=""></img></figure>';
	}
//add text and close tags
$content.= $page->body;
$content.='</div></article>';

gebeer · July 10, 2015

the html img tag does not have a closing tag, so your code should read

if ($page->pictures) {
	$content.='<figure><img class="artikelbild" src="'.$page->pictures->url.'" alt="" /></figure>';
}

Give this a try and report back.

Is your $page->pictures field for single or for multiple images?

If it is for multiple images, if($page->pictures) will always return true. Then you should do if(count($page->pictures)).

Also, if your image field is set to multiple images (which is default) $page->pictures->url will not work. You'd need to do $page->pictures->first()->url to get the first image.

Have a look here to learn more about images in PW.

EDIT

Just a quick tip to make writing code easier:

If you use double quotes, you can write your variables directly inside the quotes like

$content.="<figure><img class='artikelbild' src='{$page->pictures->first()->url}' alt='' /></figure>";

More about single and double quotes here

Nico Knoll · July 10, 2015

It could be a js thing too, as it seems that you're using a js script like "modernizr". Could you check your console for any errors? And could you post the originally rendered DOM (in chrome you have to do a right click and select "Show Source Coe" instead of copying it from console).

Phil · July 10, 2015

The self-closing img-tag did not help either.

At least your hint on the structure of the image-field-set helps a lot!

Phil · July 10, 2015

Nico, it may really be an issue with js. The only (apparently) broken code is displayed in the console. "Show Source Code" reveals that all data is at least delivered to the right places. So I guess I'll have to examine the js.

Thanks a lot guys!

--- Edit: It was something entirly different: UTF-8 coding instead of UTF-8 w/o BOM. Using Chrome (and its console) revealed some (invisble) code, that scrambled the header. Firebug didn't show it.

Thank you guys again, I learned a lot about Processwire on the way.

Cheers, Phil

Sign In

header-data gets transfered into body

Recommended Posts

Phil

Link to comment

Share on other sites

gebeer

Link to comment

Share on other sites

Phil

Link to comment

Share on other sites

gebeer

Link to comment

Share on other sites

Phil

Link to comment

Share on other sites

gebeer

Link to comment

Share on other sites

Nico Knoll

Link to comment

Share on other sites

Phil

Link to comment

Share on other sites

Phil

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members

Browse

Activity

My Activity Streams

Support

Store

My Details