The Beauty of Syndication

I find little time to address the small things that would make my life easier, but when I do, I like to get the most out of it I can. So, when I blocked off time to re-architect our website, I made sure I addressed as many of the tedious, time draining tasks tied to running a website, as possible. Seeing as we’re a design studio, perhaps the biggest of these is maintaining our portfolio.

Maintaining an online portfolio is not terribly time consuming thing, but it has none-the-less been one of the many tasks that often get put on the back burner, in our shop. Additionally, Lauren and I both attempt to maintain a small portfolios on our blogs. So, in approaching this redesign, streamlining the portfolio upkeep, was one of my top priorities.

To this end, Expression Engine proved to be very valuable in doing the heavy lifting.

Modular Templating

One of the splendid features of Expression Engine, is its modular templating capabilities, through the use of template tags and custom entry fields. This was a crucial feature in constructing our new portfolio. In the first place, it allowed us to easily customize the posting form, to post new projects. And secondly, the custom template tags associated with these fields, allowed us maximum control in syndicating our portfolio, via XML.

The projects in our portfolio all have a standard format. In addition to maintaining this uniformity across our projects, we also wanted to reduce the need for markup when posting a new project. Aside from simply saving time, this helped insure that the necessary markup, used as hooks for the Javascript, stayed in place. Furthermore, the specificity of the custom template tags, set us up for greater output control in the syndicated feed.

XML Syndication

The true beauty of XML is only meagerly appreciated by most frontend developers, but with a few standards in place, the beauty of feed syndication is something we all appreciate. It certainly was something I wanted to take full advantage of, when building our portfolio.

In the past, I struggled in making even a sad attempt at presenting anything close to a portfolio, on this site. I just never had the time and always shuttered at the thought of having yet one more thing to try to maintain.

This time around, there was no mistaking. I was going to syndicate our main portfolio, so I could then just drop in some parsing code and pick it up anywhere I wanted. No hassle with updates. No hassle with saving out additional screen shots and no hassle with correcting my inevitable typos, in multiple locations.

So today, I just set up the new portfolio page on this site. It’s entirely hassle free, and aside from a minor annoyance in IE6, is entirely worry free this day forward.

Behind the Scenes

There are three main parts to our project pages, the images, the services and the description. Each of these was given its own custom field and corresponding tag. In addition, the images were further broken down into thumb nail, for the main category page, and larger screen shots, for the individual project page.

On the project page, I wanted to minimize noise, but still show multiple images for any given project. To this, I used JQuery to create a nice animated sliding effect, so user could pan to the next image with arrows buttons. The markup is pretty basic. The image are just placed in an unordered list on the page. CSS and Javascript do the rest.

To simplify the admin side, I created custom fields for each of the images. This would basically insert each image with preexisting <li> tags in the template. The double bonus here, is that this also gave me extra tags to work with, when setting up the feed I was going to generate.

Why was this important? Well, this gave me precise elements to hook into the XML file, which in turn, allowed me to syndicate these elements in a controlled manner, so I could easily pick up this feed and reproduce a similar layout on other sites. It also allowed me to pick and choose which of these parts I wanted to syndicate.

In this, I wasn’t interested in reproducing thumbnails or lengthy project descriptions or case studies. I only wanted to pick up the name of the project and the larger screen shots, to display in my portfolio here. That way, I could show some examples of work here and direct people to the full details on our main site.

This required very little effort to set up. The only part of the XML file that needed modification was in the html content output. The modified section looked like this:

<content type="html"><![CDATA[
         <div class="gallery svw">
             <ul>
               <li>{image1}</li>
               <li>{image2}</li>
               <li>{image3}</li>
            </ul>
         </div>
         <a class="projectlink" href="{url_title_path=portfolio/webdesign}" title="Open {title} Project Page">View Project</a>
        <div class="hr"></div>
]]></content>

That’s all there was to it. Well, at least for the setup. On the receiving end, there are any number of XML parsing options, from using a service like FeedBurner, to writing your own parsing script. Either way, the majority of the work is done and most if it, by Expression Engine.