Add thumbs to StatCounter with GreaseMonkey

Nimai · October 10, 2007

*** Update code August 13, 2008 thanks to JFriend ***

Here's a GreaseMonkey script that will add thumbnails to the detail pages of StatCounter, for you StatCounter hawks.

Makes it look like this, so you won't have to click to see what's being looked at! :thumb

Here's the code, or install straight from my scripts on userscripts.org

// ==UserScript==
// @namespace     http://nimai.smugmug.com/statcounterthumbs
// @name          StatCounter SmugMug Thumbs
// @description   Adds thumbnails to the detailed view of StatCounter
// @include       http://*.statcounter.com/project/standard/*
// ==/UserScript==


// Update on Aug 11, 200 by John Friend
// Modified script so it works with any domain, including custom domains
// Added support for image Keys so it works with new galleries that required image Keys
// Added support for a number of addition URL formats that didn't previously work
// Added a thumbnail display for URLs that only have a gallery ID and key in them (and made them left aligned to distinguish them)
// Removed support for URLs that do not have an imageKey in them (they would only work on old galleries anyway)
// Added support for date query URLs that have an imageID and imageKey
// Combined popular, date and keyword regEx into one common expression



//--------------------------------------------------------------------------------
function getElementsByClass(searchClass,node,tag) {
  var classElements = new Array();
  if (node == null)
    node = document;
  if (tag == null)
    tag = '*';
  var els = node.getElementsByTagName(tag);
  var elsLen = els.length;
  var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
  for (i = 0, j = 0; i < elsLen; i++) {
    if (pattern.test(els[i].className) ) {
      classElements[j] = els[i];
      j++;
    }
  }
  return classElements;
}


//--------------------------------------------------------------------------------
var imgRegExp = new RegExp('(^[^/]+/)(?:gallery/[0-9]+_[0-9a-zA-Z]+(?:#|/[0-9]+/)([0-9]+_[0-9a-zA-Z]+)|(?:popular|date|keyword)/.*(?:#|/)([0-9]+_[0-9a-zA-Z]+)(?:(?:/|\-)[A-Za-z\-]+)*$)');
var galleryRegExp = new RegExp('(^[^/]+/)(?:gallery(/[0-9]+_[0-9a-zA-Z]+)(?:$|#P[\-0-9]+$))');

var cells = getElementsByClass( 'tableContent1Left|tableContent2Left' );
for( i=2; i<cells.length; i+=3 ) {
   var links = cells[i].getElementsByTagName('a');
   var link = links?((links.length>1)?links[1]:links[0]):null;
   if( link ) {
      var imgID = imgRegExp.exec( link.textContent );
      if (!imgID) {
          imgID = galleryRegExp.exec( link.textContent );
      }
      if( imgID ) {
         var host = imgID[1];
         // get the first match from the array that isn't null
         var ID = imgID[2]?imgID[2]:imgID[3];
         var ID = ID?ID:imgID[4];
         if (ID) {
           host = imgID[1];
           var thumb = document.createElement('img');
           // if ID starts with a / char, then it's a gallery ID
           if (ID.substr(0,1) == "/") {
               ID = ID.substr(1);                // remove leading slash
               var splitStr = ID.split("_");     // split id and key apart
               thumb.setAttribute( 'src', 'http://' + host + 'photos/random.mg?AlbumID=' + splitStr[0] + '&Size=Tiny&AlbumKey=' + splitStr[1] + '&rand=1');
               thumb.setAttribute( 'align', 'left' );
           } else {
               thumb.setAttribute( 'src', 'http://'+host+'photos/'+ID+'-Ti.jpg');
               thumb.setAttribute( 'align', 'right' );
           }
           thumb.setAttribute( 'border', '0' );
           thumb.setAttribute( 'alt', '' );
           var img = cells[i].getElementsByTagName('img');
           if( img && img[0] ) cells[i].removeChild( img[0] );
           cells[i].appendChild( thumb );
        }
      }
   }
}

