We've been pushing Drupal to our clients for the past few years already, but I'm a bit ashamed to admit that we've only found the time to put our own site on it just now. While we could've done it earlier, we're quite sure that now we have a few Drupal sites under our belts, we know we did this site the right way.

I could probably go through a quick overview of how we made the entire site in one entry but that would just make it seem like we're bragging about it. Instead, I'll go through two of the more interesting parts of the site: the portfolio and the blog. (Aside: The rest of the site is core Drupal and boring anyway.) Hopefully that way, you guys might learn something from what we did, and maybe we can learn something from you too (leave a comment, people!).

For Part I, I'll go into the Portfolio - a must have for any web developer/designer's website.

Making the Content Type

First step, we make a new content type. For our portfolio, we named it Project.

With the help of CCK, we add three custom fields: Thumbnail, Preview, and URL. Thumbnail is an image field. We are certain that it will always be an image. Preview is a file field. Why a file field? Although currently all we have in our portfolio are websites with just screenshots attached, we anticipate the need to include Flash presentations and videos, so we'll need the ability to attach SWF files to Projects. Finally, the URL field is just an optional text field. Some entries in our portfolio are no longer in active use, and hence no longer have an active URL.

Next, we create a taxonomy vocabulary to indicate the different project categories. I named it Project Type. We set it to allow multiple selections because every now and then you have a project that falls under more than one category. Of course, we assign it to the Project content type. Then we go through adding each of the Project categories.

Creating the Views

A quick run-down of our settings:

• Style is set to an unordered HTML list. It's a list of projects, remember?
• Display style: Node. I like the level of control this style provides. You get the ability to control its HTML output via the node templates, and you immediately have the option of having two different templates depending on whether you're displaying the teaser or not.
• We opted to set no limit to the number of items to display and therefore no paging was needed. When the contents of our portfolio get to the hundreds then maybe we'll rethink this.
• We added a taxonomy term page argument. We want to allow visitors to filter through the various categories. If a user wants to only view microsites, he simply needs to go to portfolio/microsites. More on this later.
• The sort criteria is simply set to sort the Project titles in alphabetical order. It's just cleaner that way.
• Finally, we added a filter to only display Project nodes.

Creating the Secondary Menu

The tricky part came when I needed to make the secondary menu. I wanted to be able to have a dynamic menu that would be updated every time I updated our taxonomy terms. Enter, the Taxonomy Menu module. Out of the box, the Taxonomy Menu module puts all the terms of a vocabulary in the root of the selected parent menu. To put the terms under the Project Type vocabulary to go under the Portfolio menu item in the Primary Menu, I found this: http://drupal.org/node/408288. The patch allows you to select a parent menu item instead of just a parent menu.

With that done, any changes made to the taxonomy are immediately reflected in the Portfolio secondary menu.

The Lightbox Effect

We had already implemented Lightbox on our portfolio in a previous incarnation of our site, but its implementation was quite limited. To go through the entire portfolio, a user had to exit the lightbox and open it again for each Project.

After consulting with this comparison of Lightbox-type Drupal modules, I decided to go with Lightbox2. It was the most powerful and feature-packed Lightbox module. Most importantly, it supported Flash videos. With Lightbox2 we allowed the user to go through the projects just by going "next" and "previous". Although Lightbox2 integrates with Views, I chose to take the manual route and edited my node-project.tpl.php to insert the rel="lightbox[portfolio]" code that allowed Lightbox2 to create the Lightbox slideshow.

And there you go. With the help of a few modules, we have a completely user-manageable and user-friendly portfolio system made pretty with Lightbox2 Javascript-fu. It took us a bit of effort to figure it all out and put it all together for the first time, but once you know what you need, it's all pretty simple to put together.

Maybe you guys out there have other ways of implementing your own portfolio systems for your own sites. Let's hear about them in the comments!