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!
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.