Beyond the Blog

July 14, 2003, by Matt Haughey

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.

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.

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.

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

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:

TypePad has it’s own WYSIWYG, rendering the rest of this post unnecessary as TypePad can do all of this on its own now with their built in Rich Text Editor which is even better than Blogger’s (PLUS you can edit the HTML directly from w/in TypePad’s edit post interface, as well — something I’ve yet to see in ANY other blogging software..

This is a test to see whether I can copy code from Blogger over to TypePad

• This should be a bulleted list item

This should be switched to Times New Roman a size larger and colored RED.

This line should be centered

1. now for a numbered list
2. item two…

Switching fonts to Verdana and

——————————————————————————————————–

Hmmm. It would appear that perhaps the best method is to use TWO tools. Blogger has a better WYSIWYG design interface w/in which to create a better looking post. You can then click on Edit HTML, and copy and paste everything into your TypePad post - and now you have the functionality you want with TypePad, such as Categories and TrackBacks, w/the ease of individual post design of Blogger. This could work..

UPDATE: As of early Nov ‘04, TypePad has it’s own WYSIWYG

indenting

UPDATE: This post is a tad obsolete now that TypePad allows you to edit HTML directly. Simply click the ‘Edit HTML’ tab from the compose post screen and modify or create your html to your hearts content. Click back on the ‘Compose Post’ tab and your changes will be implemented immediately

• Here’s some code I created in Macromedia Dreamweaver MX 2004 and then pasted the source straight into TypePad
• this should be a bulleted list
• Changing fonts to ARIAL

This should be a red header

this should be centered

1. a numbered list
2. (have to have two items to be a list)

From TypePad’s Help, when you are creating a new post if you scroll down to the bottom of the page, you will see a small link underneath the Preview and Save buttons entitled, ‘Customize the display of this page‘.

Go ahead and click it. You’re now given a choice of basic, advanced, or custom. Go ahead and choose advanced, and you will now see the following extras when you create your posts:

displays the Title, Category, Post Introduction, Post Continuation, Comments, Accept TrackBacks, Posting Status, Excerpt, TrackBack URLs to Ping, Text Formatting