08 - Chunking the Blog

In this chapter we split up the blog to make the parent template simpler and more DRY.

 
Download the EE Code for 08 - Chunking the Blog

Chunking the Blog
Now that we’ve built some steam up by chunking our sample Portfolio site’s home page we can roll into the next section of the site and continue the process with the blog. I had hoped to start content implementation but there’s probably enough for this week with just the chunking.

Jumping In
We’ve already chunked out the header for the site so we can just reuse that.

Grab from

<!doctype html


up to and including:

<!-- MAIN -->
        <
div id="main">
            <
div class="wrapper cf"

and replace it with:

{embed="embeds/header" my_body_class="blog" my_active_nav="blog" my_page_title="Blog"

Save your changes and re-load the page.

Uh-oh.

That header slideshow shouldn’t be there.  It’s only supposed to be on the home page and is throwing off the spacing here on the blog.  Let’s take care of that.

The embeds/header knows when it’s being loaded by the home page - because we’re telling it that by the values of the Embed Variables we are sending. We can add another Conditional around that whole slideshow so that it only displays when the value of one of those Embed Variables has ‘home’ as its value.

The Folder Template code is well-commented which really helps with this process.  Look for the HTML comment that tells you where the slide begins and add a Conditional above it (I’m showing the comment as well, so this is the final code):

{if embed:my_body_class=="home"} {!-- only load this image slider on home page --}
    
<!-- SLIDER --> 

and then look for the closing comment and close your conditional after it:

<!-- ENDS SLIDER -->
                
{/if} 

With those changes saved both your site/index and page-comps/blog templates should load with their correct headers. 

Footer
Now replace the footer code with the snp_footer Snippet that we created for the Home page template.  The Snippet replaces the code starting with:

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

and continues to the closing HTML tag.

Again, save the change and re-load page-comps/blog just to make sure you got it right before continuing.

Post Types
Now let’s work through the main content area of the blog.  I might re-think this later, but for now the complexity of all the different post types bugs me.  Let’s create a snippet out of each one of those in order to simplify out this template.

Again we can take advantage of the excellent code formatting and commenting here.  Create the following six Snippets from their corresponding sections of code, and then replace the code in page-comps/blog with the new Snippet variables:

  • snp_blog_audio
  • snp_blog_video
  • snp_blog_link
  • snp_blog_quote
  • snp_blog_post (commented as “standard”)
  • snp_blog_image

The main content div of the blog should look like this when you are done:

<!-- posts list -->
    <
div id="posts-list" class="cf">            
        
        
{snp_blog_audio}
        {snp_blog_video}
        {snp_blog_link}
        {snp_blog_quote}
        {snp_blog_post}                
        {snp_blog_image}
            
        
<!-- page-navigation -->
        <
div class="page-navigation cf">
            <
div class="nav-next"><a href="#">&#8592; Older Entries </a></div>
            
<div class="nav-previous"><a href="#">Newer Entries &#8594;</a></div>
        
</div>
        <!--
ENDS page-navigation -->
    
    </
div>
<!-- 
ENDS posts list --> 

Sidebar
Now let’s hit the sidebar.  There are some elements there that will be used again on single-view pages for the blog. The question here is how many chunks to make? Would we ever want to use them in a different mix? I’ve changed my approach here over time - I used to make a lot of small chunks for ultimate flexibility. What I found is that I was being too optimistic and that in reality I had made more work for EE to put the pages back together.

Learning from that experience, I’m going to make one chunk of the entire sidebar, and if down the road in the build I need more flexibility I’ll re-work it.

Grab the sidebar code starting with:

<!-- sidebar -->
    <
aside id="sidebar"

and chunk out all the way through (and including):

</aside>
    <!-- 
ENDS sidebar --> 

and save that as snp_blog_sidebar, then replace the code with the Snippet variable.

Completed Template
Your completely-chunked page-comps/blog Template should now look like this:

{embed="embeds/header" my_body_class="blog" my_active_nav="blog" my_page_title="Blog"}                
                
        
<!-- posts list -->
        <
div id="posts-list" class="cf">            
            
            
{snp_blog_audio}
            {snp_blog_video}
            {snp_blog_link}
            {snp_blog_quote}
            {snp_blog_post}                
            {snp_blog_image}
                
            
<!-- page-navigation -->
            <
div class="page-navigation cf">
                <
div class="nav-next"><a href="#">&#8592; Older Entries </a></div>
                
<div class="nav-previous"><a href="#">Newer Entries &#8594;</a></div>
            
</div>
            <!--
ENDS page-navigation -->
        
        </
div>
        <!-- 
ENDS posts list -->
    
        
{snp_blog_sidebar}
    
{snp_footer} 

Move It
Now that it’s all chunked, create a new Template Group called ‘blog” and copy the completed code into the blog/index Template.  We’ll continue working with it there as we do the content management implementation.

Main Navigation
With a new Template Group in place let’s go back and edit embeds/header so that the main navigation is hooked up.  Actually now that I look at it we can also link the logo, so let’s start there.

We’ll use that site_url variable again to make the link dynamic.  We can also use the site_name variable to make the alt text dynamic.

Update the logo HTML to:

<a href="{site_url}"><img  src="{site_url}assets/img/logo.png" alt="{site_name}"></a

Now for the main navigation.  We need to both hook up the link and make sure the active class switches appropriately.  Grab the Conditional that you created for the index template and copy it as a starting point. We’ll use the Path linking variable here, which takes the Template Group and Template name as an argument.

The updated code for the list item is:

<li{if embed:my_active_nav=="blog"class="current-menu-item"{/if}><a href="{path='blog/index'}">BLOG</a></li

Note that the path linking variable intelligently drops the ‘index’ portion of the argument, so that doesn’t get rendered to the page and picked up by search engines.

With those changes saved your main navigation should work between the Home and Blog pages, and the active class should switch as expected. 

As always, all templates updated in this tutorial are in a ZIP archive available for download by clicking the graphic above.

Ready for Content
In the next chapter we’ll finally start implementing Channel Fields and Channels to hold Blog content, and get the necessary EE code in place to pull it through to the Templates we’ve made.

Category Navigation

<< Previous Entry   

Next Entry >>

 

Previous Comments

Picture of Runy Pswarayi

by Runy Pswarayi

Date: Wednesday, October 17th, 2012
Comment: #1

I am linking successfully between the pages but my home page is blank. Any idea why?

Mike Boyink

by Mike Boyink (Author)

Date: Thursday, October 18th, 2012
Comment: #2

Tough to say - does the home page load by clicking ‘view template’ directly?  What’s the URL when the blank page appears?

Picture of Runy Pswarayi

by Runy Pswarayi

Date: Friday, October 19th, 2012
Comment: #3

It is always because I dont follow instructions. I forgot to move the index page to the site template group and make it the homepage. Thanks for your quick response and a VERY understandable tutorial.

Picture of Boyink

by Boyink

Date: Friday, October 19th, 2012
Comment: #4

No worries - glad to hear it!

Picture of Todd

by Todd

Date: Wednesday, May 29th, 2013
Comment: #5

Just wondering why you include some of the open/closing tags in your snippets. Not questioning it, I just want to understand it.

For instance in the snp_footer you include:
</div><!—ENDS WRAPPER—>
      </div>
      <!—ENDS MAIN—>

why not just start with:
<!—FOOTER—>
  <footer>
  <div class=“wrapper cf”>

Mike Boyink

by Mike Boyink (Author)

Date: Wednesday, May 29th, 2013
Comment: #6

Hi Todd -

I do it because that HTML is common to all templates. Putting it in the Footer snippet will keep the parent template simpler.

If the templates had different HTML in front of the footer then I wouldn’t go this way.

Picture of George Dunlop

by George Dunlop

Date: Friday, June 14th, 2013
Comment: #7

“re-load page-comps/blog just to make sure you got it right”

The blog page requires the audio player which the home pages doesn’t include in header
Possibly it is 40k of js and files that was being avoided where not used.

Do you recommend we add it globally or conditionally?

<!—jplayer—>
<link href=”{site_url}assets/player-skin/jplayer-black-and-yellow.css” rel=“stylesheet” type=“text/css” />
[removed][removed]

Mike Boyink

by Mike Boyink (Author)

Date: Friday, June 14th, 2013
Comment: #8

Keep reading…;)

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>