Boyink! - Spring Forward on the Web

Behind URL Segments and Conditionals, I think my favorite ExpressionEngine capability is Embedded Templates, used in conjunction with Embedded Variables.

Simple embedded templates are great for centralizing elements that are common to a page - either from a coding view (think stylesheet links, meta tags, etc) or a visual/functional view (main navigation, footers, search boxes).  Much like classic “Server-side Includes”, storing those elements in one place as discreet templates and embedding them in all other templates is a great way to create a quickly changeable/maintainable site. 

Being able to pass variables to those embedded templates, however, moves them up a notch on the functionality scale.  You can begin to view your embedded templates as more of a programmer’s “Function Call” - chunks of code you can call, pass a variable to, and get something back.  In EE’s case, what you get back is larger chunks of HTML—which might be your weblog index page, your single entry page, a unordered list of related entries, or the comments for a given weblog entry (Boyink.com has embedded templates with embedded variables for each of these examples).

Let’s look at using this approach for a weblog index page.  Here on Boyink.com I have four weblogs (this main business blog in addition to one blog each for the Jeep project, the trailer project, and my photoblog).  I wanted the formatting of each index page to be the same. 

One approach to development would be to create one weblog index page and get it formatted as required, copy/paste all the code into 3 additional templates, and then go through each template changing out weblog references as required (so content would get pulled from the appropriate place in EE).

But hang on - if the formatting is the same across all these weblog index pages, then what really needs to change in the code between these templates?

Not much:

• The weblog name (so EE pulls the right content)
• The name of the “single entry” or comments template (so EE can build links from the weblog index page to the single entry pages)

Hmmm…the old programmer’s laziness kicks in here, and finds that there is a better way.  If I pull out the specific EE code that creates the list of posts on the weblog index page, and store that in a seperate template, then I can pass 2 variables to it and that one embedded “weblog_index_entries” template can serve up the main content chunk for all four weblog index pages.  Then - if I want to tweak the formatting on my weblog index pages, I only need change the code in that one embedded template and all four weblogs immediately benefit.

OK - so some code examples would be nice, eh? First is the “calling code” - the code that would go in the parent template.  This example would be for my main weblog page (the one you’re currently reading).  Behind the scenes it’s called “mikes_blog”. The important part to note with this code is that the variable names that the embedded template will use are created/named here.

Calling Code (.txt file)

Here then is the code residing in the template that gets embedded (or the Child template).  I’ve simplified the actual code for purposes of demonstration:

Embedded Template Code (.txt file)

Once you “grok” this approach in ExpressionEngine, the possibilities really open up - anywhere content types are repeated you can assemble the EE templates in this fashion.

You can even go further - making variables out of other EE tag parameters.  For example - I wanted to use this approach throughout Boyink.com to show the list of most recent blog posts and latest Boyink news, but on different pages it made sense to show fewer or more entries in those lists.  I just created another variable in the calling code to specify the number to of entries to show - and in the embedded code use that number in the weblog:entries tag as a value for the “limit=” parameter.

Embedded templates with embedded variables - definitely worth taking the time to figure out in ExpressionEngine!

Comments are closed, but you can read the comments other people left.

1. AJP on February 19, 2007

   I like it. :)

   I’m glad your new site has inspired you to unload your EE mastery on us n00bs.

2. Michael on August 20, 2007

   OK…this is a distantly related issue…concerning conditionals and how a closing {/if} tag seems to effect mark-up. I’ve noticed that when using conditionals outside of a pair of element tags;

   e.g. {if something here}a bunch of stuff{if:else}more stuff{/if}

   the flow of the document mark-up seems to be interrupted.

   If after the closing tag I were to enter a return to begin a new line (which will not affect the rendered page, but does effect the readability of the mark-up)  the return does not seem to appear in the mark-up and thus the new line begins on the line with the conditional.

   One way around this is to put the conditional within the element tags;

   e.g. {if something here}a bunch of stuff
   {if:else}more stuff{/if}

   (both examples should appear the same)

   The only issue is that not every situation can be solved by this method.

   Just wondering if anyone is bothered enough by this to have found a solution?

3. Michael on August 20, 2007

   Just noticed the paragraph tags I used in my examples did not render my comment/question above.

   Sorry for the confusion.

Back to Article