God Bless Taxonomy - Creating CraftyTraveler.com with Drupal
(A non-programmer, non-admin web designer wades in!)
Having just sold my share of the web development company (www.pangomedia.com), I decided I needed a second career/hobby. I'm a bit of a travel buff, and have always been frustrated with the cruddy travel sites on the web, so I decided I'd make a repository of screened/edited travel guides (user submitted) at www.craftytraveler.com.
Being a web geek that is decidedly from the graphical side of things, I was hesitant about Drupal. I was very used to having a programmer/admin at my disposal (I no longer did), so I was hesitant to go beyond my solo-comfort-zone (static HTML). But the idea of managing thousands of travel articles (categorized and searchable) was fairly horrifying. And I'd heard enough clients say "If we had KNOWN it was going to get this big, we woulda built it right from the get-go!" that I was damn well going to set it up so that it could scale up as it needed to without a major retrofit.
I'd set up exactly 1 Drupal site before in my life, so I was definitely not a Drupal expert. I'll walk you through the assorted development stages of the site and talk a bit about my learning experiences as I went.
1. Prototyping
I'm a bit of a nut for user-interface and design (in that order). Despite the fact that I knew Drupal had limits, I was resigned to designing an interface FIRST, and then trying to poke and prod Drupal to make it work. So I created a Photoshop document first (jpg shots here, here and here, then chopped it up into a prototype HTML document (can be seen here). I fiddled with it for a few weeks, asking friends and colleagues for feedback to refine it and submitting it to the infamous "Mother Test" (putting it in front of my Luddite mother and seeing if it confused her). It finally passed muster, and the next step was uncharted territory for me-- installing a PHP/MySQL application by myself.
2. Drupal Install
What a delight! The mystery of installing a PHP/MySQL application was a mystery no longer-- in fact, it was ridiculously easy. With a simple FTP program and PHPMyAdmin (web based MySQL controls), I installed my first solo instance of Drupal. The directions were spot on, and no errors (initially) cropped up. I later found out that my hosting company (like MANY out there) was using a slightly old version of PHP which rendered the search functionality of Drupal thoroughly broken. No biggie-- I had to migrate to a new server. Though it'd be good to make darn sure what your hosting company is running (version-wise) before you get deep into development of your site.
3. Templating
(note: from my first Drupal experience, I took one valuable piece of information: FIXED WIDTH TEMPLATES ARE A PAIN IN THE BACKSIDE. You will save yourself a ton of heartache if you design your site with a percentage-based design-- i.e. one the expands to fit the browser window).
My first step after install was to create the visual wrapper (template) of the site. To start, I just duplicated one of the directories in the "themes" directory and starting hackin' around to see how it was set up. I strongly recommend using the PHPTemplate engine over the XTemplate engine (which seems to be the default, strangely). It took a few minutes to install, and made templating a lot easier.
To create my template, I took my prototype HTML file and stripped out all of the content, and renamed it page.tpl.php. I then took one of the stock page.tpl.php in one of the other theme directories and started copy-pasting anything that looked remotely like PHP into what I thought would be the appropriate place. If it was inside the <head> tag in the working template file, I put it there in my prototype. If it was in the lefthand column, I dropped it there in my prototype... Well, you get the idea. Remember, that I couldn't program my way out of a paper bag (though the PHP statements were intelligently named, so they were generally pretty obvious). Once I ran out of PHP stuff to move over, I uploaded my revised file (now named page.tpl.php) and lo and behold! It worked (once I set it as the default template). It still looked cruddy (because I had to monkey with the other tpl files and the CSS), but it was definitely my template!
As I dug in a bit more, I realized that most of the other tpl files really didn't require much editing-- most of the visual controls were in the CSS file(s). To move the text styles in the direction I wanted to, I just started one style at a time. I found a piece of text whose style I wanted to alter, and looked at the code to try to figure out which style controlled it. Sometimes it took a bit of trial and error (there is evidently a global stylesheet in the misc directory called drupal.css which can override some stuff you might want to do), but I eventually got the text styles about how I wanted.
4. Taxonomy & Categories
Taxonomy is the term that makes most Drupal newbies grumpy, but it's really the thing that sets Drupal apart. My goal was to eventually have thousands of travel guides. I knew that a browse-interface was the way to go in the early stages (it's no fun to search a largely empty database) but eventually I wanted the home page of my site to be a simple google-esque search interface with a few advanced options. If a person (eventually) wanted to search for articles written by women about traveling in the Middle East that included discussion of adventure travel and local cuisine, I wanted them to be able to search for EXACTLY that. Which is where taxonomy came in.
I first created a vocabulary (category) called "World Regions". Makes sense. I then added a series of terms under that category (North America, South America, Europe, etc). I didn't go any deeper than the main regions of the world (yet). To accommodate the ability to search/browse by style of travel, I added another vocabulary (Category) called "Travel Style". Under that, I created a series of terms (Adventure Travel, Local Cuisine, Nightlife, etc). I created a final vocabulary called "Gender", under the assumption that woman travel writers might talk about things that women care about, and threw two (hopefully obvious) terms in that category. Note that right now, content is largely offered through a browse interface. But as soon as I feel I have enough content, I can (in about 5 minutes) open up the capability to search/sort/browse by travel style or gender.
Here's the great thing. I really didn't want a big empty site to scare away visitors. I could've created a deeper regions category, creating a subcategory of each world region for countries, provinces, states, cities, etc, but I didn't. Instead, when I received and approved an article (I got 70 in the first 10 days of the site being live), I create the appropriate subcategory for it. My first article was on Jack the Ripper Tours in London England-- so I create a term called "England" and assigned Europe as it's parent.
Here's the other great thing. I didn't both to create a "London" term and assign it as a sub-sub-term of Europe (under England) - why bother breaking stuff down that deeply until I have a whole pile of England articles? So I left it floating under England where it will live happily with any other England Articles. Once I get enough articles about England that they get awkward to browse through, I'll create some new terms to further define the articles. It only takes a few scant clicks to re-assign a story to a different bunch of categories/terms.
5. Modules
Drupal by itself feels incomplete in a lot of ways-- and I think that's on purpose. Rather than force developers to deal with their users in a specific way, they leave a lot of functionality open-- to be filled by the gazillion modules that are available (or you can try to develop one yourself, though that is certainly outside my skillset). A lot of these modules are fantastic. I was a little frustrated by the fact that you pretty much have to install the module to see exactly what it does/what it looks like-- but given that it really only takes 5-10 minutes to download and install a module, this didn't turn out to be a big deal.
Here are a few modules that I (easily) installed and configured:
Taxonomy Context - This is the core of my current article navigation scheme (on the lefthand side). World regions are obviously very nested, so a nested list like this seemed ideal. Essentially, this allows you to regurgitate a category specific list (in this case, World Region) as a block (either in the left-hand column or right-hand (though presumably you could put it anywhere if you installed Flexiblock)
Path and Pathauto - These allow you to have (overridable) URL paths based on your taxonomy and story/page/node names. This is a big deal for search engines, and allows people to have a good sense of where they are in the site besides. A good example is /usa/tennessee/bbq_in_memphis_tennessee.
Inline - There is a lotta grumping in the Drupal forums about the assorted image handling modules. Inline (and img_assist) are both quite handy for adding images to stories. Ultimately, for what I wanted, I ended up using a combination of these and a few free PHP scripts to do what I wanted.
6. Problems and Frustrations
There really weren't too many frustrations/problems in the development of this site-- but there were a few land mines that maybe others can avoid or will be dealt with in future versions or modules.
a. The search functionality in Drupal 4.6 requires a relatively recent version of PHP. Not a huge deal for me to move it to a different server when I found this out. But if you have a shared hosting company that you love who happens to be running an older version, you're likely outa luck. "You want me to upgrade PHP on a production box with the PLESK control panel for you, a $10month hosting account?! Bwahahahahaaha!"
b. Image modules. I wasn't able to find an image module that fit my needs exactly. Some of my authors submitted articles with no images, some provided a single image, some provided a whole gallery. For those that provided many images, I wanted to have both a simple-to-set up slideshow gallery as well as dynamically sized popup windows for inline images (you can see both of these in action here). Unfortunately, no modules did the trick. Eventually, I'll likely have a contract programmer write a module, but for the time being, I used a few free PHP scripts that I found out there. Which leads me to...
c. PHP Code Input Format. If you want to put PHP into a node (story/page/whatever), Drupal won't create a suitable teaser-- it just uses the whole dang article for teaser. I understand there is a committed patch for this, but I couldn't get it to work-- so demoted the node off of my front page. <sigh>
d. Tables in nodes. Even if you don't do PHP Input Format, you have to be careful about putting table code of any flavor into a story. When Drupal creates the teaser, sometimes it'll pull a chunk of that table as part of the teaser, thoroughly borking the HTML of the rendered page. I dealt with this by dropping any tables well past the 200 characters that Drupal uses as a teaser.
None of these things were a big deal, but they definitely forced me to do things in what I thought was a non-ideal way. I'm also happy to admit that (because I'm a non-programmer) there may be solutions to this that are a lot less stupid than the ones I came up with. In fact, I just saw the module Teaser Module, which should deal with my C & D issue!:-)
Great looking site
You mentioned some free scripts that let you do those cool photo popups in the example here could you explain more how you did this. Where is the code? Also, are you receiving the artilces and attaching the pictures or is this something the author is able to do and still end up with that cool popup format for the images?
Great Success Story
Great success story and a great introduction on how to use Drupal on the basis of a very interesting project! This case study should actually be a how-to for newbies!
Many Thanks
Hi, im andyg from Beijing China, planing to build a local travel website.Your article give me lots of usfull imformation! Thank you very much
God Bless taxonomy
Your article was all the tonic I needed to start my Drupal Project. I will sure notify the community as soon as I setup the site. Thanks
Mudiaga C. Otokpeya
IT Specialist