Tapirtype Blog

You may of noticed that I kind of petered out on my last post about our Saturday morning tradition. That’s largely because I spent all day working on a convenient way to format entries in Movable Type with multiple pictures and text flowing around them. We’re using Movable Type here at Tapirtype, and largely I couldn’t be happier. I looked into it the other day and discovered that I could set up a non-commercial blog for free, which is great, and I downloaded it, expecting to quickly run into a snag that I couldn’t resolve. To my surprise, after creating a new subdomain on our webserver, I was able to install and set up the software very easily.

Furthermore, they’ve set up the software to be almost infinitely flexible, taking care of all the drudgery of blogging, while still allowing you to make your site look and behave pretty much any way you want. I’ve only done mild re-formatting so far, but I could, and probably will, do much more eventually.

Furthermore, publishing and management is very easy. The software is set up to easily manage publishing text based entries, comments, searching, trackbacks, and the like, and you can easily upload a picture and write an entry around it. But it is just flexible enough to encourage you to want to do more, and produce a well formatted photo essay like the one I wanted to make. Unfortunately, there things get more difficult…

If you want to compose the entry in the Movable Type software, you’ll have to code everything in html by hand. This shouldn’t be very difficult for many or most things, except that I find entering the URLs of the pictures that I’ve uploaded by hand very tedious after a while, especially when I can’t see the results immediately. And without any idea of how the formatting will actually look it is difficult to know when the flow is right to add another picture. Also, my html isn’t good enough for me to be confident about how things will turn out or what the right tags are 100% (or even 75%) of the time, and given the availability of many, many good visual html editors, it seems a shame not to use them.

We have Adobe GoLive which Sasha has used to great effect at her main site, and while it has its problems, it seems a shame not to use such powerful software, to do the job. The only problem is that GoLive is set up to manage a site, a job that the Movable Type software is already handling. It expects to upload the pictures itself, and it doesn’t do a good job of finding pictures that I’ve already uploaded, at least not in a straightforward way, and if I’m just typing the URLs into GoLive, then I’m pretty much back where I started.

What you need to do, it turns out, is trick GoLive into thinking that it is in the context that you need it to be in, and let it pretend to manage the site. For instance, I uploaded the photographs to a folder in blog.tapirtype.com/2006/08/05/ and had separate folders for the thumbnails and the main images. So I made a site in GoLive with this folder structure, and put local versions of the images in the same place. The sites “index” is the file that I’m going to edit and it is in the top folder of the site (which GoLive thinks of as the root) with a 2006 folder containing an 08 folder, etc. Now if I tell GoLive (through the site preferences) to make the links full instead of relative, and I point it to an image, it will produce the URL as “/2006/08/05….” a URL that will work as a direct reference to the images in Movable Type as well.

Now I just have to get some idea of how things are going to look. In order to do that, I downloaded the style sheet I’m using in Movable Type and put it in the root of GoLive’s new site. Then I went to an individual entry archive page on the blog and got the source from my web browser. This gave me the html of a file after Movable Type has published it. I then edited the link to the style sheet to link to the downloaded copy of the style sheet (GoLive won’t pay attention to an online style sheet and you couldn’t edit it anyway). Now I can freely edit my entry in GoLive, using its site management tools to find the images I want and its visual approximation of what the site will look like to judge how I want to format it. Once I’m ready to post, I can just copy the code of the entry and past it into the movable type software.

As far as the formatting itself goes, I found that what works best is to use a series of 100% wide tables with two columns each set to 50% wide. Then I can paste pictures into them and control their position relative to the text without any unintended consequences. And if I have any need for a new style type (such as the captions in my last post) I can just make a new entry at the end of the style sheet and append it to the template of the actual one in Movable Type.

I’m sure that any experienced web designer would laugh at all of this. Either because it is so obvious or because it is so ass-backwards. But it took me a while to work out and it does a good job of extending the formatting capabilities of Movable Type with relatively little (future) effort.