Greasemonkey script to view images inline on the SDMB

Below is a Greasmonkey script (that can run in Firefox, and Chrome AFAIK) that enables you to view images inline in the posts in which they appear

The code:


// ==UserScript==
// @name           SDMB inline images
// @namespace      Polerius
// @description    SDMB inline images
// @include        http://boards.straightdope.com/sdmb/*
// ==/UserScript==

(function() 
 {
     var allPosts    = document.getElementsByClassName('alt1');

     for (var i = 0; i < allPosts.length; i++)
     {
	 allPosts*.innerHTML = allPosts*.innerHTML.replace(/<a href=\"(http:\/\/[^\"]+)\.(jpg|JPG|png|PNG|gif|GIF)\" target=\"_blank\">([^<]+)<\/a>/g, "<a href=\"$1.$2\"  target=\"_blank\">$3</a><img src=\"$1.$2\">");
     }

 })();

You can try it out onthis thread

Enjoy!

Oh, awesome! Except, I don’t know how to install it? How does that work? I do have greasemonkey and use the other SDMB script, just not sure how to install code like that.

Yay, it worked!

Renee, are you using Firefox? This is how I did it; I have no idea if there’s supposed to be an easier way. I hope so.

Go into Tools/Greasemonkey/New User Script and then fill in the Name, Namespace, Description, and *Includes *fields with exactly what is in the code box in Polerius’ OP for those fields.

Click OK, it will ask you to locate your fave text editor (notepad for you?) and you locate it. It opens up a page for you. Then, from the code box in the OP again, copy everything from (function() to the end of the code box and paste it in the bottom of your new page. Save, and viola!.

OMG, it worked! Thank you both!

Glad you like it.

Another thread with images: kittens!. ETA: It turns out you can see those images even without this script because they are enabled in that forum

Since the above wasn’t a good example, here’s another thread with lots of cats

Are you bucking for a promotion here, or what?

Sweet, I may give this a try. I seem to recall some earlier SDMB Greasemonkey stuff from years ago; I wonder if it’s collected anywhere.

Nope. That’s it. The easier way is actually put it into a file.

Well, unless you consider pasting it in Notepad, saving it as sdmbimg.user.js, and then dragging that file into your browser to be easier.

(BTW, that’s how you do it in Chrome.)

Polerius, great idea!

Well…

I’m using Firefox but you lost me at Tools/ Greasemonkey…

When I click Tools, I get a drop down menu but Greasemonkey is not there. Is there an additional step. (Or am I looking at the wrong Tools?)

Did you install the Greasemonkey extension? You can get it here.

Well, I just showed how thick I can be. Thanks Panurge.

And it works. Thanks all.

Works great.

Is there a way to automaticaly downscale images? I usually browse zoomed in since I’m sitting in a recliner a good two metres away from the monitor and all those pictures in the cat thread end up being scrollbar-inducingly huge. Is there a way to, say, fix them to a proportion of the screen or automatically downsize images to like 800x600?

Thanks,
Andy

The problem is making sure you don’t also upscale images that are smaller than that. But Poleris has out JavaScripted me before, so I wouldn’t be surprised if he thought of something.

A quick and dirty way to it is to replace the string


<img src=\"$1.$2\">"

in the code in the OP to something like


<img src=\"$1.$2\" height=\"600px\">"

which makes all images be 600 pixels tall. To do anything more intelligent (to make sure you don’t unnecessarily blow up images that are already small) would be more involved.

Am I a dork for being excited about trying this when I get home? Polerius, wasn’t it you who made the Greasemonkey script to help identify zombies? That one has been rocking my face pretty hard. If it wasn’t you, thanks still for this one, and thanks again to the person who created it!

In case you have a browser that doesn’t support Greasemonkey scripts, or you have an iPhone/iPad, you can get the same effect by adding the following bookmarklet to your browser


javascript:var allPosts=document.getElementsByClassName('alt1');for (var i = 0; i < allPosts.length; i++){allPosts*.innerHTML = allPosts*.innerHTML.replace(/<a href=\"(http:\/\/[^\"]+)\.(jpg|JPG|png|PNG|gif|GIF)\" target=\"_blank\">([^<]+)<\/a>/g, "<a href=\"$1.$2\" target=\"_blank\">$3</a><img src=\"$1.$2\">");}; void 0;


To add it: Just visit any website with your browser and bookmark it. Then, edit the bookmark and rename it to something like “See images” and edit the ‘location’ or ‘URL’ property of the bookmark and paste the code from above.

To use it: Visit any SDMB thread with images (likethis one) and when it finishes loading, simply click the bookmark you made above. Voila! You should now see images embedded in the thread.

I just tried this on my iPhone, and the result is very cool. No need to click on all the individual images to see what they are and then come back to the thread.

Yep.

ETA: “Yep” was for the second question, not for the “Am I a dork for being excited about trying this when I get home?” :slight_smile:

Thanks!
Glad that people are enjoying these.