Post-Theory

I added a few new updates / features to my Basic Tumblr Tag Cloud:

• Added the ability to change the “case” of your tags to Lower-case, Upper-case, and Title-case for display purposes.

• Improved the default “Alphabetical” sorting code to better handle non-English Latin-script languages.

• Added “language” option to specify a language “locale”, which can improve Alphabetical sorting and Case transforming on Tags for many languages, including non-Latin-script languages.

These additions (and some other new neato new things) will also be added to the “Pretty” Tag Cloud in the next few days.

Also, I can always use more feedback from people. Please?

I’m putting up a beta preview of my new Pretty Tag Cloud maker for Tumblr.

Design your own Pretty Tag Cloud: choose your fonts, colors, etc.

Then Save it, share a link, embed it on your Tumblr Theme or in a Tumblr Post.

w00t !

Part 3 in my series on “Tumblr Theme Limitations”

AKA, Why Tumblr’s Theme Template System is Incredibly Lame,
and Hacks You Can Use to Get Around Its Limitations & Lameness

Introduction

In my previous Article, I pondered whether or not URL’s supplied by Tumblr’s Theme Templater were in general safe to include directly in JavaScript strings: i.e., that they had at least been properly Escaped for inclusion inside a Double (or single) quoted String.

I decided that, No: Tumblr is lame. So I should not assume that:

1. URL’s have been properly escaped for inclusion in Strings
   
   
2. URL’s have been properly URL Encoded to replace URL-unsafe characters

But at least there is the {JS…} Variable Transform, which does seem to function properly — so far as I can tell. And it’s useful too — we’ll get to that more in this article.

The Question

This led me to wonder if in general, URL’s supplied by Tumblr’s Theme Templater were even safe to include directly in your HTML — e.g.

<a href="{SomeURLVariable}"> ... 

The Question: Answered

The Answer is NO: You cannot assume that Every URL that Tumblr passes you is Safe to include in your HTML.

Case Study: {LinkURL}

{LinkURL} is the “Click-through Link” rendered in Photo Posts. I also discussed this very same variable last time

Let us suppose that somebody enters a rather naughty “Click-through” URL:

http: //naughty.urls/break” onclick=”javascript: alert(‘Tumblr is lame!’); return false;

Now, you being the good Theme Developer you are, write your Theme Code like this:

<a href="{LinkURL}"><img .... ></a>

Looks fine, right? Wrong. This is what actually gets rendered on the page:

<a href=”http://naughty.urls/break” onclick=”javascript: alert(‘Tumblr is lame’)”><img …. ></a>

Well - you can guess what happens when someone clicks that Image!

Go see for yourself on this page. Really, go try it. There are two examples. One contains a “naughty” URL, and the other a “nice” URL which just happens to include a “ character in it.

The (hacky) JavaScript Solution

Since I’ve already established that the {JS…} Variable Transformation seems to function properly, I’m going to solve this problem with some hacky JavaScript. Once again.

For the sake of brevity, let’s just assume that {LinkURL} exists — I already showed you how to handle those cases when it does not.

And here’s the basic code:

{block:Photo}
    <script>
        document.write('<a href="' + encodeURI( {JSLinkURL} ) + '">');
    </script>
    <img src="{PhotoURL-500}">
    </a>
    ...
{/block:Photo}

Wrapping {JSLinkURL} with the encodeURI JavaScript function makes sure that the link is actually safe to include inside the href=”…”.

You can see now, on this new page, the results.  The “naughty” URL no longer does anything bad, and the “nice” URL works properly.

If {LinkURL} is broken, then what else is Broken?

Honestly, I don’t know yet. I haven’t tried to test every single type of {URL} Variable on Tumblr’s Theme Templater.

Here are things I know think are OK:

1. In {block:ContentSource} Blocks, the {SourceURL} seems to be OK.

2. URLs to pages in your own blog [eg, {Permalink} ] all seem to be OK.

Things I have observed to be broken in the same way as {LinkURL}:

1. Links to a User’s own “Pages”:

   Inside the {block:HasPages} and then {block:Pages}, the {URL} variable is not properly escaped / URL encoded

   What could happen is a user sets up one of their pages with a URL like:

   htp://my-blog.tumblr.com/”About Me”

   That will break, if you try to include the {URL} directly in your HTML.

As I find more bugs, I will update this post to let you know!