Making your own ‘imgur roulette’

What’s imgur.com? You’ve been living under a rock, huh? It’s a very simple image sharing service originally designed by a reddit user to support the community and provide a painless way to quickly host images. Now it’s a behemoth that just acquired $40million in funding and has a userbase that is arguably larger than reddits!

So what’s imgur roulette? Well, it’s the idea of pulling random images from the site and seeing what is there. Imgur uses a fixed (though randomized) string method for content IDs, so generating random ones is easy. Note: they started off with 5 character IDs and have now moved on to 7. I do see SOME 6 character IDs, but mostly either 5 or 7.

There are plenty of simple little sites out there that do this, and it is in no way a new idea. But, I was bored and wanted to make my own… and in the process, I accidentally learned a few things I thought I’d share.

Sources of theft

As is typical when I want to quickly do something like this, I google for some code snippets so I’m not re-inventing the wheel. Plus, seeing how others will tackle the problem can really help me force my brain to think differently.

I started off knowing that I wanted to easily create an image grid without much work on my part, so I grabbed the freewall jquery plugin to handle this. A few lines of example code later and we are up and running.

I also wanted to be able to have the lightbox effect for showing the images, but I didn’t want to deal with a whole plugin for such basic functionality. For this one, I stole Jim’s code from a blog article he wrote a few years ago. With one exception, it still worked nicely!

Lessons learned

The biggest thing I’ve learned is how annoying it can be to try to detect issues when doing ajax calls with javascript. As expected, when you are randomly generating content IDs and looking for them, you are going to encounter a lot of 404s. In a perfect world, you would check the http status code as you were fetching it, and then try again if it’s not a 200. However when you are dealing with javascript, you don’t have this luxury.

See, javascript is not handling the status codes or redirects, the browser is. And unfortunately, there’s no clear cut way for capturing this.. there are a few workarounds I can think of for this use case, the most reasonable one being to check the image size (either bytecount OR height/width) to compare against the known imgur 404 image and then generate a new ID. But, I won’t be doing that today.

Another issue that I ran into was Chrome refusing to lightbox the image with a console error of “Resource interpreted as Image but transferred with MIME type text/html. This one through me for a loop, but luckily I found a good workaround – just add a question mark to the end of the image string (you can see this in action in the code below).

Room for improvement

This is almost a note to future-me that is bored and wants to take a swing at something easy. To make this even better, I would do the following:

  • Do proper ajax routines with fail/success methods to create new content id’s if the 404 image is found
  • While doing size check routines, pass that info to freewall so that it can make dynamic tile sizes that match the image instead of stretched squares
  • Play around with imgur’s api

Gimme the damn code

Note: you will need to download freewall.js for this to work, the rest is all CDN hosted or inline.

</pre>
<style type="text/css"><!--
	.free-wall {
		margin: 15px;
	}

	#lightbox {
		position:fixed;
		top:0;
		left:0;
		width:100%;
		height:100%;
		background-color: rgba(0,0,0,0.8);
		text-align:center;
	}

	#lightbox p {
		text-align:right;
		color:#fff;
		margin-right:20px;
		font-size:12px;
	}

	#lightbox img {
		box-shadow:0 0 25px #111;
		-webkit-box-shadow:0 0 25px #111;
		-moz-box-shadow:0 0 25px #111;
		max-width:90%;
		max-height:90%;
	}
--></style>
<pre>

</pre>
<div class="header">
<div class="free-wall" id="freewall"></div>
<script type="text/javascript">// <![CDATA[
var imgur = "http://i.imgur.com/";
var myIDs = new Array();
var html = "";
var maxImages = "20";

// Used to build out the html - fully formed like:
//

<div class='cell' style='width:200px; height: 200px;'><a href='http://i.imgur.com/abc12.jpg?' class='lightbox_trigger'><img src='http://i.imgur.com/abc12.jpg?' height=200 width=200></a></div>

var imgPre = "

<div class='cell' style='width:200px; height: 200px;'><a href='"; var imgMid = ".jpg?' class='lightbox_trigger'><img src='"; var imgPost =  ".jpg?' height=200 width=200></a></div>

";

function makeID() {
	var text = "";
	var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

	for( var i=0; i < 5; i++ )
		text += possible.charAt(Math.floor(Math.random() * possible.length));

	return text;
}

for ( var i=0; i < maxImages ; i++ ) { 	var myImgur = imgur + makeID(); 	html += imgPre + myImgur + imgMid + myImgur + imgPost; } $("#freewall").html(html); var wall = new freewall("#freewall"); wall.reset({ 	selector: '.cell', 	animate: true, 	cellW: 20, 	cellH: 200, 	onResize: function() { 		wall.fitWidth(); 	} }); wall.fitWidth(); // for scroll bar appear; $(window).trigger("resize"); jQuery(document).ready(function($) { 	$('.lightbox_trigger').click(function(e) { 		e.preventDefault();           		var image_href = $(this).attr("href");           		if ($('#lightbox').length > 0) {
			$('#content').html('<img src="' + image_href + '" />');
			$('#lightbox').show();
		} else { 

			var lightbox = 
				'

<div id="lightbox">' +
				'

Click to close

' +
				'

<div id="content">' + 
				'<img src="' + image_href +'" />' +
				'</div>

' +    
				'</div>

';

			$('body').append(lightbox);

			$('#lightbox').click(function() { 
				$('#lightbox').hide();
			});
		}
	});
});
// ]]></script></div>
<pre>

Leave a Reply

Your email address will not be published. Required fields are marked *