Ransomizr grabs the last bunch of single-letter images from the One Letter Pool on Flickr, arranges them into an array, and waits for you to type something in the entry blank. The result looks just like an old-school ransom note, and may be copied and pasted from here into the page of your choice.
Welcome, Delicious People!
We made the popular/fun list at del.icio.us on October 6th; thanks for all your support! If you like fun with Flickr, you might also want to check out Flickrball.
Things to Do and Notice
Patience, young Skywalker. If you don't see your font, it's loading. If it looks like it's taking forever, something may be busted. Keep an eye out for JavaScript errors; if you see one that says result.photos is null or not an object, please reload the page.
To change your note, type something else. Ransomizr is checking the input blank every half-second, and will update on the fly. No submit button needed!
Re-size your message with Font Size. (Right, the smaller sizes look pretty crappy ... but I figured it'd be worth including.)
Sorry, only the letters A through Z will show. Upper and lower case doesn't matter.
Don't like the letters? Erase and re-type a letter, re-size, or hit space at the end of the input box.
Happy? To save your note for later use, triple-click inside the Your Code box, copy, and paste it into the site of your choice.
There's a "get this" link at the end of that copy-and-paste code. Yeah, it's ugly; feel free to remove it. It would be great if you could leave it (or something with the same destination) somewhere near the note, so your customers could come back here and make their own notes.
If you do post your note elsewhere, please do not remove the links back to the authors' Flickr pages. That's Conspicuously Uncool.
Take a moment to get a Flickr account and upload some fresh letters to the One Letter Pool, which rocks.
Once you've got your letters, arranging them neatly into a rectangle is easy. Create a div, class its width to be the number of letters you want times the width of one letter (25, 50, or 75), and drop all the letters in. A 3x3 example is running on the blog post.
Yep, that's a blink tag up there. Wanna make something of it?
Have fun, and please let me know how it goes. Thanks!
Curious?
Sure, you can check out how I did it. If you're into this sort of thing, poke around on the right side of this page, under Research and Development.
View the JavaScript Source
var KENTBREW = window.KENTBREW || {};
KENTBREW.ransomizr = function() {
var alpha = 'abcdefghijklmnopqrstuvwxyz';
return {
letters : {},
init : function() {
for (var i = 0; i < alpha.length; i++) {
var char = alpha.substr(i, 1);
KENTBREW.ransomizr.letters[char] = [];
}
this.api_key = '9eeae89334837e6cbe93764dea787932';
KENTBREW.ransomizr.lastNote = '';
this.getFont();
},
makeNote : function() {
var input = document.getElementById('inputNote');
var note = input.value;
if (note != KENTBREW.ransomizr.lastNote) {
KENTBREW.ransomizr.lastNote = note;
KENTBREW.ransomizr.fontSize = document.getElementById('selectFontSize').value;
var div = document.getElementById('divCode');
div.style.display = '';
var pre = document.getElementsByTagName('PRE')[0];
pre.innerHTML = '';
var div = document.getElementById('divNote');
div.innerHTML = '';
if (note.length) {
for (var i = 0; i < note.length; i++) {
var char = note.substr(i, 1).toLowerCase();
var a = document.createElement('A');
var img = document.createElement('IMG');
img.height = KENTBREW.ransomizr.fontSize;
img.width = KENTBREW.ransomizr.fontSize;
img.style.border = 'none';
if (KENTBREW.ransomizr.letters[char]) {
var n = KENTBREW.ransomizr.letters[char].length;
if (n) {
var r = Math.floor(Math.random() * n);
img.src = KENTBREW.ransomizr.letters[char][r].url;
img.title = char;
a.href = KENTBREW.ransomizr.letters[char][r].page;
a.target = '_blank';
pre.appendChild(document.createTextNode('<a href="' + KENTBREW.ransomizr.letters[char][r].page + '"><img src="' + img.src + '" height="' + KENTBREW.ransomizr.fontSize + '" width="' + KENTBREW.ransomizr.fontSize + '" title="' + img.title + '" border="0" /></a>'));
}
} else {
img.src = 'http://l.yimg.com/us.yimg.com/i/spacer.gif';
img.title = ' ';
pre.appendChild(document.createTextNode('<img src="' + img.src + '" height="' + KENTBREW.ransomizr.fontSize + '" width="' + KENTBREW.ransomizr.fontSize + '" title="' + img.title + '" /> '));
}
a.appendChild(img);
div.appendChild(a);
}
pre.appendChild(document.createTextNode('<br /><a href="http://kentbrewster.com/ransomizr/?m=' + escape(note) + '">ransomizr</a>'));
} else {
pre.appendChild(document.createTextNode('Type something!'));
}
}
},
getFont : function(letter, number) {
var callback = 'KENTBREW.ransomizr.ping';
KENTBREW.ransomizr.ping = function(result) {
KENTBREW.ransomizr.getPix(result);
};
var url = 'https://api.flickr.com/services/rest/?method=flickr.photos.search&per_page=500&group_id=27034531%40N00&extras=tags&api_key=' + KENTBREW.ransomizr.api_key + '&format=json&jsoncallback=' + callback;
var s = document.createElement('script');
s.type ='text/javascript';
s.src = url;
document.getElementsByTagName('head')[0].appendChild(s);
},
getPix : function(result) {
if (result.photos) {
var n = result.photos.photo.length;
for (var i = 0; i < n; i++) {
pic = result.photos.photo[i];
tags = pic.tags.split(' ');
for (var j = 0; j < tags.length; j++) {
var char = '';
// check for single-letter tag
if (tags[j].length == 1) {
if (alpha.match(tags[j])) { char = tags[j].toLowerCase(); }
}
// sometimes the tag is "aa" instead of "a"
if (tags[j].length == 2 && (tags[j].substr(0, 1) == tags[j].substr(1, 1))) {
char = tags[j].substr(0, 1).toLowerCase();
}
if (char) {
var url = 'http://farm' + pic.farm + '.static.flickr.com/' + pic.server + '/' + pic.id + '_' + pic.secret + '_s.jpg';
var page = '';
if (pic.owner) {
page = 'http://flickr.com/photos/' + pic.owner + '/' + pic.id + '/';
}
if (KENTBREW.ransomizr.letters[char]) {
var k = KENTBREW.ransomizr.letters[char].length;
KENTBREW.ransomizr.letters[char][k] = {};
KENTBREW.ransomizr.letters[char][k].url = url;
KENTBREW.ransomizr.letters[char][k].page = page;
}
}
}
}
}
document.getElementById('divNote').innerHTML = '';
document.getElementById('divCode').style.display = 'block';
document.getElementById('selectFontSize').onchange = function() {
KENTBREW.ransomizr.lastNote = '';
}
setInterval(KENTBREW.ransomizr.makeNote, 500);
}
}
}();
window.onload = function() {
KENTBREW.ransomizr.init();
}
Right, seems to be fixed. I needed to be watching for two-letter tags, like "aa" and "ii", which make sense because tagging a picture with "a" or "i" would be confusing. The JavaScript source has been updated; look for the changes in the getPix function.
Heh. Looks like the API isn't returning a single instance of a photo tagged with "A" in the last 500 uploads. Need to re-rig to accept "aa", which I'm seeing a lot.
btw, i converted it into a widget.
hope you don't mind.
http://msafiullah.blogspot.com/ransomizr.html