Question

I’m relatively hopeless with JavaScript writing, and I’m trying to resize the default tumblr avatar image on a notes page. Currently there is no way to include a large avatar in your notes, so I’m trying to use a basic regular expression to replace the dynamically generated URL.

A user’s avatar is generated into something like this on all notes:

"http://28.media.tumblr.com/avatar_1d3b686efcf0_16.png"

…which are 16×16 pixel reductions of a main avatar. But the system has up to 128px .pngs that can be displayed. I want to write some JavaScript that looks for every _16.png and changes it to _64.png.

Here is my crappy script

var value = "_16.png";   
var newValue = value.replace( new RegExp( "/_16.png/g"), "_64.png" );  
document.write( newValue );

Here’s the page to see the results:

http://nutnics.tumblr.com/post/1311264016

Does anybody know if tumblr is overriding this script? or if I’m writing it wrong?

Answer 1

This script if put at the end of the document does the trick :

var elements = document.getElementsByTagName('img');
for(i=0;i<elements.length;i++){
    elements[i].src = elements[i].src.replace(/_16\.png/g, '_64.png');
}

If you can include jQuery then this is a better option :

$(document).ready(function(){      
    $('img.avatar').attr("src", function(){
        return this.src.replace(/_16\.png/g, '_64.png');
    })
});