tumblr avatar img resize (solved) need help with calls to load additional comments

Question

Hello,

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 16x16 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?

--Solved

Now I realize I didn't account for calls to reload the page for additional comments. Example on this page http://nutnics.tumblr.com/post/1256847757

The avatars that come after that are not effected by the initial javascript. The code that loads the comments is not editable, I can load the code in here but it very bloated stuff. For sanity's sake I can post it verbatim on my own site here: http://nutnics.com/tumblr/morenotes.html

Any ideas?

Answer 1

When you use the RegExp constructor you have to leave the / delimiters off, and you have to pass the g flag as a separate argument:

var re = new RegExp('_16\\.png', 'g');

You should also escape the . with a backslash because it has a special meaning in a regex. And, because it's in a string literal, you have to escape the backslash. But it's much easier to use a regex literal:

var newValue = value.replace( /_16\.png/g, '_64.png' );  

Answer 2

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');
    })
});

Answer 3

Like Allan said you're going to want to use /_16\.png/g as your regex, but your code looks like you're writing the regex into the document(?), what you should be doing is something like:

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

Which will change the size of your img elements to 64px!

Also, I'm a big fan of the new stuff in ES5 (the latest version of JavaScript) because it feels a lot more JavaScripty so you could also do this:

var els = document.getElementsByTagName('img');
els.forEach(function (el) {
    el.src = el.src.replace(/_16\.png/g, '_64.png');
});

forEach is included in most modern browsers but you can add it to those that don't like so:

if (!(typeof Array.prototype.forEach === 'function')) {
    Array.prototype.forEach = function (fn) {
        for (var i = 0, l = this.length; i < l; i += 1) {
            fn(this[i]);
        }
    };
}

Enjoy!