Building a Photography Portfolio Website in Drupal 6

A portfolio website is something of a necessity for working photographers today. For many, dancing pixels have entirely supplanted the printed portfolios of yore while also functioning as online business cards and phonebook entries of sorts. A well-designed site should offer a solid venue for viewing work while also leveraging the inbound marketing opportunities the internet affords.

A number of firms offer custom and pre-packaged websites that balance the visual and technical needs of photographers with varying degrees of success, but none offer quite what I want at a price-point I can easily justify. Thus I’ve spent quite a great deal of time over the past few years working on designs of my own.

I’ve put together a number of ultimately ill-fated portfolio designs using static HTML, the Indexhibit CMS, Simpleviewer flash galleries, and a number of other tools. After using systems that were a bit over targeted or simplified for my tastes, I decided it was time to learn a CMS/CMF with more flexibility than I could possibly use. I settled on Drupal. Drupal isn’t the simplest system - a clean install doesn’t support image insertion without add-on modules, for instance - but it can be made to do just about anything.

My current website uses Drupal 6 with a number of add-on modules to get it to work the way I want. I find the end result attractive and fast to load while also conforming to search engine recommendations for code. Hopefully the availability of image alt-text and visible captions will make it equally attractive to search engine spiders and result in improved search rankings over time.

The website is easy to maintain and use; adding or replacing galleries and images is all done through a simple online interface and most aspects of the website can be changed without touching a line of code.

If you want to give Drupal a try, here are some of the things I’ve found useful in building my site. Drupal core is well documented on the Drupal website as are many modules, but others can be a bit troublesome to implement. Since I’ve managed to get everything below to work it must all be fairly user-friendly…

This isn’t a how-to guide nor an exhaustive list of modules that might be of use in a photography site. Nevertheless, if you are attempting to construct something similar to my website, this list should save a substantial amount of time; finding a module to do what you want can be more time consuming than actually implementing the changes.

gallery pages

The gallery pages use the Galleria viewer with Imagefield and Imagecache modules. It’s very easy to add, remove and sort photos, which I love. The built-in caption and alt-text handling is cool too. I did very little custom fiddling to get the Galleria galleries to work on this website - the fixed-width theme keeps the thumbnails contained nicely and a little CSS takes care of image placement. Imagecache automatically resizes images to the dimensions I’ve specified which has made gallery creation and updates nearly painless.

If you want to have Galleria pages with varying numbers of photos, you might want to add jCarousel to the mix to handle thumbnails (as I have here). Getting jCarousel to work with Galleria requires a bit more work but the results can be attractive.

I’ve written another short page with tips for getting Galleria to work in Drupal.

homepage image rotator

The home page sports a simple Views Rotator setup. Configuring the rotator is straightforward enough but the process could be a bit confounding without some prior understanding of Views and Drupal’s node-based organization.

If you’re having trouble getting an image rotator display to center, try applying the following to the rotator CSS class:

{ width: [image width]; margin-left: auto; margin-right: auto; }

Other pages

Other odd pages make use of Views and Taxonomy with Imagefield, Imagecache, Insert and Image Resize Filter handling inline photographs (a very handy combination). Views and taxonomy provide a plethora of options for how to select and display content in a blog-ish layout (as in this case). You can make a similar page using Taxonomy alone or Drupal’s built-in blog page function, but Views allows a bit more flexibility. Be sure to also install Views RSS if you go the Views route and want to have a feed associated with the blog page.

Drupal doesn’t come with image-handling capabilities built in, so you will need to put together something to be able to insert images directly into blog posts or static pages. There are many ways to enable direct image uploads but I think the best route is through combined use of Imagefield, Imagecache, Insert and Image Resize Filter. Mustardseed Media has a good tutorial on making them work the way they should.

Other handy modules

• Views Galleriffic is another nice non-flash image gallery for Drupal. I've used it on David Hartung's website. Setting up the view for the gallery is a little complicated but the documentation for the module covers the details well enough. Here are some simple CSS tweaks for Views Galleriffic that may save a bit of time.
• Google Analytics provides an easy way to add Google Analytics tracking data to your pages.
• XML Sitemap. In order for search engines to find all the pages on your website it helps to let them know where they are located...
• Site Verification has a neat interface for inserting the tracking codes required to use things like Google Webmaster Tools - handy for submitting XML sitemaps, for instance.
• Page Title enables additional control over that important content field. The content and order of words in the page title seems to be rather important for search engine placement. If you search for dc photographer, for instance, most of the pages that come up have those words in that order in their page title fields. The homepage page title for this website, for instance, is Guangzhou, China Photographer | Editorial Photography, which should, I hope, eventually help with SEO for the terms in that phrase while also accurately descriptive the website. Page Title depends on Token. Don't overdo it with the search terms, though. I've had this website penalized into search engine obscurity for apparently making too frequent use of the name of a certain large Asian country in page titles and contents. Oops.
• Nodewords makes it possible to control the meta tags output on a given page. Why should you care about such things? If your pages have meta tags, Google will generate descriptions of your pages using the meta name="description" tag. I'd prefer that a search result for the homepage of this website display Forbes Conrad is an editorial photographer based in Guangzhou, China. He regularly photographs assignments for local and international publication. Now that I'm using Nodewords, it should, at least as soon as Google re-indexes my homepage....
• BUEditor is a simple tool for assisting HTML code writing for pages such as this. I don't like to use WYSIWYG editors but appreciate not having to input all the little HTML tags manually; BUEditor helps.
• Addthis Button - should anyone want to share any of my pages via any means available, I'd like to make it as easy as possible to do so...
• Spamspan. Do you want to have your email address clearly visible on your website without it being picked up by spambots? Spamspan is a nifty obfuscation device that seems to do the trick.

The theme

My theme uses the Zen nineSixty (960 Grid system) starter theme, which works, but I think I’ll use Basic in the future. The Drupal website has loads of other themes available that could be used without any tweaking whatsoever. I wanted a minimalistic look for this site, which is why a stripped-down starter theme fit the bill.

Other Cool Drupal Bits

These utilities aren’t required to run Drupal and have no effect on the visual output of the CMS, but can make running a Drupal website much easier:

• Drush makes administering Drupal installs far less work. It's a server-side command line utility that automates common Drupal actions. For instance, through Drush, to download a new module, all you need to do is execute drush dl [project_name]. Much faster than downloading and untarring manually. To clear the Drupal cache, do drush cache clear. Very cool. There are loads of other commands on the Drush home page.
• The Quickstart Drupal Development Environment is a slick little Virtualbox Drupal-optimized LAMP server virtual machine with handy things like Drush pre-installed. It's much faster than building your own Drupal development environment.