// sub-expressions
// 342986767_gsLLX                                    [0-9]+_[0-9a-zA-Z]+                                                   // image ID and key
// 342986767_gsLLX at end                             ([0-9]+_[0-9a-zA-Z]+)$                                                // image ID and key at end of the URL
// http://jfriend.smugmug.com/                        ^http://[^/]+/                                                        // http://domain
// jfriend.smugmug.com/                               ^[^/]+/                                                               // domain
// gallery/5589651_rU4bA                              gallery/[0-9]+_[0-9a-zA-Z]+                                           // gallery number
// gallery/5589651_rU4bA/1/342986767_gsLLX            or
// gallery/5589651_rU4bA/3/342986476_YYeu6/Medium     or
// gallery/5589651_rU4bA#342971777_3GE8Q              or
// gallery/5589651_rU4bA#342992308_jm3Wg-A-LB         or
// gallery/879690_N8UHS/2/66770280_dRonw#P-2-25       gallery/[0-9]+_[0-9a-zA-Z]+(?:#|/[0-9]+/)([0-9]+_[0-9a-zA-Z]+)        // gallery/gallery_number imageID_imageKey
// gallery/5589651_rU4bA#P-4-12                       gallery(/[0-9]+_[0-9a-zA-Z]+)#P[\-0-9]+$                              // just a gallery ID with gallery Key, we include leading slash on matched result so we can tell it's a gallery ID in the code
// gallery/5589651_rU4bA                              gallery(/[0-9]+_[0-9a-zA-Z]+)$

// Way to get random thumb for a gallery: http://jfriend.smugmug.com/photos/random.mg?AlbumID=5646334&Size=Tiny&AlbumKey=jFXoe&rand=1267


//Supported URL types:
// http://jfriend.smugmug.com/gallery/5589651_rU4bA/3/342986476_YYeu6/Medium
// http://jfriend.smugmug.com/gallery/5589651_rU4bA#342971777_3GE8Q
// http://jfriend.smugmug.com/gallery/5589651_rU4bA/1/342986767_gsLLX
// http://jfriend.smugmug.com/gallery/5589651_rU4bA#342992308_jm3Wg-A-LB
// http://jfriend.smugmug.com/gallery/879690_N8UHS/2/66770280_dRonw#P-2-25
// http://jfriend.smugmug.com/popular/#66768822_mLumi
// http://jfriend.smugmug.com/popular/1/66770280_dRonw#39934670_buaG8
// http://jfriend.smugmug.com/popular/8/66769006_dcwFT
// http://jfriend.smugmug.com/popular/1/66770280_dRonw/Large
// http://jfriend.smugmug.com/popular/#66769006_dcwFT-XL-LB
// http://www.moonriverphotography.com/date/2008-01-1/2008-12-1#245318676_gd5X5
// http://www.moonriverphotography.com/date/2008-01-1/2008-12-1#300157250_XXXTa-A-LB
// http://www.moonriverphotography.com/keyword/fine+art#342192111_dsYBa
// http://www.moonriverphotography.com/keyword/fine+art#2332717_QgjEK-A-LB
// http://jfriend.smugmug.com/gallery/5589651_rU4bA#P-4-12
 

// URL types that can't work except on old galleries because there's no image key
// http://jfriend.smugmug.com/gallery/5575096_C3nQ5#342362737
// http://jfriend.smugmug.com/popular/#66768822
 


// URL types that can't work because there's no imageID
// http://jfriend.smugmug.com/gallery/5589651_rU4bA/1
// http://jfriend.smugmug.com/gallery/5571152_5ARMa#P-6-12
// http://jfriend.smugmug.com/gallery/5589651_rU4bA
// http://jfriend.smugmug.com/Kenya
// http://jfriend.smugmug.com
// http://jfriend.smugmug.com/popular/#P-6-12
// http://www.moonriverphotography.com/keyword/fine+art#P-2-25
//

I haven't tried this with anyone else's StatCounter and SmugMug accounts, so if you do use it and find any problems, or just want to give it a thumbs-up, please respond to this thread.
Enjoy!

ivar · October 10, 2007

Very cool, works fine

I just changed the include link to work for my pages.

Any chance you can get it to work with the links to the singleImage style and keywords as well?

