Using JavaScript To Display Real Names On Your Group Tumblr

A little while ago, Albert McMurry of American Drink asked me if I would alter their Tumblr theme so that it would show the authors’ actual names, rather than their Tumblr usernames.

Since others might want to do the same thing or something similar, I thought I’d go ahead and put together a little how-to.

Cutting to the chase

First, I’ll give the quick and dirty instructions with code to cut and paste, then I’ll go into detail about what’s going on. I’m assuming you know how to access and modify your custom theme.

Step one: Add the following code just before the </head> tag in your theme (modifying the username to real name mappings, of course):


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function() {

    var realNames = {
        "insooutso": "James Thornburg",
        "sloganeerist": "JT Dobbs",
        "incorrigiblerobot": "John Moltz",
        "irreverend": "Kim Lisagor",
        "seoulbrother": "Albert McMurry",
    "yournewfavorite": "Katie Spence",
    "jimray": "Jim Ray",
    "sasquatchmedia": "Doreen Marchionni",
    "yowhatsthehaps": "Sarah Robinson"

    };

    $("span.author-name").each(
    function(){
        var name=realNames[$(this).text()];
        if (name != null)
        {
        $(this).text(name);
        }
    }
    ); 
});

</script>

Step two: Wrap each {PostAuthorName} tag in your theme with a span with the class “author-name”, like so:

<span class="author-name">{PostAuthorName}</span>

What that was all about, HTML first

First, we load jQuery, a JavaScript library that makes life easier (and also happened to already be used on American Drink):

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

Then we provide some JavaScript inline, surrounded by script tags:

<script type="text/javascript">

// our JavaScript goes here

</script>

Step two speaks for itself.

Then JavaScript

If you don’t care about programming, bear with me. The following may seem like arcane runes to you, but you need to at least pay attention to what I say about var realNames.

Our JavaScript starts with something that may seem strange if you haven’t used jQuery:

$(document).ready(function() {

The $() function is the workhorse of jQuery. In this instance it’s assigning an anonymous function to be run when the page is finished loading and the DOM is in place. The rest of our inline script is the body of that anonymous function.

    var realNames = {
        "insooutso": "James Thornburg",
        "sloganeerist": "JT Dobbs",
        "incorrigiblerobot": "John Moltz",
        "irreverend": "Kim Lisagor",
        "seoulbrother": "Albert McMurry",
    "yournewfavorite": "Katie Spence",
    "jimray": "Jim Ray",
    "sasquatchmedia": "Doreen Marchionni",
    "yowhatsthehaps": "Sarah Robinson"

    };

The hash realNames is where we map usernames to real names. The var keyword gives the hash function level scope, which means it only exists when this function is fired and therefore it won’t cause any strangeness if there happens to be another realNames variable in the global scope.

Non-programmers: You should be fine updating this variable as long as you model each of your username to real name mappings after the examples above. Only add and remove lines of the form "username" : "Real Name",. Leave the surrounding punctuation alone.

    $("span.author-name").each(
     // function snipped
    );

Here’s jQuery’s $() again, this time creating an array containing every span in the document that has its class set to “author-name”, each of which we know from Step Two above, contains {PostAuthorName}. It contains that in the theme, but after the page has been delivered to the browser, it contains the actual Tumblr username of the post’s author.

It then applies the each() function to the array, which calls an anonymous function passed to it once for each item in the array as if it were a method of the item.

    function(){
        var name=realNames[$(this).text()];
        if (name != null)
        {
        $(this).text(name);
        }
    }

Here’s $() again, this time being used to get the text value of this, which is the span element that has been pass by each() to this function. In this case, it’ll be a Tumblr username, which is then used as a key to try to fetch a value from the realNames hash.

If there is such a value, we have a real name and $() is used one last time to replace the span’s text with it. Otherwise the username is left unchanged. This keeps any added group blog members from showing up as “null” before you’ve had a chance to modify the theme.

Conclusion

Seems like there’s always a conclusion after that much text, but really all I can say is I hope you find this useful.

If you have questions and/or corrections, please leave them in the comments.

Edit: Thanks to Eric, who pointed out in a comment that the hash keys should be quoted in case Tumblr usernames allow characters that are invalid in JavaScript variable names. I’ve edited the article accordingly (as well as American Drink’s theme :-)).