Post-Theory

In Part 1, I discussed an approach to handling Tumblr Theme Variables that do not have corresponding {block:Foobar} Variables to wrap code to only render when the variable {Foobar} exists.

I used the {PlayCount} variable (rendered in Audio and Video blocks) as my example. In the end, I came up with the following solution:

<script>
    if ( "{PlayCount}" ) {
        document.write("<span>played {PlayCount} times!</span>");
    }
</script>

… which works fine (in this case), even though it is an ugly solution.

But Sometimes Things are More Complicated

Now I would like to talk about the {LinkURL} variable, which is rendered inside of Photo posts. This is the so-called “Click-through URL” for a Photo.

Now, Tumblr has the absolute strangest feature for this variable:  a corresponding {LinkOpenTag} and {LinkCloseTag}, which renders an HTML anchor tag  (<a href=”…… “>) for the {LinkURL} only if it exists.

Well, that might be fine for some people. But what if I want to modify that <a> tag? Add a class name to it? A title attribute? Etc.

Basically - I find {LinkOpenTag} and {LinkCloseTag} completely bizarre and completely out of place with the rest of the Tumblr Theme Template system.

And again - we have the same problem: There is no {block:LinkURL} variable to tell you when {LinkURL} exists.

Trying to Solve the Same Problem the Same Way

So, of course I tried to use the same approach as before:

<script>
   if ( "{LinkURL}" ) {
      document.write('<a class="foo" href="{LinkURL}"> .. </a>');
   }
</script>

And yes, this probably works 99% of the time.

But I don’t really trust a URL can be inserted directly into a Javascript chunk in this way. A URL could possibly break the Javascript String in this example, if it has not been escaped properly.

Does Tumblr escape the {LinkURL} properly? I don’t know — but seeing how many other things they manage to mess up, I’m just going to guess and say No, just to be on the safe side. Maybe it’s escaped fine for HTML, but not JavaScript. Who knows.

So…Tumblr’s Variable Transformations to the Rescue!

Wait - again you ask? I thought you dismissed that in Part 1.

I did dismiss it.

I showed how {JSPlayCount} does not do what the Tumblr Documentation says it should - namely return a Javascript-safe string representation of {PlayCount} wrapped in quotes. [verbatim from the documention]

Instead it renders nothing, and not wrapped in quotes. Fine.

But it Gets Weirder.

But I really want to make sure my {LinkURL} is safe to include in my script.

So I tried playing around with {JSLinkURL}. Now, I figured it would behave like {PlayCount} — namely that if it didn’t exist, then {JSLinkURL} should render nothing.

So I had a stroke of genius:

<script>
    if ( [ {JSLinkURL} ].length) {
        document.write('.....');
    }
</script>

Notice the brackets create a list. Now, an empty list [] is a valid JavaScript expression, so if {JSLinkURL} does not render anything at all, this yields:

if ( [ ].length ) { .... }

Which is valid Javascript, and will return False, if {LinkURL} does not exist.

Problem Solved — Right?

Oh, wrong, wrong again.

I thought it was working.

And then I came upon some curious posts, which for some reason or other, have no {LinkURL}but where {JSLinkURL} actually does render an empty JavaScript string “” !

But then again, it is Tumblr. Sometimes it works, sometimes it doesn’t.

In these weird cases, where there really is no LinkURL, but {JSLinkURL} renders an empty string, you end up with this:

if ( [ '' ].length ) { ... }

Which unfortunately, returns True in Javascript.   @#$!

So, revising the code a little:

if ( [ {JSLinkUrl} ].length && [ {JSLinkUrl} ][0] ) {
    ....
}

This works in both cases. If {JSLinkUrl} renders nothing, it yields:

if ( [].length && [][0] )  { ... }

Which is fine because JavaScript has short-circuit evaluation with the && operator.

If {JSLinkURL} renders an empty string, it yields:

if ( [ '' ].length && [ '' ][0] )   { ... }

Which is also fine, because although [ ” ].length is True,  [ ” ][0] is False in Javascript, since ” evaluates to False.

Putting it all Together:

<script>
    if ( [ {JSLinkUrl} ].length && [ {JSLinkUrl} ][0] ) {
        document.write('<a class="foo" title="bar" href="' + 
                        encodeURI( {JSLinkUrl} ) + '"> ... </a>');
    }
</script>

Edit 2/24/2012:

