Beyond the Blog

I've spent the past year and a half playing with the possibilities in Movable Type (MT), through my personal and client sites. Like all weblog management tools, MT is basically just a lightweight content manager, but it's power is in its flexibility. This article is aimed at people comfortable with HTML and creating their own MT templates, but if you're new to the tool there might still be some tips worth picking up. The template system is the core feature of MT I'm tweaking in all the following examples. MT came onto the scene in Fall of 2001 and introduced a feature not many other blogging tools shared (then and still now), and that is the flexible way templates are handled. Instead of just skins for your weblog, or a predefined limit of templates for your index and archives, it not only ships with templates for every aspect of a weblog, you can have as many additional templates as you want and they can do any number of things you need.

Easy tweak: publishing the rest of your site in MT

It's pretty common for people new to weblogging to embrace the simplicity of publishing, and crave it in the rest of their tools. Once you start blogging and the pain of FTP and hand HTML coding is gone, many people start wishing their blogging tools could handle other pages on their site, but virtually none of them do out of the box. About six months ago, I was asked to help with some updates on Stanford's Center for Internet and Society site, and I learned that the entire site was editable in MT. It was so extensive and powerful that I spent a couple days making layout, content, and site-wide navigation changes and didn't even have a server FTP login. The ever brilliant Kathryn Yu used a combination of server side includes (to hide redundant markup) and MT templates to control every single page on the site (both static and weblog). Then she gave some people rights to modify templates, in order to let them edit the text of static pages. As you'll find out, it's pretty effortless to power a site's about page, a resume, and/or a contact page with MT. The secret is simple: create new templates that hold your static content. Although templates were designed to feature output by the MT weblog content engine, there's no requirement for that, and this is a easy tweak of the system. Example: adding an About page to an existing MT-powered blog. Log into Movable Type and select "Templates" on in the left hand menu. To make things easier, you'll want to copy the design of your Main Index template so the HTML is identical on your About page. Click on "Main Index" to get the template edit screen, then copy all of the template code. Hit your back button to return to the list of templates. Follow the link to create a new Index Template. Give it a name like "About page" and an appropriate filename. Paste the Main Index template code into the textarea. Remove everything between the MTEntries tags, including the tags themselves. In the place of the weblog code you just deleted, enter your About page content, with appropriate markup as necessary. Figure 1 shows a conceptual diagram of how this works.

Figure 1. Conceptual diagram of how a normal weblog page works in MT and how a static page works.

If you want to make things easy on your server, check off the option that says rebuild this template automatically, since it won't have any weblog data that will be changing constantly (otherwise it'd just be wasting server resources every time you posted a new blog entry). Whenever you do want to update the page, edit the About page template HTML and make sure you rebuild just that template by clicking the Rebuild Template button below (note: not the rebuild link that will shown above your template information, the form button at the bottom). While it's a slight bit tedious to setup each static page in this way, you will gain the convenience of being able to update any page on your site directly within MT. You can continue creating as many pages as you need, such as a page for your resume, a page linking to your photo galleries, a contact page, a search page, and/or a links page. I've converted all the static pages on my site using this technique and find I only have to update a static page once a month or so, but having them all accessible from a web browser makes updates easier and I find I make changes more often.

More Advanced tweak: using MT as a simple database application

While movable type was designed to handle all the data associated with weblogs, you'll soon see that MT can also be used to create a photo gallery, power a design portfolio, keep a recipe catalog, or anything else you can imagine. I've been building database-backed websites for the past four years and there's one simple reason I love building them: once you've done the extra work and created the code to output a single page, you can then output ten thousand pages. After building site after site like this, I've found one of the problems is that coding the database layer and scripting layer is time consuming and requires a lot of work. Then I realized that I could use MT for simple database needs. It all began when I starting thinking of how I could convert this featured essay section from a system I built myself to movable type. My custom application used these fields to describe each essay: title, subtitle, image, the essay itself, and the date. I realized there were at least that many pieces of data in a movable type blog and went about converting things over. Basic database concepts I tend to think of databases a lot like simple spreadsheets. If you imagine every piece of data a Movable Type blog can have, it looks something like the table below.

MT field name	Data type	Sample data
Entry ID	number automatically generated by MT	624
Entry Title	text	Catching a ball game
Entry Date	timestamp	September 12, 2003
Entry Body	text	I scored two tickets to the World Series game between the...
Extended Entry Body	text	When I got to the ballpark, I realized I forgot the...
Entry Keywords	text	baseball, stories, World Series
Category	numeric pointer to another table of category names	Sports

Note: You might not be able to see all these data fields in your Movable Type installation, make sure you have the latest release (2.64 or later) and be sure to click the "Customize this Page" link on the new entry page, then enable everything you can in the "Custom" view. In the table above, the title, body, extended body, and keyword fields are totally open-ended text containers. For this section of my site devoted to featured essays, I re-used the data in the following way.

