Lilac Creative

Blog

Index-Only Content with ExpressionEngine

| 0 Comments

I've been building ExpressionEngine sites for two years now, and I still learn fun new things EE will do with each new site I build. It's one of the things I love about EE: it's so robust and full-featured that its implementation possibilities are seemingly limitless. Rebuilding my own site on EE was a chance to explore EE even further, and I learned a handful of things I'd never even thought of before (neccessity is the mother of invention, right?). One of those things lies in EE's global variables, which I admit, I've never really paid much attention to before now.

What I Wanted to Do

I designed the blog section of my site to have a fun little banner graphic that would identify the blog and that I could change out seasonally if I feel so inclined. I'm using a pretty standard structure for the blog area: an index page that displays the most recent entries, with pagination at the bottom that will allow readers to go to the next page with the next 5 entries, etc. I wanted the banner graphic to show up at the top of the posting area on the index page, but during testing I realized that with the way I had things set up, the banner graphic would show up at the top of all the paginated pages that use the index page. I thought that was a bit redundant and unneccessary, so I went looking for a way to have my banner only display on the first page.

URL Segment Variables

I knew the logic needed to be something like: { if thisPage == "index" } Content Here { /if }, but I had no idea what variables EE used to acheive what I was going for. So, I asked in the EE forums (another super awesome thing about EE is the friendly support from both official EE techs and the scores of EE enthusiasts in the EE forums). The answer was URL segment variables.

The URL segment variable lets you change your page content dynamically based on what's in the display page's URL. EE breaks its URLs down into segments, where each section separated by a / is a segment. If you have EE installed in your root directory then your main index page is located here: http://www.yoursite.com/. So let's say you have an about page located at http://www.yoursite.com/info/about (assuming you've removed index.php from your URL using one of the hacks available for that). EE identifies segment_1 as "info", and segment_2 as "about."

Identifying My Index Page

Back to what I was trying to do with my index page and banner graphic. With this newfound knowledge, it was now possible for me to identify my blog's index page in a conditional statement using EE's URL segment variables. To get my banner graphic to display only on the index page of my blog, I used this code (outside my exp:weblog:entries loop, since URL segment variables are global, and therefore don't require a governing loop):

{ if segement_2 == '' }<img src="bannerGraphic.jpg" alt="Design Blog" />{ /if }

This code checks to see if segment_2, which would come after "/blog/" in my URL structure, is empty. If it's empty that means it's the index page, since paginated pages insert P1, P2, etc. into the URL after "/blog/" to denote the number of the paginated page. So, if segment_2 is empty, then display bannerGraphic.jpg. Voila! This particular solution could be useful for displaying featured content on your index page only, or if you decide you want your index page to display the full body of your most recent post, but display only excerpts of all following posts.

But URL segment variables have many other dynamic templating possibilities, some of which are explored on the URL segment variable page in the EE documentation, so be sure to check it out!