Tutorials From the archives: Construct This

Luke Stevens / 22nd May, 2007

Working on content heavy sites, you usually get a familiar pattern in the way a site is structured. We will use a sports site for this tutorial, where you have articles on football, basketball, baseball and cricket. The site structure generally boils down to this: a front page, an index page and article page per section, and perhaps some static pages for general ‘about us’ type content.

The template structure can usually be broken up into a header, a footer, a right or left hand column (or both) and a ‘page template’ – the guts of the page, be it an index, article, static page or the front page.

What we’re going to do is stick all those template chunks into a template group called ‘embeds’ (or ‘includes’, or whatever) along with a template called page-constructor.

We’re also going to setup template groups for the different sections of our site – an index group for the default home page, plus a football, basketball, baseball and cricket template group for our respective site sections. Within the section template groups we’re going to create an ‘article’ template to go along with the default index template. So (assuming we have removed index.php) we will have www.eesports.com/football/ to see all the football articles, and www.eesports.com/football/article/some-football-article for an actual article.

Now our template groups should look something like this:

• embeds
• index
• football
• basketball
• baseball
• cricket

In your embeds template group, along with the header, footer, navigation etc, we’re going to create several page templates – an index page, an article page, a static page, and a front page page template. These templates contain the ‘page’ between the header and whatever comes after (a right hand column, or the footer for instance). I like to give them a page- prefix to keep them organised, so you might have page-index, page-article, page-static, page-front etc. We’re going to pass variables to these templates to construct our final templates.

Lets set up those variables in our football templates. This requires a bit of forward planning, as we need to setup our variables beforehand – things we’re going to set in our football/index template (like weblog, section name, active section etc) and pass to our embeds/page-index template via out page-constructor. I’m just going to show you what I used, but the variables you create a really quite arbitrary, so feel free to improvise as you see fit.

So what would the contents of our football/index template look like? Mine looked something like this:

{!-- football index --}
{embed="embeds/page-constructor"
   section_weblogs="football"
   active_section="Football"
   page_title="Football"
   page_type="index"
}

That’s it. We embed the page-constructor and pass a few variables including the weblog/s used for that section, and from that we create the entire page. The variables include the ‘active section’ (used for navigation), the page title (which we can use in the tags in the header) and the section heading for the page. The football/article template would look much the same, except page_type would be set to “article”.

So what does this magical page constructor do? Lets go through an example, step by step, of what it consists of in my example:

Firstly, we embed the embeds/header template. Here we test what kind of page we’re constructing (index/article/static etc), then then decide to pass some of the variables on the the embeds/header template (so we can do things like <title> EE Sports Site: {embed:page_title}</title>, or also embed the entry {title} if it’s an article page. Otherwise (if:else) we just pass the variables on to the header template, so we can do things like set the active navigation ala Derek’s method.

{!-- page-constructor --}
{!-- header --}
{if embed:page_type == "index"}
  {embed="embeds/header" page_title="{embed:page_title}" active_section="{embed:active_section}" page_type="{embed:page_type}"}
  {if:elseif embed:page_type == "article"}
    {embed="embeds/header" page_title="{embed:active_section} » {exp:weblog:entries weblog="{embed:section_weblogs}" disable="trackbacks|pagination|categories|custom_fields|member_data"} {title} {/exp:weblog:entries}" active_section="{embed:active_section}" page_type="{embed:page_type}"}
   {if:else}
    {embed="embeds/header" page_title="{embed:page_title}" active_section="{embed:active_section}" page_type="{embed:page_type}"}
  {/if}

Now comes the fun part where we embed the index, article, static or front page template based on the variables we’ve passed to the page constructor.

{!-- page type --}
{!-- page_type = index --}
{if embed:page_type == "index"}
  {embed="embeds/page-index" section_weblogs="{embed:section_weblogs}" active_section="{embed:active_section}"}
{/if}
{!-- page_type = article --}
{if embed:page_type == "article"}
  {embed="embeds/page-article" section_weblogs="{embed:section_weblogs}" active_section="{embed:active_section}"}
{/if}

Lets say for our article and index pages we also need to include a center column of section-specific content (eg it might contain ‘recent comments from this section’ or something like that). Let’s also say we want to include specific templates based on our sections (Football, Basketball etc) or just a default template, then we can do something like this:

{if embed:page_type == "article" OR embed:page_type == "index"}	
  {if embed:active_section == "Football"}{embed="embeds/center-col-football"}
  {if:elseif embed:active_section == "Basketball"}{embed="embeds/center-col-basketball"}
  {if:elseif embed:active_section == "Baseball"}{embed="embeds/center-col-baseball"}
  {if:else}{embed="embeds/center-col-default"}
  {/if}
{/if}

Now back to the page template embeds! Whether you want to embed your front page this way or not will vary from site to site, depending on how different or similar the front page layout is to the rest of the site.

{!-- page_type = front-page --}
{if embed:page_type == "front-page"}
  {embed="embeds/page-front" section_weblogs="{embed:section_weblogs}" page_title="{embed:page_title}"}
{/if}
{!-- page_type = static --}
{if embed:page_type == "static"}
  {embed="embeds/page-static" section_weblogs="{embed:section_weblogs}" page_title="{embed:page_title}" active_section="{embed:active_section}"}
{/if} 

Finally, we include the right hand column and footer which is common across the entire site. If we wanted to change the right hand column based on the active section then we could include the logic here and include different templates based on different sections, or pass the variable on and keep the logic all in the rhs-col template, whatever is easiest.

{!-- rhs col --}
{embed="embeds/rhs-col"}
{!-- footer --}
{embed="embeds/footer"}

And that’s it for our page constructor!

Now when a user grabs www.eesports.com/football/ , EE accesses football/index, and embeds our page-constructor template above with a few variables. Those variables are then either used to determine which other templates to embed, or passed on to other embedded templates, or both. For football/index, EE embeds the header with the ‘Football’ page title for that section, includes a list of articles from a specific weblog or weblogs with the appropriate section header using embeds/page-index, also throws in the appropriate center-col template for that section, and then embeds the right hand col and footer templates which are common across the site.

So we have: EE template request → page constructor → grab a bunch of template chunks and process them → send finished template to the user. Hooray!

You might be wondering why not just stick the specific header/page template/footer embeds in each template, ie in football/index, basketball/index, and so on? Because its a pain to maintain is why! :) Eliminating redundancy where possible generally makes life easier as a designer or developer, and having one template to maintain is much easier than ten or twenty or thirty.

With all your logic centralised, exceptions can prove tricky to deal with when the client throws you a curve ball, but with an extra variable and a sprinkling of conditional logic here and there you should be able to get by. Just be sure to plan as much as you can before you start building!

Finally, a quick tip in case you ever need to embed anything between {exp:weblog:entries} tags (for instance if you want to abstract your index item in index templates). The parsing order means that embeds will be parsed after the {exp} tags, which means whatever variables (such as {title} etc) you include will not be parsed. Instead, turn on PHP for the template on input, save your template as a file, and use php’s include() to grab the necessary chunk of code.

Well that about wraps it up, I’m sure there are a few unanswered questions but my intention with this tutorial is just to give you some idea of what’s possible when organising your templates, if you’re not doing it in a similar way already.

I hope the concept of a ‘page constructor’ has been a useful one and you can speed up some projects where it is called for by eliminating redundancy embracing embed variables!