Essay section names	MT fields used	sample data
Essay Title	Entry Title	Beyond the Blog
Essay Subtitle	Extended Entry Body	Powering an entire site with Movable Type
Essay Image	Entry Keywords	beyond.jpg
Essay body	Entry Body	I've spent the past year and a half playing with...
Essay date	Entry Date	July 14, 2003

As you can imagine, Movable Type's weblog engine can be re-used for all sorts of pages. I am currently using MT to power my press list at MetaFilter and the press at Ticketstubs, it powers my mobile phone photo gallery (Additionally, I'm using a piece of email-to-MT software that saves the images and puts the image names into MT fields), and it also powers my list of photo galleries (I designed a separate app to host the images -- eventually I'll move that to exported iPhoto galleries). Example: Creating an online portfolio with MT I use a database application whenever I have content that repeats and follows a distinct pattern. For this example I'll create a portfolio of web sites I've designed. A portfolio generally follows a pretty set pattern where you have a screenshot, description of the site, and associated data (name, date, etc). I'll start by listing the bits of info needed for each entry in my website portfolio.

Portfolio entry name	sample data
Name of Site	Creative Commons
Screenshot image of Site	creativecommons.gif
Description of the Site	For the non-profit Creative Commons, I set out to...
Date Site launched	December 16, 2003
Type of work	Employee

Looking at the available fields in MT, I'll map them as follows:

Portfolio entry name	MT field name
Name of Site	Entry Title
Screenshot image of Site	Entry keywords
Description of the Site	Entry Body
Date site launched	Entry Date
Type of job	Entry Category (category types include Employee, Contractor, and Volunteer)

Keep in mind that for media files like images, audio, or video, I typically put simply the filename in a MT field, then build a link in the template like so: <img src="/portfolio/screenshots/<$MTEntryKeywords$>"> and I upload the images separately into the folder. To be honest, I'm still working on my portfolio pages and can't show you the output with a link, but Ryan Schroeder recently emailed me to show how he'd done his portfolio in MT here. You can see that he's using categories to split his type of work into Web Sites, Print, Presentations, and Identity, and each entry features screenshots and text (probably all within a single entry field I'm guessing). Caveats and limitations Now obviously MT can only go so far with this, and you'll have to limit any site to six different types of information, but it should be clear that for a lot of websites it's all the complexity you need. Anything you want to keep track of online that is limited to several properties can be handled by MT. The other major downside to repurposing MT is that you're still stuck with the MT posting interface that clearly asks for all the pieces of a weblog, even when you're using it for posting recipes (which, by the way, could be done using category as the meal type, the name of the dish would go in the title field, the instructions in entry field, and the ingredients in extended entry). I know the Movable Type folks have talked about creating a developer program and after doing things like this with MT, I would suggest that MT someday become flexible enough to where a developer could customize the interface to posting for client sites. I'd love to deploy a site intended for an aspiring author to track all his articles written, books reviewed, and favorite sites, but give them a custom backend that clearly labels each thing appropriately. Sort of like a template system for MT itself. Just the other day I noticed that Jay Allen has done just this for one of his clients. So what have we learned? I learned these techniques slowly, and as the lightbulbs went off I thought it might help to share it and hopefully spark ideas in others. I didn't realize what a flexible and powerful system I had right under my nose and now that I've started playing with the possibilities, I can't wait to see what others come up with. Updates This article has sparked some great additional hacks. Brad Choate, grand master of MT hacking, tells of a smoother way to add static pages to your site. Scott mentions how to tweak output paths. Doug Bowman explains exactly how he uses MT to control his portfolio, using a bit of PHP to go beyond just a handful of existing data fields. Some example sites I forgot to include, and from people that emailed me are below. Some examples of innovative MT uses Boxes and Arrows An online magazine with over a year of archives and dozens of articles (with comments) that span multiple pages (how that was done). Looking at this site, it's not much of a stretch to imagine Wired News being powered by Movable Type someday. The Morning News Another magazine-like publication that uses MT for both articles and their front page's blog-like headlines. Features nice use of categories for stories and a robust page for every author, with pointers to all their previous contributions. Adaptive Path A business organization's site that features both static and dynamic content, AP's newest site went through a recent redesign and is now entirely powered by MT (see comment #80 in that thread for pointers to how it was done). About.com I don't know how they did it, but every sub-sub-sub category at About is running its own MT blog (with RSS!). Examples: index of a category, single entry Redland Baptist Church MT being use as a whole site CMS for a church's small site. Touch of Hope Charity site built entirely with MT (info on the setup)