Javascript hack to improve Tumblr's lame byline options for group blogs

tumblr-better-author-bios.md

Tumblr's group blog features do not support per-author homepage links (such as Twitter) or bios. That sucks.

I've written here a Javascript function that kinda outputs something like what you may want. It maintains all the author data inside Javascript as well, for better or for worse. Eventually I'll make this pull from tags I guess.

Put this toward the top of your theme HTML, inside the script tag:

            var AUTHORS = {
                'caropopco': {
                    name: 'Carolina',
                    avatar: '',
                    bio: 'Carolina Leon is an intern at POP.co.',
                    link: ''
                },
                'tomfrompop': {
                    name: 'Thomas Lackner',
                    avatar: '',
                    bio: 'Thomas Lackner is a Miami native, Node.js enthusiast, and cofounder/CTO of POP.co. He is also a pile of black clothes with eyes.',
                    link: 'http://twitter.com/tlack'
                }
            }
            function outputAuthorBioBlock(username) {
                var html = [];
                if (username in AUTHORS) {
                    var u = AUTHORS[username];
                    html.push("<div class=author-bio>")
                    if (u.avatar) 
                        html.push("<span class=author-avatar><img src="+u.avatar+"/></span>")
                    if (u.link) 
                        html.push("<a class=author-link href="+u.link+">")
                    if (u.name) 
                        html.push("<span class=author-by>Written by <span class=author-name>"+u.name+"</span></span>")
                    if (u.link) 
                        html.push("</a>")
                    if (u.bio)
                        html.push("<span class=author-bio>"+u.bio+"</span>")
                    html.push("</div>")
                }
                if (typeof console != 'undefined')
                    console.log('outputAuthorBioBlock', html)
                document.write(html.join(""));
            }

Then, inside your PermalinkPage block:

           {block:PermalinkPage}
          <div id="footer-byline">
              <!-- BYLINE for author bios -->
              <script>
              var pan = '{PostAuthorName}';
              outputAuthorBioBlock(pan);
              </script>
          </div>
          <!-- social stuff, other stuff here.. -->
          {/block}

Need help? Got feedback? Want support? Reach me at @tlack on Twitter