Creating Aside Content
by Lodewijk Schutte
Say you’re building a site for a small business with the following sections: Home, News, About Us and Contact. Each of these sections contains its own static content, blog or a combination of both. But each section also contains so-called “aside” content, with things like quotes, testimonials, call to actions and so on. Aside content is so ubiquitous nowadays, HTML5 has even given it its own HTML tag!
But how do you manage aside content in ExpressionEngine? Here’s one way of doing it using categories and the Low Seg2Cat extension.
(Note: I’m using EE2 code in this example, but the general idea works in EE1 as well.)
Create a channel
First, we need to create a channel for the aside content. In this case, we’re adding two custom fields to the channel: aside_type (select) and aside_text (textarea). We’ll add two possible values to the aside_type custom field: “default” and “testimonial”; we could add more types at a later stage, as needed.
Custom fields for our aside content.
Create categories
Next, we need to assign entries to a certain section of the site. A handy way to do this is by using categories. This means we need a category group that reflects the main site structure. Not only can we assign entries to the categories this way, but we can also use these categories to generate the main navigation. Added value, people!
We’ll create a category group called “Site” and add the categories:
- Home
- News
- About Us
- Contact
Make sure the category URL titles are the same as the template groups so we can get our navigation going. Also, don’t forget to assign the category group to our Aside channel.
Categories for our aside content.
To add the navigation to the site, we could use the {exp:channel:categories} tag, but I prefer to use the Query module, myself. We need to remember the category group id, and then we’ll use this code to generate the menu:
<ul id="nav">
{exp:query sql="SELECT cat_name, IF(cat_url_title='home','',cat_url_title)
AS url_title FROM exp_categories WHERE group_id = 1
ORDER BY cat_order ASC"}
<li{if segment_1 == url_title} class="active"{/if}>
<a href="{path="{url_title}"}">{cat_name}</a>
</li>
{/exp:query}
</ul>
As you can see, we’re using an IF statement in the SQL query to set the url_title to an empty string if the category url title is “home.” This way the home-link will link to the root of the site, instead of /home. We’re also hard coding the Site category group id into the query and ordering the categories by the given order.
Install Low Seg2Cat
We need to tell the {exp:channel:entries} tag to fetch entries from a given category, based on the first segment. That’s where Low Seg2Cat comes in handy. This extension will look at the URI, match it against existing categories and register global variables for each found category. These variables can be used as input for template tags, which is exactly what we need.
With Low Seg2Cat installed, we can use the variable {segment_1_category_id} to get the right entries. However, the home page doesn’t have a { segment_1 }, so we’ll need to hard code the Home category id in that case.
Create a template
Now that we set up the category navigation and installed the extension, we need to create some template code to retrieve the correct Aside entries. This code will be reusable throughout the different site sections, so we’ll create an embed for this. Create a hidden HTML template in the Home template group called ‘.aside’ (or ‘_aside’ if you customized the hidden template indicator). Here’s what the code could look like:
{exp:channel:entries channel="aside" category="{embed:category}"
dynamic="no"}
<div class="item {aside_type}">
<h2>{title}</h2>
{if aside_type == 'testimonial'}
<blockquote>{aside_text}</blockquote>
{if:else}
{aside_text}
{/if}
</div>
{/exp:channel:entries}
We’re using an embed variable to pass through the correct category id. The field aside_type is used as a class name and as a conditional to apply the correct HTML to the aside item. If we’re adding more types at a later stage, we can just add another
{if:elseif aside_type == 'call-to-action'}
to customize the HTML even further.
Connecting the dots
To add the aside to the different sections of the site, we just need to add the embed code to our templates:
{embed="home/.aside" category="{segment_1_category_id}"}
As noted above, we have to hard code the category id for the Home page, so the embed code would look like this:
{embed="home/.aside" category="1"}
That’s all, folks!
Using this approach, we can place Aside content anywhere on the site, by selecting the right category or categories. You could alter the display order by changing the entry date, you could add more custom fields to display images or video—the possibilities are endless!
But this is ExpressionEngine we’re talking about, so you already knew that, right?
Posted on Apr 06, 2010
Post to Twitter