A site I’m currently working has had boring and barren error pages. Until now!

I wanted some images from failblog.org to liven things up a bit. In a quick 20 minute hack, I took the site’s rss feed, parsed it for the right content using Yahoo Pipes, exported as JSON-P, pulled that in with jQuery, and displayed a random image.

Here’s the pipe I’m using:

The trick to pulling in Yahoo Pipe data via JSON-P is by adding a “_callback” argument, defining the callback function name.

The script:

1
2
3
4
5
6
7
8
9

jQuery.getJSON('http://pipes.yahoo.com/pipes/pipe.run?_id=0vxHL0Lo3RGc2uL8pQt1Yg&_render=json&_callback=FailImages&callback=?');

function FailImages(data){
  var imgs = data.value.items;
  if (imgs){
    var url = imgs[Math.floor(Math.random()*imgs.length)].url;
    jQuery('< img src="'+url+'">').insertAfter('h1');
  }
}

The result:

And of course.. Demo page