Tapirtype Blog: Index

« Best Pie | Main | Wookie invasion »

Movable type entry formatting

Movable type entry formatting

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.

Comments (2)

On August 6, 2006 5:28 PM,

Comment by hweela:

Hi Mike,

This is Jake (Julie's boyfriend). Julie asked me to read this post and I can offer a few suggestions if you are interested.

First off, I sympathize as to why you wouldn't want to handcode your entries. That sucks. You have a few options though in which you can use a WYSIWYG editor that is loaded directly into the blogging software itself. Kinda like loading Dreamweaver (or GoLive) into Moveable Type. You would have to install a plugin that installs either 1 of 2 free WYSIWYG editors named tinyMCE or FCKeditor. I reccomend FCKeditor since it has an integrated file manager... see http://www.sixapart.com/pronet/plugins/plugin/full_featured_f.html or go to http://www.fckeditor.net/ to demo the editor.

However, installing these editors can be tricky and difficult if you are unfamiliar with PHP / MYSQL / javascript so instead you could switch your blogging software to Wordpress. The most recent version (as of 6 months ago at least!) had an integrated WYSIWYG editor & it automated the process of inserting thumbnails in your posts which automatically link to the full size photo. http://wordpress.org/.

As far as using a table for layout, if it works, great. Keep using it. But if you want to allow the text from your posts to wrap around your images it is actualyl very simple to implement without a table. Just go to your style sheet and add the following line:

img {
float: left;

With this style, all images you insert will be left justified, and text will wrap around the image with 10 pixels of buffer between the image and the text on the right and below the image.

Hope some of this is helpful. Feel free to email me if you have any questions.

- jake

On August 6, 2006 5:51 PM,

Comment by mjboyle:

Thanks for the suggestions!

I realized that there were some plugin options for WYSIWYG editing, though I didn't know the specifics. Mostly I just figured, hey, I already own this software, I'd really rather be able to use it. Also, since you can put any arbitrary html into a post, I'd really like to be able to use a good local solution for drafting complicated posts.

As far as the default left-floating image, that's great if that's the only thing I want, but the point of this was for when I want more flexibility than that. I'm probably going to do something like that when I just want to paste a couple of images in.

I'll have to look into the plugins you mentioned, they might be a good in-between solution. I can just be a bit of a control freak when it comes to layout.

Anyway, thanks for the suggestions. I'll let you know if I've got any questions.


Post a comment

You are visiting Tapirtype Blog. Unless otherwise noted, all content is © 2006-2008 by Sasha Kopf and Michael Boyle, some rights reserved. Site design by Michael Boyle modified from the standard Movable Type templates. I've made an attempt to generate standards compliant content which should look best in Safari or, otherwise, Firefox. Use of Internet Explorer may be harmful to your sanity and I've made little attempt to support it.

If you like you can subscribe to Tapirtype Blog's feed. That way you can be the first to know when more things burble from our brains.

This page is published using Movable Type 4.1