Question about head.inc and footer.inc

[pwired]

About head.inc and foot.inc in a standard processwire installation.

I am puzzled why some html tags are starting in head.inc but don't end in head.inc

Instead they are ended in foot.inc

For example the html tags <div id="content" class="content"> and <div class="container">
are started in head.inc but they are not ended in head.inc

<div id="content" class="content">
        <div class="container">
            <div id="sidebar">

                                    .....more code here

                  </div><!--/sidebar-->
            <div id="bodycopy">


The last line in head.inc holds <div id="bodycopy">
the tags <div id="content" class="content"> and <div class="container">
are not closed in head.inc. These html tags are closed in foot.inc

Now these html tags are spread over 2 inc files.

Why is that ? Would it not be more logical to end these html tags in head.inc
where they also started and only put footer html code in foot.inc ?

[adrian]

If you view the outputted HTML source of a page you'll see that those container divs need to span most of the document. The code in each of your templates needs to be between these. This is the only way to achieve this when you have both head and foot includes. Another approach is to have a main.inc that gets included at the bottom of each template. Then you can have all these container divs which control the general layout of the site in one file. Then in your template you build up a variable like $content = '' then $content .= 'content text', etc. Then echo this variable in the main.inc file. You may want to separate content into more than one variable, such as $header, $body, $sidebar.

Lots of different ways to end up with the same result.

Does that help?

[pwired]

The code in each of your templates needs to be between these.

Do you mean that footer html code is sometimes embedded or part of html code that started in head.inc ?

And therefore the code is spread over 2 inc files ? I imagined myself that it would be possible to have

footer html code completely separated from the rest.

[diogo]

Think of the template file as a puzzle, and the inc files as the pieces of the puzzle. The goal is to draw an html file in the browser, and each piece does it's part. Because php doesn't understand html tags, the pieces of the puzzle don't correspond necessarily to the complete html tags, they just draw the puzzle from top to bottom, unaware of what they're drawing, until it's complete.

[adrian]

Sorry if I didn't explain well. The approach of having the content div open in the head.inc and close in foot.inc is just to make your life easier.

You could have the head.inc just contain the html declaration, head tags, and things like banner and navbar, and have the footer contain just the footer div itself, but then you'd be stuck with needing to add the content div open and close tags in each template file. 

diogo's reply just came through and I think he explains it very well. PHP really does just string these elements altogether in the order you specify until the final HTML doc is built. It's pretty cool really

[kongondo]

Good question. This is one of those "one man's meat is another man's poison" sort of situation. There are so many different approaches to doing your template files...No one approach is superior (in most cases ) to another. It is an issue of preference. You can even decide you want all your HTML code with PHP inside in one file. This can result in very long, hard-to-grasp code though. You can decide not to name your includes as .inc but .tpl..PHP will happily include them when asked to do so....Or, you can have as many .inc as you wish to make your head spin trying to guess what is including what . I hope it doesn't confuse you more but have a look at this thread. It has lots of wonderful ideas about approaching your template files.

Having .inc files also helps with dynamism. For instance, your website can have the same header throughout but different footers depending on the page being viewed. There can be a sidebar.inc as well, which will only appear in certain pages and show a sub-menu, a featured article, etc.... I am working on a short tutorial part of which I hope to post here soon...(and on my website whenever that materialises  ) about visualizing your site structure before you build it. Planning is important in these things. Again, people have different approaches. I like to think diagrammatically, at the whole system level. Such an approach helps me visualise the template approach to adopt for a particular job. For instance, what areas of the website are common/shared? What is unique to some pages? How best can I code/design/plan my templates and template files to achieve what I want making best use of logic, KISS and DRY principles and balancing this against common sense and ease of understanding the code? If I come back to the code in a month's time, or if somebody took over my task, would I/they be able to make sense of it all? Sorry for digressing somewhat

[pwired]

but then you'd be stuck with needing to add the content div open and close tags in each template file.

the pieces of the puzzle don't correspond necessarily to the complete html tags,

Thanks for all your replies, sorting this out. Now it starts to make sense to me and can adapt to it.

Without this forum newbies like me will never be able to use the full potential of processwire.

[pwired]

I am now playing around with this stuff. I am using a footer.inc file with nothing in it but </html>

just for using it to close the <html> tag that was started in header.inc

[pwired]

Most part of the html structure on the front end is done in head.inc or whatever .inc you are using. Html tags started in head.inc can be ended in other inc files. Then home.php or basic-page.php are including the inc files so it will show up in the browser. Api calls and php is placed between html tags for functionality. Template files can also be used as controllers with lots of api and php. Getting the hang of it.

[MarcC]

Nice work. Keep in mind that you can use e.g. another approach like a single main.php file. I think Soma explains it pretty well.

[pwired]

Diogo replied:

Think of the template file as a puzzle, and the inc files as the pieces of the puzzle. The goal is to draw an html file in the browser, and each piece does it's part. Because php doesn't understand html tags, the pieces of the puzzle don't correspond necessarily to the complete html tags, they just draw the puzzle from top to bottom, unaware of what they're drawing, until it's complete.

I have thought about that. What if using an include for the body html part of a page (not the body field)

like this: include("./body.inc");

You just put all the html on it's own inside body.inc

This way you don't have to puzzle the contents of echo $page->body;   

between head.inc, topnav.inc, and foot.inc

See below:

<?php

/**

 * Page template

 *

 */

include("./header.inc");

include("./topnav.inc");

include("./body.inc");

include("./footer.inc");

Imho you could not just leave it by just including one .inc but take this one step further with conditional logic

and include an .inc file fitting your needs for a specific page:

if ($page->name;) = somename

then include somename.inc

What do you guys think about this ?

[Pete]

I think for the beginner (and my preference as well) the way it's set up by default is easier to follow.

In your example above, what's in topnav.inc could easily just be in head.inc instead - no need to split it out since I assume the top nav is the same on every page.

[diogo]

This puzzle doesn't have fixed pieces, so there is no limit for what you can do with it. I also this the way Ryan organized things is easier for beginners, but some people are doing precisely the opposite. Something like this:

// all pages have same template file main.php (but different admin templates)

// main.php holds both the header and the footer

// here goes the header...
<!doctype html>
...
<body id="<?= $page->name ?>">

// here we call a .inc file with the name of the admin template
<? include($page->template . ".inc") ?>

// and here goes the footer
</body>
 

[pwired]

In your example above, what's in topnav.inc could easily just be in head.inc instead - no need to split it out since I assume the top nav is the same on every page.

Yes, true. Old cms habits die hard. I have to learn to become more flexible in the approach of the open potential of processwire.