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.
- Templating philosophy
- Creating an embeds template group
- Chunking up the index template
- Viewing the results
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.
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.
- 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
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.
- 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
Reload page-comps/index in your browser to make sure it loads correctly. Again it should be unchanged visually from before.
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.
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.
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.
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):
<!--BEGIN RIGHT COLUMN CONTENT SECTION-->
<b 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 »</a>
<b class="pageTitle">Join Us</b>
Bible Study - 9:30 am <br />
Worship - 10:00 am <br />
Family Night - 7:00 pm
Coffee House - 6:00 pm <br />
Biblical Studies - 6:30 pm <br />
Youth Night - 7:00 pm
<b 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 uat, vel 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 »</a>
</div><!--END RIGHT COLUMN CONTENT SECTION-->
</div><!--END BODY WRAPPER-->
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.