Faux photoblog

Recovered from the Wayback Machine.

Six Apart has announced the preliminary release of TypePad, a hosted solution for those people partial to Movable Type. Prices look pretty decent, low enough to be competitive, but not so low that there’s thousands of weblogs on one server.

Among the features is HTML-free templating, moblogging, automated FOAF generation from the blogroll (hmmm – don’t agree with this one), as well as the ability to show what you’re reading and listening to. The best decision Six Apart made with TypePad was pointing the weblogger’s domain names at their weblogs. Depending on the web server used, this is a very doable thing, and I think other hosted solutions are going to have to look at this as an option.

One of the functionalities that TypePad has that Movable Type doesn’t is a ‘photoblog’, photography weblogging setup. I imagine this will interest quite a few folks who already have their own hosted MT sites. I liked the look and feel of many of the photoblogs I looked at, such as Joi Ito’s San Francisco photos, so I set out to re-create the look in a Movable Type weblog called MT Faux PhotoBlog. Once I figured out the templates, it was quite easy to create the album, and I may do this for other photo albums.

How does it work? The solution requires that the server have ImageMagick, and the ImageMagick Perl wrapper installed. Otherwise you’ll need to create your thumbnails yourself.

Categories are created for each photo, sans the photo extension. For instance, a photo such as tunnel.jpg would have a category called ‘tunnel’. When the photo is uploaded, it’s uploaded as a separate entry, and a thumbnail is created. When I create the thumbnails, I don’t constrain the image proportions, so that I can create square thumbnails. In the Faux PhotoBlog, I’m using thumbnails of 120 x 120px sizes.

To get the front page, I replaced the traditional MT entry listing with the following:

<div id=”content” style=”align: center”>
<div class=”blog” >

<MTEntries lastn=”20″>
<a href=”<$MTEntryPermalink$>”><img src=”<$MTBlogURL$>photos/<$MTEntryCategory$>-thumb.jpg” alt=”<$MTEntryTitle$>” class=”mainpage” /></a>
</MTEntries>

</div>
</div>

What this template code does is create the URL for the image by concatenating the category name, with the blog URL and photo thumbnail filename extension (jpg). Instead of category, you could also use entry title, but then this forces it into a title that might not be descriptive. Instead, I used entry title for the ALT tag for the image, and reserve category for the filename.

To force the images to line up and wrap without using an HTML table I created an img CSS class to use with the images that sets the image to inline display:

img.mainpage {
display: inline;
margin: 5px 5px 5px 5px }

I also gave the images 5px of space around them on each side. All the images are given a border, in this case a solid grey one.

(If your browser doesn’t support display:inline, you can also surround each photo with a SPAN tag, as this forces the image inline. However, if you do this, make sure your outer DIV block doesn’t have left padding or margin, or you’ll get uneven wrapping.)

This takes care of the main page. For each individual page, to get the lined up thumbnails, I used the following:

<div class=”side”>
<MTEntries lastn=”20″>
<a href=”<$MTEntryPermalink$>”><img src=”<$MTBlogURL$>photos/<$MTEntryCategory$>-thumb.jpg” alt=”<$MTEntryTitle$>” width=”50″ style=”margin-bottom: 10px” /></a><br />
</MTEntries>
</div>

I’m using the browser resize capability – resizing the thumbnails from 120 down to 50. However, that’s something you can change. It just seems to match the PhotoBlog look. Additionally, in this setup, I only list the most recent 20 photos, but you can change this, on the front page and in the sidebars.

That’s it. Then, to add a new photo, just upload a new photo, make sure you create and upload a square thumbnail the same name as your original photo with a ‘-thumb’ appended, and name the category for the photo the same name as the image file:

photo: tunnel.jpg
thumbnail: tunnel-thumb.jpg
category: tunnel

You’ll need to rebuild all entries each time you add a new photo, otherwise it won’t show in the sidebar. Chances are, you’ll want to consider keeping your photo albums smaller, less than 100 photos.

TypePad’s photo album feature probably has a lot more features, but for those of us on MT, at least we can capture the look.

(Access the individual and main index templates, and stylesheet. )