18 - Implementing the Work Section - Part 2

We get the index template of our portfolio/work section working with ajaxy front-end filtering by category.

Download the EE Code for 18 - Implementing the Work Section - Part 2

In this installment of our Portfolio series we’ll get the index template of the work/portfolio section of the site in place and working. This chapter assumes you have done the data entry covered in the last chapter.

There are three main steps in today’s to-do:

  • Create a new template group
  • Copy a page-comps template into the new group
  • Modify the copied-in code to pull dynamic content

Create a Work Template Group
I’m not going to give the exact steps here as you should either know or be able to figure this out by now…but in the Design area of the ExpressionEngine Control Panel create a new Template Group (not just a template) and title it ‘work’—lower case because this value will become part of your URL structure and it’s best to keep it all lower case to match your entry URL titles, etc.

With that new Template Group in place you’ll have the default index template. This is where we want to do today’s work.

Copy Existing Template
We have the beginnings of what we need sitting in page-comps/portfolio. Copy page-comps/portfolio to work/index. Save it to get a revision point saved in the database.

Modify the New Template
With an initial save in place now we can start our template editing work. This template has two basic areas starting with the list of filters at the top. When you click a filter the second area has a box for each project, with a thumbnail, title, link to details etc.

Back-end or Front-end Filtering?
Looking at how this template functions I feel compelled to point out that you have two basic options here. One is to follow the lead of the provided HTML, which does front-end “ajaxy” filtering of categorized views of the content on this page. The upside is that there are some nice animation effects that might impress prospective clients.  The downside is that the categorized views don’t have discreet URLs that are bookmarkable or indexable by search engines. I also don’t see pagination handled - so if the site was expected to house 100’s of projects this might not be as elegant.

The other option would be to ditch the front-end filtering and use back-end filtering instead. ExpressionEngine is entirely capable of rendering a filtered view of this template with little extra work. Each categorized view would use the same template, it would have a discreet URL that could be bookmarked, indexed, and proper browser title. I could use EE’s pagination to handle more content. The downside is that applying a filter would require a page refresh, so it’s not quite as slick-feeling.

For my purposes I’m going to stick with the front-end filtering as directed by the HTML.

Category Links
Check that your category URL titles match the front-end code filter expectations (or modify to suit, they must match).

Use the channel:category tag to generate the filter list. Here is the code that I’ve used:

<ul id="filter-buttons">
li><a href="#" data-filter="*" class="selected">show all</a></li>
{exp:channel:categories channel="work" style="linear" show_empty="no"}
<li><a href="#" data-filter=".{category_url_title}">{category_name}</a></li>

Some notes about this chunk of code:

  • It’s a good idea to always specify the the ‘channel’ parameter. Under certain situations the channel:categories tag will return content without it, but I’ve never seen it workable on a live site that way. Just tell it the channel(s) you want content from.
  • If you are providing your own list markup, or want to ‘cheat’ in another list item like I am here then use the ‘style=linear’ setting.
  • The ‘show_empty=no’ parameter is a great way to keep unused categories from showing up on the live site.

On a live site - depending on the business requirements and expectations - I might not even code this dynamically. If you knew there would always be projects in these categories, and the categories weren’t expected to change (in this case a new category would require front-end code changes anyway), then I’d just hard-code this list to save some queries and increase the page load time. Sometimes simpler is just better.

Project Listings
Our next task is to get listings for our projects showing up dynamically. Here’s the chunk of code I used there:

<!-- Filter container -->
div id="filter-container" class="cf">
{exp:channel:entries channel="work" disable="member_data|pagination"}
<figure class="{categories backspace="1"}{category_url_title} {/categories}">
a href="{url_title_path='work/project'}" class="thumb"><img src="{work_image:gallery}" alt="{title}" /></a>
a href="{url_title_path='work/project'}"><h3 class="heading">{title} </h3></a>
div class="portfolio-cat">
{categories backspace="8"}
</div><!-- ENDS Filter container --> 

Thoughts on this code:

  • There is still category logic here - using the category looping pair for the channel:entries tag pair to find the catgories that each entry is assigned to.
  • I use the ‘backspace’ parameter to clean up extra spaces in the div class, and the trailing comma from the visual category listing.
  • I chose to un-link the visual category tags from each portfolio box. I tried putting the data filter code there but it didn’t work, so I had nothing to link them to.
  • To pull the properly-sized image I used work_image:gallery - this is how you pull one of the resized versions we setup a while back.

With the code changes saved in work/index you should be able to load the rendered version in the browser and get a filtered project list by clicking the links. Make sure to check the responsiveness of the template as well.  Kinda cool!

Next up will be creating the single-entry views of each project.




Category Navigation

<< Previous Entry   

Next Entry >>


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...