Using what I uncovered in Part 3, I now recommend wrapping {JSLinkURL} with encodeURI because this variable is not properly escaped / URL encoded!

This is a fairly robust way to emulate a {block:LinkURL}, while ensuring that:

1. The JavaScript raises no errors
2. The LinkURL you insert is safe to insert directly into the JavaScript code.

It’s ugly. It’s a hack. But it works.

Sometimes it seems like Tumblr actually had developers in mind when they created their Theme Template system.

Other times  — well, a lot of things are simply a f**ing cludge.

Let me give you an example I recently encountered, and how I solved it (in an awful, hacky way.)

For some theme Variables, Tumblr was nice enough to include a {block:Foobar} variable to let you know whether or not some piece of data {Foobar} exists or not.

eg, The Post Title: {Title} and the corresponding {block:Title}:

Anything wrapped with {block:Title} … {/block:Title} is only rendered IF {Title} exists.

That’s super nice. I like that.

And it sure would be nice if a bunch of over Variables also had those “if this exists” wrapper blocks.

Here’s the specific case I’m talking about. I was working on the HTML to render Video posts. One of the neato variables in the Video block is {PlayCount}.

OK, cool. I would like my theme to show how many plays a video got.

So, I very naively wrote something like this:

<span>played {PlayCount} times!</span>

And no matter how many times I played that damn video, {PlayCount} never rendered anything.

Well, it turns out that {PlayCount} only exists if a video was uploaded to Tumblr, not if you embed a video from say YouTube.

OK, fair enough Tumblr - I understand you can’t count the number of plays of an embedded video.

But then, you should at least let us know that you can’t tell us the {PlayCount}, with a nice {block:HasPlayCount} or something. Otherwise my theme / blog looks stupid.

Steps Toward a (hacky) Solution:

1. Let’s try some Javascript.

   Also, I happen to know that Tumblr is so cool, that it has variable transformations.

   So I know that I can “Prefix any theme variable with JS to output a Javascript string (wrapped in quotes)“  [straight from the docs]

   Oh, cool. So, if {PlayCount} doesn’t exist, then {JSPlayCount} should yield an empty Javascript string: ””   Right?
   

   <script>
        if ({JSPlayCount}) {
             document.write(“<span>played {PlayCount} times!</span>”);
        }
   </script>

   There we go! Perfect!

2. Wrong.

   It turns out that if a Variable like {PlayCount} doesn’t exist, then {JSPlayCount} doesn’t exist either - at all. And no, it does not get wrapped in quotes. You do not get an empty string. You get nothing.

   So you get a Javascript error with the statement:

   if ()

   …because you need something inside that if() statement.

3. OK, fine. I know {PlayCount} should be a number, so it’s probably safe NOT to use the JS Variable Transform:

   <script>
        if (“{PlayCount}”) {
             document.write(“<span>played {PlayCount} times!</span>”);
        }
   </script>

   And that works just fine. It’s ugly, but it works, and does not generate Javascript errors.

But wait, There’s More!

    … continued in Part 2!

So, in writing my theme, I wanted a way to put a “Reblog” and “Like” link on each post on the main page of the blog without users having to “click-through” to the “/post” page, and use Tumblr’s silly <iframe> in the upper right corner.

Well. I investigated the contents of that <iframe> on the Post page, and found it was pretty simple, as long as you had a little value called “rk=xxxxxxxx” (or the “reblog key”)

<iframe src=”http://assets.tumblr.com/iframe.html?10&src=http%3A%2F%2Fblog.post-theory.com%2Fpost%2F18132446503l&amp;pid=18132446503&amp;rk=xA660hqO&amp;lang=en_US …

Naturally, this value is not included in the {Posts} blocks by Tumblr’s theme template engine.

Easy, I thought: I’ll just secretly load the “Post” page for each post in the background with an AJAX call, and steal the “rk=xxxxxxx” value from the src attribute of the <iframe> !

Well, that was working just fine! Super-duper!

And then I read that there is an undocumented Theme operator: {ReblogURL}

Seriously? Undocumented features!  Super cool!  Lame.  C’mon Tumblr. Really? Features should be documented. How long would it take you to just fix your documentation?

{ReblogURL} looks something like this:

http://www.tumblr.com/reblog/18132446503/xA660hqO

Where the big integer is the PostID, and those 8 alpha-num characters at the end are the same as that elusive “rk=xxxxxxxx” reblog key.

Oh well, so much for all my cool background AJAX calls :P