Behind the Curtain - Part I
Here is my first contribution to what will be a short series of entries revealing some of the inner workings of how we are using ExpressionEngine on the EllisLab family of sites. Today’s example wasn’t possible prior to 1.5 without the use of PHP or a plugin, and now in addition to being a standard feature, is also extremely efficient. If you haven’t guessed, I’m talking about embed variables.
The ExpressionEngine site has multiple navigation menus on a given page: the main tabs and sidebar navigation within a given section. So what’s the normal solution used for indicating “current” navigation on a given menu? CSS, with id’s on menu items, the <body> tag, etc. I cannot begin to tell you how tedious I find making all of those selectors in CSS. It really starts to feel obtuse to me when you have one selector for the ‘section’ and then need another one for each ‘page’ so that both main and submenus on each page highlight the proper menu item as being ‘current’.
My solution was to use embed variables to apply a single class to the actual current menu item, instead of using a maze of over 50 selectors in the CSS to determine the current page location. Every page already has an embed for each navigation menu, so it took very little work:
{embed="template_group/page_nav_template"}
So, let’s add a location variable.
{embed="template_group/page_nav_template" loc="here"}
And in the embedded template:
<ul>
<li {if embed:loc == 'here'}class="current"{/if}><a href="{path=template_group/here}">Here</a></li>
<li {if embed:loc == 'there'}class="current"{/if}><a href="{path=template_group/there}">There</a></li>
<li {if embed:loc == 'elsewhere'}class="current"{/if}><a href="{path=template_group/elsewhere}">Elsewhere</a></li>
</ul>
The resulting markup feels much cleaner to me than the alternative of giving each item an id, and styling based on parent container selectors, and it carries semantic information along with it that is relevant to the page content, which is a big bonus to me.
<ul>
<li><a href="http://example.com/template_group/here/">Here</a></li>
<li class="current"><a href="http://example.com/template_group/there/}">There</a></li>
<li><a href="http://example.com/template_group/elsewhere/}">Elsewhere</a></li>
</ul>
And when a code monkey is creating a new page from the stock page template, all they have to do is switch the loc= parameter to whatever the actual location is. The code monkey normally meant me, of course, and I do like when I can make things as easy on myself as possible. But during the last throes, it was an all-hands effort, and explaining this to the gang took only a few seconds, and it instantly clicked with everyone. And it prevents these individuals from ever having to step foot in the stylesheet to add menu items.
NOTE: See point number six of this KB article for some security information regarding the use of quoted variables in conditionals that is applicable depending on the source of your value for the variable.
