Steven Kovar - Interactive Designer

Skipping the Multi-entry Page in ExpressionEngine

August 25, 2009

I’ve had a nagging issue since I launched this site with figuring out how to indicate a “current” state in the navigation in multi-entry pages that are limited to one entry. Client work and travel took over for a while, but I always had in the back of my mind that I needed to address the problem and I am happy to have finally found a solution.

The portfolio section of this site is set up with sub-navigation that directs you to a particular category of the portfolio. The main category page is a multi-entry page that I have limited to one entry, with a thumbnail list that directs you to single-entry pages for each portfolio item. Indicating a “current” state navigation in a single entry page is a fairly straight-forward process of comparing segments in the URL with a conditional that applies a CSS selector if the condition rings true.

First, create a new template for your navigation, or sub-nav, whichever it might be. When you embed that template, you should set a variable that will be passed to your embedded template. I’ve set three here, but the important one here is “loc”. This will pass the location to the embedded template:

In this case, “loc” is going to tell the embedded navigation template that the location is “segment_3” from the URL - since the single entry URL appears in segment 3, the variable will pass the entry URL to the embedded template. “titl” fills in the last segment of the url_title_path. “cat” obviously tells the navigation which category’s entries should be returned.

In the code that is inside the embedded template, you can see that we’ve passed the location variable into a conditional that, when true, applies the class of “outline” to my list item.

Of course, in the case of the active single entry page, the conditional returns true:

Because the url_title of the entry is in segment three, which when passed to the embedded template results in: url_title=url_title, the conditional rings true for the active page, but not for the other items in the navigation. It seems much simpler to keep all of this inside one template, but due to the rendering order of templates (I assume), you must have this conditional in an embedded template because the hosting template renders first, and the embedded template renders second. You need to first have the host template rendered to determine what the URL is, which the embedded template needs to determine whether or not the conditional is true for each item in the navigation list.

Confused? Me too! For problems like this, I need absolute quiet, a cup of strong coffee and a lot of patience. Enter the next problem:

My portfolio sub-navigation consisted of links that call up a multi-entry category page which was limited to one entry.

You can see that a current state is indicated with a simple conditional that compares the segment URL. What about the current state in the thumbnail navigation for the one, latest entry that is allowed to appear on my multi-entry category pages? Since the third segment of the URL is blank because the category page simply calls up the latest entry automatically, the conditional that I set earlier for my thumbnail navigation never rings true so never applies the “current” state to the active thumbnail on multi-entry pages.

After a lot of time spent researching a way to sort my entry dates with PHP to find out a method for telling my embedded navigation that the latest item should have a “current” state applied to it’s link, it finally dawned on me that it would be much easier just to skip the multi-entry page altogether. I really don’t need it. The way I’m using it, it might as well be a single-entry page.

So, my solution for this was to change my category-level navigation for each category to render a list item that is linked directly to the latest entry, then to use a segment conditional to apply a “current” state when selected. Using url_title_path allows you to pull out the latest entry’s URL. The link text remained that same as it was when the link was directing to a template path for a multi-entry page.

Now I’ve taken the multi-entry page completely out of the loop and have a current state for every navigation item in the portfolio. My only concern with this method is that it might create extra database queries. But, I assume I can overcome this performance hit with template cacheing. Is this the most efficient way to do this? I’m not sure and I’m certainly open to other ideas.

 

 

---

Reader Comments