openswitch

If you’re using Textpattern then this tutorial is for you. If you’re using WordPress then you really need to check out Shawn’s tumblog tutorial.

I’ve said it before and I’ll say it again, Textpattern (hereafter referred to as “TXP”) makes stuff like this easy because it’s so flexible. A typical tumblog doesn’t allow comments at all and almost never includes entries as long as this. They also typically don’t provide a permalink for each entry, just for each day. That’s why I call this a hybrid tumblog. It’s a hybrid between a standard blog and a tumblog.

A couple disclaimers to start with:

1. I am not a coding guru, nor am I a TXP guru. There are probably more efficient ways to accomplish a tumblog with TXP. I think what I’ve done is a hack and isn’t pretty code. If you feel like you could clean up the code that I present here and/or you know of a more simple way to accomplish a tumblog with TXP please do share and I’ll correct this article to reflect the added knowledge.
2. I do not intend to show you how to style your blog like mine, I only wish to show you the structure I used to accomplish this layout.

Create the necessary sections

In a typical tumblog there are at least six different kinds of posts.

1. Regular text – This is your standard “blog post.” What you’re reading right now is a “Regular text” post on openswitch. Granted, most tumblogs don’t include entries this long but I’m running a hybrid tumblog.
2. Photo – Post interesting photos from Flickr or wherever.
3. Quote – Quotations, usually from well known people (example).
4. URL – Any URL from the Net that you want to share with your readers.
5. Conversation – IRC conversations, IM chats, or just snippets from conversations you’ve had throughout the day.
6. Video – Very similar to a Photo style post but with video instead.

Basically what we’ll be doing is going and separating these posts from each other so that while they all display on the front page they will all be formatted differently. So the first step is to create as many new sections as you want to have different kinds of posts.

Here are the settings I use for every new section i create. In this case the section is for my “URL” posts.

With your settings like this, when you post to the URL section it will be displayed on the front page, it will be syndicated (included in your feed) and will be included in your site search. Do this for all your newly created sections.

Create any custom fields you might need

This isn’t necessary but it’s helpful. If you go to Admin > Preferences > Advanced you can add in some custom forms which will appear under your Advanced Options when you write a new post. I created two custom forms: URL and Conversation Src.

Now when I find a link I want I just put the URL in the custom field, write in a title (this will be used as my link text), write my comment in the text area, select “URL” from the section dropdown and hit Publish. Example:

Of course, the above example to display a URL can be accomplished many other ways, but that’s the way I’ve decided to do it to keep uniformity in styling.

The Conversation Src custom field is used when I post a conversation snippet. It’s where I put the place the conversation took place, whether that be an IRC chatroom, an IM chat or my own family. The code I use to display a conversation then, is as follows:

<txp:if_article_section name="conversation">
<a title="permalink" href="<txp:permlink />"><img src="http://openswitch.org/images/link.gif" class="permalink" alt="Permalink"/></a>
<div class="conversation">
<span class="source"><txp:custom_field name="Conversation Src" /></span>
<txp:body /></div>
</txp:if_article_section>

Modify your default form

As far as I can tell, the default form is what is used on your default page when <txp:article /> is called. The simplest way I’ve found to accomplish a tumblog is to just write in a bunch of conditional statements to the default form.

For example, the code I use to display my URLs is this:

<txp:if_article_section name="url">
<div class="URL">
<a href="<txp:custom_field name="URL" />"><txp:title /></a><txp:body /></div>
</txp:if_article_section>

The thing is, you’ll notice that for my URLs I’m not providing any form of a permalink. I’m just giving you the <txp:body />. But for some posts I want to provide an individual permalink. This is the case with my “thought” posts. And here’s the code I use for it:

<txp:if_article_section name="thought">
<a title="permalink" href="<txp:permlink />"><img src="http://openswitch.org/images/link.gif" class="permalink" alt="Permalink"/></a>
<div class="thought">
<span>Thought:</span>
<txp:body /></div>
</txp:if_article_section>

There are a couple differences but the one you need to see is the anchor to the permalink. The permalink, however, isn’t always visible but only appears when you hover over a post. This is accomplished by some simple CSS:

.post img.permalink {
    border-width: 0px;
    width: 6px;
    height: 9px;
    position: relative;
    float: right;
    top: 5px;
    right: 0px;
    display: none;
}
div.post:hover img.permalink {
     display: block;
}

