Building a better permlink

— Topic: cms

The Problem

If you use any type of blogging software, or at least read blogs regularly, you no doubt have seen various links on people's sites that say Permlink or Permanent link to this post. When I first started reading web design blogs, I was puzzled by why a page would have a link to itself. After awhile, I realized this was so that people could link back to the page. Funny, that's what I thought the address bar is for! I digress, back to the point.

My blogging platform of choice, Textpattern has its own syntax for handling things. These tags closely resemble XML, but are simplified handlers for PHP conditional logic. A typical way to link from a page to an article looks like this:

<txp:permlink><txp:title /></txp:permlink>

<!-- That in turn, outputs this… -->

<a href="https://example.com/blog/post/" title="Permanent link to this article">Title of Blog Post</a>

This is all well and good I suppose, except it doesn't really tell the user anything about the particular link. So I'm permanently linking to an article, great. Imagine trying to navigate a page as a blind user, having the title attribute read aloud to you. You would hear the same thing, repeatedly.

I bet this would get really old, especially if the permlink was affixed to an image. If this were the case, there would be no distinguishable way to tell what the link pertained to. Case in point, the featured sites gallery on Godbit. With the default permlink, all the tool-tips would have looked like this…

bad tooltip

The Solution

That isn't really helpful, so I decided to make a better permlink. If you're following along at home, don't worry because this doesn't involve any hacking of TXP whatsoever. Using the same tools we've been provided, we are going to make a highly accessible permlink replacement. In your code, use this…

<a href="<txp:permlink />" title="<txp:title />"><txp:article_image /></a>

Note the self-closing slash in permlink? If you use it this way, you will get a raw URL output, instead of one that is hyperlinked. This code yields the following result when outputted by Textpattern…

<a href="https://example.com/blog/post/" title="Title of Blog Post"
	><img src="/assets/images/pic.jpg" alt=""
/></a>

Notice that empty alt attribute? That's not exactly the best blind user-friendly way to use it. Yet, that's the Textpattern default for article-image output. With the default permlink, your user would be in a hurt of trouble with only "Permanent link…" repeated countless times. The monotony would be unbearable. Our new permlink is more helpful, giving the article title instead…

good tooltip

So, there you have it, a quick and painless way to make your site all the more navigable. It hardly takes any time to impliment, and will make the world of a difference to those with accessibility impairments. Incidentally, you can also use <txp:permlink /> to make easy one-click bookmarks. My Del.icio.us, Digg, and Newsvine links at the bottom of every blog post use this method.

Note: If you are a WordPress user, the syntax is: <?php the_permalink(); ?>

Me, elsewhere