Allen · October 10, 2007

ivar wrote:

Very cool, works fine I just changed the include link to work for my pages.

Ok, where's this include link and how do we apply it?:D

Wow! That's realy neat Nimai. Thanks.

Nimai · October 10, 2007

You shouldn't need to change anything. I tried to avoid any specific reference to my SmugMug account in the script, except for the namespace, which I think is only used for unique-ification of scripts.
Glad to see there's some interest in this!

I'll reply here when I get popular and keyword links working too.

Nimai · October 10, 2007

Some RegExp tweaks, and now it should work for popular and keyword hits too.

Code has been updated in the initial post. Thanks for the suggestion!

ivar · October 10, 2007

Nimai wrote:

You shouldn't need to change anything. I tried to avoid any specific reference to my SmugMug account in the script, except for the namespace, which I think is only used for unique-ification of scripts.
Glad to see there's some interest in this!

I had to change the include from http://*.statcounter.com/project/standard/magnify.php?* to http://*.statcounter.com/project/standard/* to work. I don't have the magnify in my url? It may be because I have multiple projects set up?

ivar · October 10, 2007

Nimai wrote:

Some RegExp tweaks, and now it should work for popular and keyword hits too.

Code has been updated in the initial post. Thanks for the suggestion!

popular

keywords :cry

Nimai · October 10, 2007

ivar wrote:

popular
keywords :cry

Haha- nice.

Well, I went ahead just now and changed the @include to take out the magnify. As for the keywords... Mine are showing up like this:

keyword/2007-cheerleading-hcms/1/200166550/Medium

I see your's are showing up with a # before the image id.

keyword/naples#109172182

I tried to make the RegExp accomodating of both, but I didn't have a #-style page to test against... I'll keep you posted.

Nimai · October 10, 2007

ivar - could you try the code that's up there now? There was about a 60 second window when I first updated the code, then immediately found I needed to change something, and updated it again hoping maybe no one noticed.

Maybe you got it in that time!
I just tried the script with a URL from your gallery, and I got a thumb, so I'm hoping it works now.

ivar · October 10, 2007

Nimai wrote:

but I didn't have a #-style page to test against...

You should now

ivar · October 10, 2007

Nimai wrote:

ivar - could you try the code that's up there now? There was about a 60 second window when I first updated the code, then immediately found I needed to change something, and updated it again hoping maybe no one noticed. Maybe you got it in that time!
I just tried the script with a URL from your gallery, and I got a thumb, so I'm hoping it works now.

Nice work!

Allen · October 10, 2007

Guessing links in before adding js wil not have thumbs.
Waiting is hard.:D

And just updated to latest js.

Allen · October 10, 2007

Nope, none showing Ivar. Must be something I'm not doing.

ivar · October 10, 2007

Allen wrote:

Guessing links in before adding js wil not have thumbs.
Waiting is hard.:D

And just updated to latest js.

Greasemonkey

Allen · October 10, 2007

ivar wrote:

Greasemonkey

Guess I don't understand any of this, gota install it huh?

Edit: installed and enabled, now what? wait?

ivar · October 10, 2007

Allen wrote:

Guess I don't understand any of this, gota install it huh?

Yep, install it, it's a firefox addon.

It lives in tools menu.
Add a new script, use the above code

Allen · October 10, 2007

ivar wrote:

Yep, install it, it's a firefox addon.

It lives in tools menu.
Add a new script, use the above code

Oh! I put that in my js, not right? Need to add new GM user script?
Not sure how to do that.

ivar · October 10, 2007

Allen wrote:

Oh! I put that in my js, not right?

right, not right

Allen wrote:

Need to add new GM user script? Not sure how to do that.

In Firefox, Tools>Greasemonkey>New user script

The first time you may need to associate GM with a texteditor. Use notepad (windows) or texteditor (mac) or similar. It will automatically ask for this if I remember correctly.

Allen · October 10, 2007

ivar wrote:

right, not right

In Firefox, Tools>Greasemonkey>New user script

The first time you may need to associate GM with a texteditor. Use notepad (windows) or texteditor (mac) or similar. It will automatically ask for this if I remember correctly.