So basically all I did was created an entire default form to include every section that a post could be put into. This makes for bloated code, but it works. Again, if you know of a simpler way (as I’m sure many of you do) then please take the time to share.

Code for regular posts

Now, if all you want is a tumblog without any “regular” posts like this one then you can stop here and with a little styling have a tumbling blog.

But, if you want to have regular posts included in your tumblog then there’s a bit more you can do. First go get the rss_auto_excerpt plugin and install it. Then, for your regular posts here’s the code you put in the default form:

<txp:if_article_section name="journal">
<h3><a href="<txp:permlink />" title="permalink"><txp:title /></a></h3>
<txp:if_article_list>
<txp:rss_auto_excerpt words="100" />
<txp:else />
<txp:body />
</txp:if_article_list>
<div class="post_bottom">
<span><txp:comments_invite /></span>
</div>
</txp:if_article_section>

Using the rss_auto_excerpt is important for a tumblog because you don’t want to display your whole long post on the front page, you just want a snippet to keep in style with the short-ness of the tumblog format.

Group your posts by day

In a typical tumblog each entry doesn’t have attached to it its own posted date. Instead, entries are group together under one date header. You can see that on this site by the use of a horizontal graphic and the date underneath it. Accomplishing this was easy enough with the help of some of the folks on the Textpattern support forum. I added this snippet to the top of the default form:

<txp:if_different><div class="posted"><txp:posted /></div></txp:if_different>

For teaching purposes, my default form is listed below. Note how it’s just a bunch of conditional statements.

<txp:if_different><div class="posted"><txp:posted /></div></txp:if_different>
<div class="post">
<!-- **************** JOURNAL ***************** -->
<txp:if_article_section name="journal">
<h3><a href="<txp:permlink />" title="permalink"><txp:title /></a></h3>
<txp:if_article_list>
<txp:rss_auto_excerpt paragraphs="1" />
<txp:else />
<txp:body />
</txp:if_article_list>
<div class="post_bottom">
<span><txp:comments_invite /></span>
</div>
</txp:if_article_section>
<!-- **************** URL ***************** -->
<txp:if_article_section name="url">
<div class="URL">
<a href="<txp:custom_field name="Post URL" />"><txp:title /></a><txp:body /></div>
</txp:if_article_section>
<!-- **************** CONVERSATION ***************** -->
<txp:if_article_section name="conversation">
<a title="permalink" href="<txp:permlink />"><img src="http://openswitch.org/images/link.gif" class="permalink" alt="Permalink"/></a>
<div class="conversation">
<span class="source"><txp:custom_field name="Conversation Src" /></span>
<txp:body /></div>
</txp:if_article_section>
<!-- **************** THOUGHT ***************** -->
<txp:if_article_section name="thought">
<a title="permalink" href="<txp:permlink />"><img src="http://openswitch.org/images/link.gif" class="permalink" alt="Permalink"/></a>
<div class="thought">
<span>Thought:</span>
<txp:body />
</div>
</txp:if_article_section>
<!-- **************** PHOTO ***************** -->
<txp:if_article_section name="photo">
<a title="permalink" href="<txp:permlink />"><img src="http://openswitch.org/images/link.gif" class="permalink" alt="Permalink"/></a>
<div class="photo">
<txp:article_image />
<txp:body />
</div>
</txp:if_article_section>
<!-- **************** QUOTE ***************** -->
<txp:if_article_section name="quote">
<a title="permalink" href="<txp:permlink />"><img src="http://openswitch.org/images/link.gif" class="permalink" alt="Permalink"/></a>
<div class="quote">
<txp:body />
</div>
</txp:if_article_section>
<!-- **************** VIDEO ***************** -->
<txp:if_article_section name="video">
<a title="permalink" href="<txp:permlink />"><img src="http://openswitch.org/images/link.gif" class="permalink" alt="Permalink"/></a>
<txp:body />
</txp:if_article_section>
</div>

Note also that in each conditional segment I’ve wrapped the <txp:body /> tag in a different div class so I could style each kind of entry differently with ease.

Questions?

I understand that this can be complex if you’re not familiar with Textpattern. I also understand that sometimes I can be unclear with my instructions. If anything needs further description or fleshing out please do let me know in the comments below.