07 - Getting Started With Chunking

Getting a start on things by splitting up our home page resulting in a template with only 5 (gasp!) lines of code.

 
Download the EE Code for 07 - Getting Started With Chunking

Looking through all the HTML that the Folder Template comes with I see using the following 7 templates:

  • index.html
  • blog.html
  • single.html
  • page-sidebar.html
  • portfolio.html
  • project.html
  • contact.html

What’s common to all of them?

  • html header/page header
  • footer

What’s common to some of them?

  • The Home page and Work Index page have similar thumbnail galleries for projects.  They are slightly different but close enough we can centralize, I think.  The navigation to filter by project type is also the same.
  • The sidebar on the Blog Index, Blog Single Entry, and About page (page-sidebar.html) templates are the same. On our implemented site the About page would be different but the Blog Index & Single Entry will share elements.

Header Stuff
From both a source code perspective and visual perspective the header of the site is the same - lots of js links, cs links, logo, main navigation are all the same from page to page.  But wait, it’s not always exactly the same - there are page titles we want to be different and main navigation active classes that need to change.  There’s also a class applied to the body tag for styling the rest of the page.  I also see that the rotating slideshow on the home page is within the header element that all the other templates use.

So it’s mostly the same, but slightly different depending on the context of the site. What to do?

Luckily some of ExpressionEngine’s tools accommodate this situation nicely.  We’ll use an Embedded template for this chunk so that we can use Embed Variables to affect the context-sensitivity where needed.

Organizing Chunks
Wanting to create our first chunk begs the question - “How do you organize this stuff”?  ExpressionEngine doesn’t care - any template can be embedded in another template regardless of where its stored.  The organizational bit is all up to you.  My only advice is to choose an approach and stick with it so it’s easier to come back to sites you built in the past.  For me that approach has been to keep all of my template “bits” in their own Template Group. This way I know these templates aren’t the full-page production templates but rather just partials that get used elsewhere.

Chunking the Header

  • Create a new template group called (oh let’s stretch our creative muscles): embeds
  • Create a new template in the embeds Template Group called header
  • Copy the header code from index.html into embeds/header

Start on:

<!doctype html

End with (including):

<div class="wrapper cf"

Note that all new and updated templates are available in a zip file by clicking the companion files link above/right.

Save your new embeds/header template, and back in page-comps/index replace the same code you just copied with:

