16 - Implementing the About Section

In this chapter we’ll knock off another complete main navigation item of our Portfolio project by implementing the About section.

 
Download the EE Code for 16 - Implementing the About Section

This is a straightforward section of “static” content. Not static in the sense that the content isn’t still coming from the EE database, and served up via templates and dynamically generated on the fly. Rather static in the sense that this content isn’t expected to change as often as other parts of the site. The structure here is very page-based. We’ll build it out using a dedicated channel for content, each entry will drive an entire page, and it’ll only take one template to present.

Let’s go!


Create Channel Field Group - About
Create a new Channel Field group named About. Remember that you never use this field group name in your EE code, nor will your Content Administrators ever see it.

Create Fields:
Working according to the Content Model we created earlier, create the following Channel fields in the About group:

  • Main Content, {about_main_content} Textarea (Rich Text)
  • Sidebar Content, {about_sidebar_content}, Textarea
  • Footer Blurb, {about_footer_blurb}, Textarea


Create Channel - About
Create a new Channel with a Full name of About, a Short Name about, and assign no Category Groups. Choose the Statuses Status Group and assign the About Field Group. 

Save the new Channel.

Enter Content
If you navigate to Content > Publish in the Control Panel you should now see your new About Channel as an option. Publish 3-4 entries in it.

Create Template Group - about
In the Design section of the Control Panel create a new Template Group and name it ‘about’.

Create about/index template
Working with the page-sidebar.html file included with the Folder theme, chunk it out using the existing embeds/html_header Template and snp_footer Snippet. Set proper embed variables to establish the page title, navigation state, etc. Do a first-pass to just get the basics working, don’t worry about the main content areas yet.

Update embeds/header
Working with the existing embeds/header template add the following code in place of the hardcoded HTML for the About portion of the navigation:

<li{if embed:my_active_nav=="about"class="current-menu-item"{/if}><a href="{path='about/index'}">ABOUT</a>
{exp:channel:entries channel="about" orderby="entry_date" sort="asc" offset="1" dynamic="no"}
    {if count
==1}
        
<ul>
    
{/if}
        
<li><a href="{url_title_path='about/index'}">{title}</a></li>
    
{if count==total_results}
        
</ul>
    
{/if}
{
/exp:channel:entries}
</li

Linking to the index view of the About section this code uses a path linking variable. The main benefit of this variable is to neutralize any installation location differences between ExpressionEngine installs. I’m working with my build at a /portfolio/ subfolder on my local machine. If you are working with EE installed at the root of the webserver this link will work either way. This makes your template code more portable between installations.

While the main link is fixed, the subnav is built dynamically with another exp:channel:entries loop. The main idea here is to use the entry dates as a way to set the navigation order, and assume the first/oldest entry in the channel is the default or index page content. The offset parameter skips that entry in building the subnavigation. The dynamic parameter is set to no so that the navigation will always be the same regardless of the URL the navigation is loaded at.

Within the loop a couple of conditionals are used to open and close the unordered list at the right times. While you could simply locate that HTML before and after the exp:channel:entries loop I prefer this approach as the entire unordered list is created within the loop, and it also ensures that if the loop returns no entries I won’t get empty markup. I use this coding approach anywhere I’m using an exp:channel:entries loop to build lists.

The subnavigation uses the url_title_path linking variable which will add an entry url_title onto the generated URL. This extra information gives the linked template what it needs to load the correct entry.

Update the about/index Template Again
Following is the code for about/index template.

{exp:channel:entries channel="about" limit="1" orderby="entry_date" sort="asc"}

{embed
="embeds/header" my_body_class="page" my_active_nav="about" my_page_title="About | {title}"}                        
<!-- masthead -->
<
div class="masthead cf">
    
About {title}
</div>
<!-- 
ENDS masthead -->

<!-- 
page content-->
<
div id="page-content-sb" class="cf">                
    <!-- 
entry-content -->    
    <
div class="entry-content cf">
        
{about_main_content}                    
    
</div>
    <!-- 
ENDS entry content -->
</
div>
<!-- 
ENDS page content-->

<!-- 
sidebar -->
<
aside id="sidebar">
    <
ul>
        <
li class="block">
            
{about_sidebar_content}
        
</li>

{/exp:channel:entries}

        
<li class="block">
            <
h4>About Navigation</h4>
            
{exp:channel:entries channel="about" orderby="entry_date" sort="asc" offset="1" dynamic="no"}
                {if count
==1}
                    
<ul>
                
{/if}
                    
<li class="cat-item"><a href="{url_title_path='about/index'}">{title}</a></li>
                
{if count==total_results}
                    
</ul>
                
{/if}
            {
/exp:channel:entries}        
        
</li>
    </
ul>
</
aside>
<!-- 
ENDS sidebar -->
            
{snp_footer} 

Some notes about this approach:

  • I’ve added the exp:channel:entries loop with the same sort/order as the new code that builds the main navigation. If the template is loaded in index mode, the default entry is pulled. If the template is loaded from the subnavigation then a specific entry is pulled. The nice thing here is that one template is used without any template trickery (conditionals looking at the URL ect). I still get “clean” urls for default entry and subnav.
  • The exp:channel:entry code wraps around the embedded template call. This allows me to pass the entry title through to the embedded template for nice page titles in the browser.
  • Sidebar navigation is just another exp:channel:entries loop using the same logic as the main navigation.

Results
By completing the steps in this chapter you should have a working About section of your site. You can use the basic concepts covered here to implement any “static” content section where the content is only one layer deep. You can affect the sort order of the navigation by changing the entry dates of the Channel Entries providing the content. You can add pages to the section just by publishing a new entry into the About Channel.

Some About content will still make its way into the site footer - we’ll cover that in a future chapter.

 

Category Navigation

<< Previous Entry   

Next Entry >>

 

Previous Comments

Picture of Michael David

by Michael David

Date: Thursday, March 27th, 2014
Comment: #1

I am really enjoying this tutorial series! I’m looking forward to the rest of it - I notice it’s been awhile… Thanks for putting this together.

Picture of Mark Mireles

by Mark Mireles

Date: Friday, August 1st, 2014
Comment: #2

Hi!
I was wondering if your going to be writing anymore on this subject. I have followed this to the letter but would still like some more pointers. Thank you for your time on this tut!

Mike Boyink

by Mike Boyink (Author)

Date: Friday, August 1st, 2014
Comment: #3

Yes - it has been a while. Updating the book got in the way there..;)

I am intending to get back to this - the current challenge is figuring out how to incorporate Template Layouts that 2.8 brought to the table.

I can’t give schedules though..;)

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>