08 - Turning Repeatables Into Embedded Templates

A great example of how ExpressionEngine lets you be more efficient is using Embedded Templates to centralize the storage of any element of your site that is common to all pages (a “repeatable”). In this post I’ll work through the process of creating embedded templates from the repeatable elements on the index page template.

 
Download the EE Code for 08 - Turning Repeatables Into Embedded Templates

Chapter Contents:

  • Templating philosophy
  • Creating an embeds template group
  • Chunking up the index template
  • Viewing the results

Templating Philosophy
I need to point out that, as usual with EE, there are many ways to go about this process.  One of the side-benefits of doing a bit of EE consulting and some tech support is that I’ve been able to log into a fair number of EE installations and see how others do (or don’t do) this process. 

I’ve seen sites where no embedded templates were used - so a change to the main navigation would require touching every template in the site.  I’ve also seen sites where every last div tag was stored as a User Defined Global Variable - presumably so that if a div class or ID changed in the code the programmer would only have to make that change once (in the variable definition) and have it be reflected across the site.

I tend to shoot somewhere in the middle, configuring EE such that

  • Each parent template retains the basic HTML skeleton
  • Embedded templates store the repeatables (those common page elements like main navigation)
  • Core content code lives in the parent template

I also favor a “wide over deep” approach to coding EE templates. 

What do I mean by that? 

It’s always been my belief that a given website will have a given amount of complexity and you can, in your coding approach, squish that complexity into different shapes.  Rick Ellis (the man who started this whole EllisLab/ExpressionEngine craziness) used to have a blog where the entire site - index page, single entry page, comments, archives etc - all ran from one EE template.  But that one template was very complex, filled with conditionals and some PHP code etc.  Rick had chosen to squish his site’s complexity into a tall and deep shape.  One template, but lots of complexity within that template.

I’ve seen sites where the programmer has taken an approach closer to how you would build a static site, with specific templates for every page within one section of the site. This would be a very wide and shallow shape - lots of very simple templates.

Again I tend to shoot more towards the middle while favoring the wider end of the scale.  I usually don’t want page-specific templates, as that approach doesn’t take full advantage of EE’s power. But in a situation where I need to choose either making one template more complex or adding another template, I’ll typically choose the latter.

Why?

Keep in mind that my involvement with ExpressionEngine is mainly building sites for clients.  I typically work a lot on the site during a short period of time, launch it, and move on to the next project (vs. being an in-house developer continually working/tweaking on the same site).  For this reason I want to code the site in such a way that, should that client want some changes or additions down the road, I can come back in and do those changes with a minimum of reverse-engineering time.  For me, tending towards having more but simpler templates makes that process easier than fewer but more complex templates.

Just FYI - I cover this area in more detail (and with code examples) in the Designing an ExpressionEngine Architecture screencast.

With the high-brow conversation over, let’s move onto some EE coding.

Creating an embeds Template Group
Since we covered the steps to create a template group in an earlier chapter I’m not going to cover them again here - just use the same steps to create a new template group called “embeds”.  This template group will not hold any parent templates, just templates with smaller chunks of code that need to be repeated throughout those parent templates.

Open page-comps/index for Editing
ChristianTemplatesOnline.com has helped us out by nicely commenting the main structure in the HTML - and for the most part our chunking approach will be to pull out each section of the code they’ve commented with their BEGIN and END statements.

The major exception to that approach is the header code - I want everything from the DOCTYPE declaration through the closing of the head tag to get pulled out and embedded.  You may be thinking “But wait - each page needs a unique title and description!” - and you are right; but, we can still pull this code out and store it in an embedded template and handle unique page titles.  We’ll do that in the next post.

Let’s start moving through the chunking process.  Note that the companion files to this post will include all the new embedded templates and the updated page-comps/index.