{embed="embeds/header"

Save page-comps/index and click on “View Rendered Template”. You should get the index page looking exactly as it did. If not, check the spelling of your embeds/header template and the embed statement you used in page-comps/header.

Embed Variables
There are three places this embeds/header template needs to be context sensitive.  Let’s get our Embed Variables in place to handle those. Think of Embed Variables as having two pieces - the throw and the catch. Values are thrown from the parent/main template and caught by the Embedded Template.  Since we are working in the Embedded Template here let’s set up the catching side first.  Embed variables are declared by just using them, and you get to make up the names.  I always prefix mine with “my_” so I know which variables I’ve created vs. which ones are native to ExpressionEngine.

In embeds/header change:
This:

<title>FOLDER TEMPLATE</title

To this:

<title>{site_name} {embed:my_page_title}</title

That will let us tell the embedded template what title we want to display.  We’re also using another Global Variable to display the site name (that you set upon installation of ExpressionEngine).

Now let’s handle that body class that needs to change in each section of the site:

Where the Folder Template code has:

<body class="home"

Change it to:

<body class="{embed:my_body_class}"

That will let us control the body class.

Last one is the navigation state - and this is a bit more complex.  We need to use a Conditional to look at the value of the passed-in variable and decide which item on the navigation to light up.  We’ll just put the conditional on one list item for now and fill in the rest as we build out the site.

Where the Folder Template has:

<li class="current-menu-item"><a href="index.html">HOME</a></li

Change it to:

<li{if embed:my_active_nav=="home"}class="current-menu-item"{/if}><a href="index.html">HOME</a></li

Now let’s handle the pitching side of Embed Variables. Back in the page-comps/index template:

Change:

{embed="embeds/header"

to:

{embed="embeds/header" my_body_class="home" my_active_nav="home" my_page_title="Home"

With that line saved you should be able to load your page-comps/index template and get an updated title, active class still correct in the main nav, and the right body class applied (you’ll need to view the source code to check).

Chunking the Footer

Now let’s grab the footer.  I want to close the divs in the footer that I opened in embeds/header, so start with:

</div><!-- ENDS WRAPPER --> 

and select/copy down to (including):

</html

The footer is the same throughout the entire site - nothing context-sensitive going on like the header had.  With no need for an embed variable, there’s really no need to create an embedded template.  Let’s make the footer code a Snippet instead. With the above code copied to your clipboard:

  • Navigate to Design > Templates > Snippets
  • Click Create a New Snippet
  • Name it snp_footer
  • Paste in the code
  • Click Update and Finished

ExpressionEngine will show you the syntax you need to put back in your parent template:

{snp_footer} 

Why the snp_ prefix?  Because otherwise you will not be able to tell a User Defined Global Variable, Standard Global Variable, or Snippet apart by looking at EE code. 

With the footer HTML replaced by the snippet you should be able to re-load your home page and have it load unchanged.

Chunking the Middle
With the global header and footer handled, there more we can do here.  On this site the home page is really just the Portfolio/Work page with a bit more text under each image/title.  We’ll be able to centralize this code as well.  Let’s chunk it out of the home page, and we’ll make it dynamic once the Work section is implemented.

In page-comps/index grab the following code:

From

<ul id="filter-buttons"

to:

</div><!-- ENDS Filter container --> 

and copy that into a new Snippet named snp_portfolio_thumbs.  Same as above, replace the same code with the Snippet variable.  Your entire page-comps/index template should now be:

{embed="embeds/header" my_body_class="home" my_active_nav="home" my_page_title="Home"}    
    
    
<div class="home-featured"><!-- featured -->
        
{snp_portfolio_thumbs}
    
</div><!-- ENDS featured -->
    
{snp_footer} 

An entire template in 5 lines of code?  Crazy!  But with this particular site design there just isn’t much for unique home page content.  You might actually question the need for a separate “Work” section, but that’s not a matter for us to worry about here learning EE.

Moving the Template
The page-comps/index template is now “fully chunked” so we can move it into it’s final resting place. 

  • Create a new template group named ‘site’
  • Check the box that says ‘Make the index template in this group your site’s home page?’
  • Once the group is created copy the code from page-comps index into site/index.
  • Load your home page in the browser to ensure it’s all correct yet.

That’s enough for this week - from here we’ll move on to the Blog section, chunk that out and begin implementing it.

Category Navigation

<< Previous Entry   

Next Entry >>

 

Previous Comments

Picture of Tony

by Tony

Date: Wednesday, July 18th, 2012
Comment: #1

Thanks a bunch for this and your time!

Picture of Susan Kitchens

by Susan Kitchens

Date: Sunday, August 26th, 2012
Comment: #2

Mike—

Fantastic stuff. Thank you. One thing, though, that caught me out—there are three instances of this code in the Folder Template’s index.html file:

<div class=“wrapper cf”>

(line 82, 222, 326)

If, during the Chunking Header section, you happen to copy up to line 82 instead of 222, then the next section of your tutorial on Embedding Variables gets pretty wonky around the point where you start putting conditionals around the nav list items.

Happily, your code example set me straight, and I saw where I messed up (yep. line 82 here).

Picture of Jimmy Hansen

by Jimmy Hansen

Date: Monday, December 24th, 2012
Comment: #3

I had the same problem Susan had, but on the bright side it taught me a little about variable scope within EE. Embed variables defined in this call:

{embed=“embeds/header” my_body_class=“home” my_active_nav=“home” my_page_title=“Home”}

are only available to the embedded file (embeds/header). Later in the HTML, the conditional around {embeds:my_active_nav} always returned false (it was undefined) which is why the class was never correctly assigned.

Picture of Jimmy Hansen

by Jimmy Hansen

Date: Monday, December 24th, 2012
Comment: #4

Thanks again Mike for your excellent tutorial.

I’m not sure about the EE syntax yet, but shouldn’t this line:

<li{if embed:my_active_nav=="home"}class="current-menu-item"{/if}><a href="index.html">HOME</a></li

instead be:

<li{if embed:my_active_nav=="home"}class="current-menu-item">{if:else}>{/if}<a href="index.html">HOME</a></li

?

I’d think it would produce

<liclass=... 
Picture of Boyink

by Boyink

Date: Monday, December 24th, 2012
Comment: #5

Guys - I’m off for the holidays. I can look at this code again in a few days.

Picture of Jimmy Hansen

by Jimmy Hansen

Date: Wednesday, December 26th, 2012
Comment: #6

It actually looks like just this would suffice, having a space before class:

<li>HOME</li>

Picture of Duncan

by Duncan

Date: Saturday, February 16th, 2013
Comment: #7

Jimmy, spot on. if you add the space after <li it works a treat. When the if statement is true it is dropping the class statement straight after li.

Boyink…. excellent series my man. Can’t wait for the new ebook for 2.5.5 to come out. You explain things very well indeed!!!!

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>