Kottke mode (integrated lists & posts)

Ever since Jason Kottke first moved his sidebar content into the main flow of his blog posts, I’ve been wanting to find a way to do that in Typepad. Today I woke up with the answer: abuse one of the other available fields and the conditional tagging possibilities of Movable Type.

Below this post [when it is viewed in the Month Archive view] is a little movie review of Rat. Notice how it’s a small amount of content consisting of a pointer to something else online and a very short comment. In the past, I’ve had this sort of thing in the sidebar of the site, but that has the problem of introducing very recent content into my archive pages and distracting from the topic or time the page is supposed to focus on. It also plays merry hell with search engine results since words from these little mini-posts appear on the same page as the words in the archived posts and are assumed to be part of the same context when, in fact, they aren’t.

So, how did I do it? I appropriated the “Extended” post field and it’s conditional tags, made use of the Movable Type tag <MTElse> and applied some special styling.

Note: this approach requires use of Advanced Templates in Typepad.

For example, in my main index template, I now have:

<MTEntries>
<$MTEntryTrackbackData$>

<a id=”a<$MTEntryID pad=”1″$>”></a>

<MTEntryIfExtended>

<div class=”extended”><$MTEntryMore></div><div style=”clear: both;”></div>

<MTElse>

<MTWeblogPostIfShow field=”date_header”>
<MTDateHeader>
<h2><$MTEntryDate format_weblog_date=”1″$></h2>
</MTDateHeader>
</MTWeblogPostIfShow>

<MTWeblogPostIfShow field=”post_title”>
<h3><$MTEntryTitle$> <span class=”fadeout”><$MTEntryDate format=”%Y”$></span></h3>
</MTWeblogPostIfShow>

<$MTEntryBody$>

<p class=”posted”>
Posted on <$MTEntryDate format=”%B %e, %Y”$> at <$MTEntryDate format=”%I:%M %p”$> <MTEntryIfCategories> in <MTEntryCategories glue=”, “><MTBlogIfArchives archive_type=”Category”><a href=”<$MTCategoryArchiveLink$>”><$MTCategoryLabel$></a><MTElse><$MTCategoryLabel$></MTElse></MTBlogIfArchives></MTEntryCategories></MTEntryIfCategories> | <a href=”<$MTEntryPermalink$>”>Permalink</a>
<MTEntryIfAllowComments>
| <a href=”<$MTEntryPermalink$>#comments”>Comments (<$MTEntryCommentCount$>)</a>
</MTEntryIfAllowComments>
<MTEntryIfAllowPings>
| <a href=”<$MTEntryPermalink$>#trackback”>TrackBack (<$MTEntryTrackbackCount$>)</a>
</MTEntryIfAllowPings>
</p>

</MTElse>

</MTEntryIfExtended>

</MTEntries>

and I’ve added these entries to my style sheet (some, admittedly, more in confused attempts to fix problems with the image floating out the bottom of the box than in answer to a specific design intent):

.extended {
border: 1px dotted red;
width: 75%;
margin-left: auto;
margin-right: auto;
padding: 3px;
}

.extended p {
text-align: left;
}

.extended img {
float: left;
margin: 2px;
}

I made similar changes to those in my main index template to my archive pages, but decided in those contexts I want the “posted…” line to appear so that people have access to commenting, trackbacks and permalinks. Visit the Memetic archive to see this.

Now I just need to make sure I didn’t ever use that extended post format for an actual continuation of a post. Let me know if you ever spot something in this indented, dotted border style that isn’t a little link or short media review, won’t you? Ta.

I should also say thanks to Nikolai Nolan for assistance with using the CSS clear:both trick to make sure an image floated in one of these little mini-posts doesn’t extend down beside the title for the next post. Unfortunately, I subsequently broke something. Anyone got an idea what I’m doing wrong with that image?(Oh and why won’t CSS let me tell the image “don’t impinge on anyone else’s personal territory” instead of having to tell everybody else not to let the image bug them? Weird mental model, sez I, and fervently hope I’ve missed something along the way and it isn’t that wacky.)

p.s. Note that since the Typelists only display the date and not exact time of entry creation, all these former Typelist items I’m migrating into the new format (i.e. all prior to today) have made up times.