embeds/html_header

  • Create a new template in your embeds group and name it html_header
  • In page-comps/index, copy the code from the DOCTYPE down through the closing head tag
  • Paste that code into embeds/html_header
  • Update embeds/html_header
  • Back in page-comps/index, replace the code you just copied with the following
{embed="embeds/html_header"

Reload page-comps/index in your browser to make sure it still loads correctly.  You shouldn’t see any change from what it looked like before.

embeds/page_header

  • Create a new template in your embeds group and name it page_header
  • In page-comps/index, copy the code from the BEGIN HEADER through END HEADER
  • Paste that code into embeds/page_header
  • Update embeds/page_header
  • Back in page-comps/index, replace the code you just copied with the following
{embed="embeds/page_header"

Reload page-comps/index in your browser to make sure it loads correctly.  Again it should be unchanged visually from before.

embeds/main_nav
Repeat the above process to create embeds/main_nav, and grab the HTML from page-comps/index starting with the BEGIN BANNER SECTION comment through the END BANNER SECTION comment.

embeds/events
Whether to embed the events listing on the home page is a good question.  I’m not sure I’ll use it elsewhere on the site but can easily see doing so.  I’m going to embed it now and if it doesn’t get used again later it may come back to live in page-comps/index.

So repeat the above steps to create embeds/events, and copy the code from page-comps/index from the BEGIN EVENTS comment through the END EVENTS comment.

Right Column Content?
I’m going to leave the right column content code in page-comps/index, as this is what I consider “core content” for this page - this is the content that the page is mainly designed to communicate.  We might come back to this decision as we look at the “Join Us” content, but for now we’ll leave this section of code as is.

embeds/footer
Repeat the above process to create embeds/footer, and copy the page-comps/index code from the BEGIN FOOTER comment through the END FOOTER comment.

page-comps/index Results
Here is what you should now have for page-comps/index (note that I’ve removed the tabbed formatting for display here on the site):

{embed="embeds/html_header"}
<body id="home">
<
div id="wrapper">

{embed="embeds/page_header"}
{embed
="embeds/main_nav"}

<div class="clear"></div>

{embed="embeds/events"}   

<!--BEGIN RIGHT COLUMN CONTENT SECTION-->     
<
div class="rightColumn">
<
class="pageTitle">Welcome to our Church website!</b><br />
Enim ad minim veniam quis nostrud exerci tation ullamcorper suscipit 
ut aliquip ex ea consequat
Duis autem vel eum iriure dolor in in 
vulputate velit nibh euismod tincidunt ut laoreet dolore
. <a href="#" class="redBglink">more &raquo;</a>      

<
div class="spacer"></div>

<
class="pageTitle">Join Us</b>
<
div class="join_us_column">
<
b>Sunday</b><br />
Bible Study 9:30 am <br />
Worship 10:00 am <br />
Family Night 7:00 pm
</div>

<
div class="join_us_column">
<
b>Wednesday</b><br />
Coffee House 6:00 pm <br />
Biblical Studies 6:30 pm <br />
Youth Night 7:00 pm
</div>

<
div class="spacer"></div>

<
class="pageTitle">Our Mission</b><br />
Imperdiet doming id quod mazim placerat sed diam nonummy nibh 
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat

Esse molestie conseq uatvel illum dolore eu feugiat nulla facilisis at 
vero eros et accumsan et iusto odio qui blandtum nulla facilisis at 
vero eros et accumsan et iusto odio qui blandtum zzril delenit auge duis 
olore te feugait nulla facilisi
. <a href="#" class="redBglink">more &raquo;</a>    
<
br />
<
br />
</
div><!--END RIGHT COLUMN CONTENT SECTION-->
         
<
div class="clear"></div>
{embed="embeds/footer"}    
            
</div><!--END BODY WRAPPER-->

</
body>
</
html

Rendered Results
Again, your rendered template should be unchanged visually.

Even though visually it’s the same, just be satisfied in the fact that you’ve started laying the foundation for a good ExpressionEngine Architecture.  In the next chapter we’ll start moving into the templates a bit more by changing the main nav to suit our needs, making page titles dynamic, etc.

Cheers!

Category Navigation

<< Previous Entry   

Next Entry >>

 

Previous Comments

Picture of Jesse Schutt

by Jesse Schutt

Date: Thursday, May 1st, 2008
Comment: #1

Good descriptions of the embeds!  Thanks for walking us through this process.  I love seeing all the different ways EE can be implemented.

Picture of tzTrainEE

by tzTrainEE

Date: Friday, May 2nd, 2008
Comment: #2

Thanks Michael, I’m getting a personal licensed full-version copy of EE tonight finally. So I should be able to follow along with this tutorial properly.
Woo-hoo.
Without your tutorials, I probably would have fallen off of the learning curve by now.

Picture of joshclark17

by joshclark17

Date: Saturday, June 7th, 2008
Comment: #3

Hi Michael-
I’m new to EE and am learning while building an actual client site for a church before launching into a slightly more complex site for a bigger client. I appreciate your tutorials immensely.

My question has to do with the openness of the “embeds” template group and contained templates. Is there any way to hide these from view of people who might happen on them by freak accident?

Mike Boyink

by Mike Boyink (Author)

Date: Saturday, June 7th, 2008
Comment: #4

Hi Josh - yes, see hidden templates.  I don’t worry about it because I figure the a)The odds are incredibly small that someone would get to one - they’d have to be really trying by typing in the name directly and b)even if they were able to load one they would just get a partial page - it wouldn’t cause any “damage” etc.

Picture of Sarah

by Sarah

Date: Sunday, October 30th, 2011
Comment: #5

Mike,

If I wanted my client to control the title and meta tags on each page, how would I make the html_header dynamic if using embed tags? In that situation would I need to keep the html_header separate? I’m new to EE so I’m learning how everything fits together.

Add Your Comment

Commenting is not available in this channel entry.

Unless otherwise stated all content is © Michael Boyink of Train-ee.com & Boyink Interactive. Please don't steal - I've got kids to feed...

dy>