Using multiple columns dynamically in a template

Sometimes you will want to use more than one column in a template, but not on all pages.
In this article I will explain how to do this.


Since a WebsiteBaker template is actually a PHP script, we can build dependencies in this script.
A simple test to see if a certain defined section is used or not can help you to change the layout of your website.

The idea is to use the bufferring feature of PHP to capture any page content for a certain section, and use the buffered variable to check if sections are used in the requested page.

Step 1: Declaring multiple sections

Sections/blocks are configured in the info.php of your template.
If you want to use a layout like the one below you would need to declare 5 sections.

Click for a larger view

In your infor.php you will need to write:

$block[1] = 'Main';
$block[2] = 'Right from main';
$block[3] = 'Left from main';
$block[4] = 'Full top';
$block[5] = 'Full bottom';

Step 2: Reading the content in variables

PHP has a nice method for buffering output before it is actually sent out.
Using the Output Control Functions we can save the output in a variable and reuse the content later.

To capture a single block we would use:

ob_start();
page_content(1);
$content=ob_get_contents();
ob_end_clean();

Now we can do a simple check to see if the variable $content was used.
If block 1 is used there will be data inside of the variable $content, so the check is very simple:

if($content) {
    echo $content;
}

In our 5 blocks example we would need to do this 5 times.
For keeping the top of your template a little bit clean we can combine the four lines into one line:

ob_start(); page_content(1); $main=ob_get_contents(); ob_end_clean();
ob_start(); page_content(2); $right=ob_get_contents(); ob_end_clean();
ob_start(); page_content(3); $left=ob_get_contents(); ob_end_clean();
ob_start(); page_content(4); $fulltop=ob_get_contents(); ob_end_clean();
ob_start(); page_content(5); $fullbottom=ob_get_contents(); ob_end_clean();

Now we will have 5 variables for all blocks we want to be able to use in our template.

Step 3: output one or more contentblocks

Now we can test if a block is used or not, we can dynamically create the output for the website.

A first test would be to output the "Full top" block. If it exists we want to write a div that uses the full width of the content area.

<?php if ($fulltop) { ?>
<div class="fullwidth"><?php echo $fulltop; ?></div>
<?php } ?>

Now that is pretty simple, but for the next row it gets a bit more complicated.
We want to be able to use only the main content block (full width) or the Main and Right, the Left and Main or the Left and Main and Right block. (Note that the Main block should always be used!)
We will need to do some more tests to do that.

<?php if ($right && $main && $left) { ?>
    <div class="left_33"><?php echo $left ?></div>
    <div class="main_33"><?php echo $main ?></div>
    <div class="right33"><?php echo $right ?></div>
<?php } elseif ($right && $main) { ?>
    <div class="main_66"><?php echo $main ?></div>
    <div class="right_33"><?php echo $right ?></div>
<?php } elseif ($left && $main) { ?>
    <div class="left_33"><?php echo $left ?></div>
    <div class="main_66"><?php echo $main ?></div>
<?php } elseif ($main) { ?>
    <div class="main_100"><?php echo $main ?></div>
<?php } ?>
<div style="clear:both;"></div>

Note the classes used are "left33" (left column, 33% width), "main33" (middle column 33%), "main66" (left or right main column 66%), "main100" (main content 100%) and "right33" (right column 33%).
Since we need to "float" these elements to get them positioned next to eachother we will need to clear the floats afterworth.

Finaly we can do the test to see if the Full bottom should be used too:

<?php if ($fullbottom) { ?><div class="fullwidth"><?php echo $fullbottom; ?></div><?php } ?>


Using the code above we now can create any conbination of blocks in any page of our website.

Step 4: Setup a page with multiple blocks

In WebsiteBaker create a new page.
By default it will use block 1 for the content. Thats great because our tests assume at least the Main content block (block 1) should be available.
Next click on "Manage sections" in the right top of the screen and add all contentblocks you would like to use. Set each block to the correct area and do not forget to click on the save button.

We now can create all kind of layouts dynamically.

This article is tagged with:
Layout PHP Tricks Templates

Related articles

Keep visitors (and Google) away when you are building your website

If you are developing your new website you (or your customer) will need to check how things look every now and then.
Using this solution you can only browse the website after a password is succefully posted.

Read the full article

Comments on this article - Note: comments will be reviewd by a moderator before publishing!

John
Apr 11, 2017 - 20:59:01

Hoi Ruud. Deze oplossing zag ik inderdaad al bij de templates. Hoe moeilijk of simpel is het om de template aan te passen zodat je bijvoorbeeld onder twee kolommen een 100% kunt gebruiken om vervolgens weer met kolommen door te gaan?
Dus:
Header 100%
Kolom 33% kolom 66%
Kolom 100%
Kolom 33% kolom 66%
footer 100%

Thanks! OOk voor deze oplossing!

Ruud - 11-04-2017 21:47:37

De techniek kan je zo vaak gebruiken (herhalen) als je wilt.
Blokken definieren in de info.php, geef ze naampjes als main2, left2, right2, full2 enz..
Noem ze in de template ook $main2, $left2, enz..

Ruud
Jul 07, 2015 - 14:34:56

Zojuist een voorbeeld template in het forum geplaatst:
http://forum.websitebaker.org/index.php/topic,28459.msg199247.html#msg199247

Henri
Jul 07, 2015 - 07:45:57

Kan er een voorbeeld template gemaakt worden zodat ik het 5 blocks voorbeeld werkend krijg.

chio www.beesign.com
Apr 27, 2015 - 17:35:24

I have started a discussion (german) about Template standards:
http://www.websitebaker.at/topics/finding-standards-templates-und-module-css.html
http://forum.websitebaker.org/index.php/topic,28289.0.html

There are also thougts about usage of block in it.

I think its important to get standards now. WB is not prepared for making quickly pages in "Bootstrap-Design" (or whatever is "modern").

chio www.beesign.com
Apr 20, 2015 - 10:34:46

There should be by default one more block:
$block[99] = 'None';

Hans
Sep 15, 2014 - 21:41:37

Hoi Ruud

bedankt voor jouw zoveelste super bijdrage aan "ons" geweldige CMS. Ik sta elke keer weer versteld van de toewijding en kennis van zoveel mensen, waaronder jij en de flexibiliteit van het CMS dat van oorsprong door een toen 14 jarige is gebouwd (dacht ik). Deze handleiding spant echt de kroon trouwens, wat jammer dat dit een verborgen bestaan lijdt, kan de url niet worden vermeld in de WebsiteBaker handleiding of nog weer eens in het forum? Er zijn zoveel mensen die hier iets aan kunnen hebben en iets van kunnen opsteken!

nick
Aug 31, 2014 - 09:46:29

Great solution instead of multiple templates for each page. Could you put a demo index.php template for download

Roland
Jul 22, 2014 - 16:50:09

Beautiful solution, works great!

Typo in example code I believe.

php echo $content

should be

php echo $main

Ruud - 22-07-2014 22:29:34

You are totally right.Fixed it now~

Vincent
Feb 12, 2014 - 12:05:14

Very interesting. Thanks for sharing!

Add your comment

Your name:
Email address:
Website:
Your comment: