Rebuilding a Portfolio

16

There’s a wholelotta recent buzz around using Movable Type for more than just weblogs. In addition to the comments and tips Jay Allen has been providing here on Adaptive Path’s MT use, Matt Haughey gives us some great insight into how he takes advantage of MT’s flexibility in Beyond the Blog. Just before reading Matt’s piece, I followed Jay’s pointer to Brad Choate’s Doing your whole site with MT. Both of these are interesting reads given my recent foray into the use of MT to power portions of this site.

In particular, Matt’s example of creating an online portfolio grabbed my attention. Amid all the hubbub around the Adaptive Path redesign last week, I quietly launched my own portfolio redesign, after taking it offline for three weeks while switching stopdesign.com over to a UNIX server and a new hosting service. I pushed some pieces around and made adjustments to clean up the interface. I also rewrote a lot of the relevant style sheet rules, and implemented a new CSS rollover technique to be covered in a forthcoming tutorial (the rollover is turned off for IE5/Mac). In addition to the visual changes, the entire portfolio is now controlled by Movable Type.

My old portfolio used an Access database and a bunch of custom-built ASP functions which generated dynamic pages based on one default.asp file and a set of query strings. My intent was to port everything over to MySQL, and use a beginning knowledge of PHP to do the same thing ASP used to do. This would have taken me several weekends of stumbling through trial-and-error coding and experimentation. Not something I was looking forward to tackling. Once I finished switching over to MT for my log, I became convinced it could be used to help get my portfolio back online as quickly and painlessly as possible. I started by creating a new blog in MT named Stopdesign Portfolio. Here’s an overview of how I use the Entry fields in MT, and how it’s all put together:

• Title = Full Title of a Piece
  The full title of each piece actually consists of two parts: a name and a type, which I split up into two visual chunks on each page. I use the Title field for the full title, then break the two pieces up later on in Extended Entry. For example, a full title would be “Adaptive Path Site Redesign”, even though it’s split up later into “Adaptive Path” and “Site Redesign”.
• Primary Category = Category
  My portfolio pieces were already divided into eight categories. This was the first indication to me that MT could probably be used to setup my portfolio, along with noting that each piece had a similar set of data fields. I added my existing categories to MT: Advertising, Annual Reports, Books, etc.
• Entry Body = Piece Description
  The bulk of descriptive text for each piece. For instance, “Adaptive Path is a hugely successful…”.
• Extended Entry = Extra Key/Value Pairs
  I could have used Brad Choate’s Key Values Plugin for this. However, I decided to throw my values directly into PHP variables. The variables store extra information like client, main image width/height, number of full-size versions available ($fsavail), whether the image and description should be stacked on top of each other, and any additional notes. This is also where I assign two additional variables which split up the full title into name and type. (I realize this is redundant data, but it gives me the flexibility to call each piece separately, and still have search results display the full title as the result title should I ever decide to implement a portfolio search someday.) A sample Extended Entry for the Adaptive Path redesign looks like this:

  $pname = 'Adaptive Path';
$ptype = 'Site Redesign';

$client = 'Adaptive Path';
$note1 = '';
$note2 = '';

$pwidth = 184;
$pheight = 169;
$fsavail = 3;
$stacked = false;

• Excerpt = Short Name
  I didn’t want to rely on the main Title (which can sometimes get long) to create a logical file name for each entry. I also didn’t want to use either of my title variables ($pname and $ptype) because they may not be descriptive enough. The excerpt is used to create a custom file name for each piece. The dirify attribute is used to make all letters lowercase, and replace all spaces with underscores, and each file is automatically placed in a directory according to its own category. For instance, /web_interface/adaptive_path.html
• Keywords = Name ID
  The Name ID was my original convention of assigning unique IDs to each piece in the old portfolio version. It’s a string that starts with the first three letters of the category, followed by a short, recognizable name for that piece. I could have added this to the variables stored in Extended Entry, but I wanted frequent access to this ID in multiple files and functions, without needing to include all the other variables, or globalize this one every time. In this version, it’s used purely for calling the right images, and assigning IDs to the thumbnails for the rollover effect. For instance, the Adaptive Path redesign uses “web_path”.
• Authored On Timestamp = Priority/Sort Order
  I list this one last, because it was the final piece of the equation which took me a while to put together. The concept is simple. I wanted a means to prioritize pieces within each category (so that certain pieces would always appear first in a category) regardless of their auto-assigned entry ID. I also wanted a controlled way to guide the user through every piece of the portfolio, one piece at a time — like a slide show — via a simple “Next” link. MT already sorts entries automatically by date. Once I realized I could use the date, a whole new level of sort control opened up.

  Since the date consists of six different parts (year, month, day, hour, minute, second), I use pieces of the timestamp to control not only the order within one category, but also the order of the entire portfolio. I use the month for a category number, and the day for the sort order within each category. I have a small enough number of pieces in each category that renumbering would never be a problem when I decide to remove a piece or add a new one.

  I just need to remember that more recent entry dates get rendered first, and oldest dates get rendered last, just like a weblog. This conveniently displays each piece in the MT Edit Entries interface in the same order it appears on the site.

I use the Category Archive Template to spit out one include for each category. Each include contains the square thumbnail images of each piece in that category. The includes are PHP fragments, containing their own logic to determine the current highlighted thumbnail (uses <strong> rather than <a>). Using one include for each category eliminates the need for MT to constantly recreate the same thumbnail set for every piece, just like producing one monthly calendar include for each month of a weblog avoids recreating it for every entry. While the includes are being produced for each category, I also build an array which allows me to match the current piece’s ID to an ordinal number (used for “No. n of total pieces in this category”). Then I can use MTEntryCategory to call the correct thumbnail include for each piece.

The extra variables in Extended Entry are placed at the beginning of each file for use at any time. The number of full size images available is used to determine how many (and which) magnifying glass icons to render. If available, full-size versions are swapped into the same file using a simple query string.

I use one Index Template to produce the list of categories, along with the number of pieces in each category. This list is published as a single fragment, then called in as an include for display on every portfolio page. Again, this list contains its own logic to determine which category should be highlighted as the current category.

What I thought might take several weeks to complete, ended up taking the second half of my July 4th weekend. Two days from start to finish. Removing a piece is now as simple as changing entry status from “Publish” to “Draft”. Inserting a piece anywhere in the sort order is extremely easy using an altered timestamp. A rebuild of the entire portfolio section takes about 4 seconds. My whole portfolio is now accessible and editable through the MT interface.

Another example exploiting Movable Type’s flexibility to manage multiple pieces of content on small-scale sites.

Posted in MovableType, Site, Technology