" associate GM with a texteditor" lost me

I assume I go to the statcounter page and pick "new user script" so it's
assocaited with that page or site? The magnifiy page or summary page?

The popup box has name, namespace, desc, includes (has SC site address) and exclude. Where's script go?

ivar · October 10, 2007

Allen wrote:

I assume I go to the statcounter page and pick "new user script" so it's assocaited with that page or site? The magnifiy page or summary page?

Nope, not needed, the idea is that it will only work for the pages that you specify under 'include'

Allen wrote:

The popup box has name, namespace, desc, includes (has SC site address) and exclude. Where's script go?

first enter all that stuff.

If you don't get a texteditor popping up, go to tools>greasmonkey>manage user scripts>edit

Allen · October 10, 2007

ivar wrote:

Nope, not needed, the idea is that it will only work for the pages that you specify under 'include'

first enter all that stuff.

If you don't get a texteditor popping up, go to tools>greasmonkey>manage user scripts>edit

Ok, saved text file and filled in info. Linked saved file in popup. What pages do I include? Recent Visitor Activity page? Shows in manage window now.

ivar · October 10, 2007

Allen wrote:

Ok, saved text file and filled in info. Linked saved file in popup. What pages do I include? Recent Visitor Activity page? Shows in manage window now.

This should be the include page:
http://*.statcounter.com/project/standard/*

Allen · October 10, 2007

ivar wrote:

This should be the include page:
http://*.statcounter.com/project/standard/*

Now if can't find the page.

Do I need this maybe?

http://*my3.statcounter.com/project/*

what's in there now but no thumbs
http://*my3.statcounter.com/project/standard/*

Nimai · October 10, 2007

Allen wrote:

Now if can't find the page. Do I need this maybe?

http://*my3.statcounter.com/project/*

what's in there now but no thumbs
http://*my3.statcounter.com/project/standard/*

The include line determines when the script will be run. If the URL page just loaded matches the include, GreaseMonkey will run the script. The * are wild. So, http://*.statcounter.com/project/standard/* should work. What's your stat counter URL look like when you're looking at the details.

Allen · October 10, 2007

Nimai wrote:

The include line determines when the script will be run. If the URL page just loaded matches the include, GreaseMonkey will run the script. The * are wild. So, http://*.statcounter.com/project/standard/* should work. What's your stat counter URL look like when you're looking at the details.

I now have the one you entered above.

http://*.statcounter.com/project/standard/*

Realized the wild * and took out the my3 or whatever it change too.

But still not working. What is the namespace?

Nimai · October 10, 2007

Allen wrote:

I now have the one you entered above.

http://*.statcounter.com/project/standard/*

Realized the wild * and took out the my3 or whatever it change too.

But still not working. What is the namespace?

The namespace is simply to uniquely identify a script. No one should use namespaces that they don't own, so this should make the script namespace unique.

Maybe there's more here that might help?

Allen · October 10, 2007

Nimai wrote:

The namespace is simply to uniquely identify a script. No one should use namespaces that they don't own, so this should make the script namespace unique.

Maybe there's more here that might help?

Oops, should of changed this to me, right?

// @namespace http://nimai.smugmug.com/statcounterthumbs

How do I remove what I have and start over? I created a new one but the
text file popup didn't show.

javier.rinaldi · October 10, 2007

No joy for me either.

ivar · October 10, 2007

Try this:

In firefox go to Tools > Greasemonkey > Manage User Scripts
Select the script and hit 'edit'.

In the window that will open, make sure that the code is exactly as in Nimai's first post, no changes. Save it.

Check to make sure that the include is correctly set up.

That should do it.

Allen · October 10, 2007

ivar wrote:

Try this:

In firefox go to Tools > Greasemonkey > Manage User Scripts
Select the script and hit 'edit'.

In the window that will open, make sure that the code is exactly as in Nimai's first post, no changes. Save it.

Check to make sure that the include is correctly set up.

That should do it.

I get no window opening after clicking edit.

devbobo · October 10, 2007

Very cool Nimai

clap

Add thumbs to StatCounter with GreaseMonkey

Comments