A few weeks back, a colleague sent around a message with the subject line of “So do you like awesome plugins?” referring to an app called PicLens by Cooliris that transforms website images into a 3D wall. I skipped over it. I’m not morally against awesome plugins, but I already have enough problems with my open browsers leaking memory and crashing to desktop to want to throw some other junk on top of at my work machine. And 3D in the browser still reminds me of terrible virtual reality tech of the 90s like VRML. But then folks kept bringing up PicLens – my officemate kept talking about how amazingly fast it was, and when I would go to talk with fellow employees at their desks I would notice the little PicLens icon in the upper right corner of their browser. Eventually I installed it and found that:

  1. It is bafflingly fast
  2. It becomes great way to view sites with big photo galleries
  3. It doesn’t work on ¾ of the sites I want to use it on

The reason behind number 3 is that PicLens relies on a technology called Media RSS, an open standard originally created by Yahoo!. It’s a simple and effective way of delivering image, video and audio content with descriptive text and small thumbnail versions to applications or readers that know what to do with it. Several large media sites like Google Image Search and Flickr already employ Media RSS, and therefore work automatically with PicLens. But, up until now, developers who wanted to deliver Media RSS had to construct their own feed in order to enable PicLens on their site.

Recently, however, the company Cooliris changed the name of their product from PicLens to Cooliris (another chance for me to use the adjective “bafflingly”), and at the same time added a “Quick and Simple” method for site developers to interactively create a Media RSS through the Cooliris site.

That’s great, but as a user I still have to rely on other sites to get up to speed before I can use Pic… uhhh, Cooliris, on their site. So here’s a hack utilizing Yahoo! Pipes that lets you enable Cooliris on just about any site, after the jump.

There are two components to the hack. The first part is a web page to point your browser (and Cooliris) at. Cooliris is happy to get Media RSS from external domains so the simplest way is to create a shell page that points to the Media RSS you want to display. Here’s a stripped down bit of HTML and Javascript to do it — just cut and paste that into a local HTML file and run in it your browser.

You’ll notice that the code doesn’t do much beyond creating a pop-up with the URL of the site you want to view embedded in a Yahoo Pipes link. The pop-up + document.write trickery is necessary in this case – Cooliris looks at the original source of the page before any Javascript is run, so you can’t replace or add the Media RSS link on the client side.

<html>
<head>
    <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js"></script>
</head>
<body>
      <script>
      function update()
      {
          siteUrl = escape($("#url").val());
          pipeUrl = "http://pipes.yahoo.com/pipes/pipe.run?Url=" + siteUrl + "&_id=c0f9152cd7abc988cf87994d904fb20f&_render=rss";
          picWin = window.open("", "pic","height=500,width=400,left=100,top=100,resizable=yes,scrollbars=yes,toolbar=yes,status=yes,menubar=yes");
        // must break up scr ipt
        picWin.document.write('<html><head>');
        picWin.document.write('<scri' + 'pt type="text/javascript" src="http://lite.piclens.com/current/piclens.js"/>');
        picWin.document.write('<link id="photos" rel="alternate" href="' + pipeUrl + '" type="application/rss+xml" title="PicLens RSS" />');
        picWin.document.write('</head><body>Click Cooliris button</body></html>');
        picWin.document.close();
    }
      </script>
      <form>
          Url to view:<input type="text" name="url" id="url"/>
          <input type="button" onClick="update();" value="Update"/>
       </form>
</body>
</html>

Now, for the second part of the hack – the pipes link. The pipe essentially hits the requested URL and does regular expression parsing to find images it suspects are thumbnails for larger linked images. It’s pretty basic logic – thumbnails are images inside of <a> tags, and the high resolution image is the link itself. The pipe aggregates the ones it finds and then outputs them with Media RSS namespace attributes. The final bit of the pipes link specifies that the output renderer for pipes should be an RSS feed.

There you have it — a way to make Cooliris work on just about any web site you want. How well does it work? It really depends on the site. Pages with basic image galleries respond pretty well, while blogs that have thumbnails that point to HTML pages rather than full-size images will have plenty of broken links. Photo sets pointing at image hosts fail pretty severely, and the pipe doesn’t try to provide gallery sets that allow the “infinite wall” functionality available on some sites. But the beauty of using Yahoo Pipes is that anyone can clone the pipeI created, improve the regular expressions, and swap out a single variable in the Javascript in the HTML to suit their own needs. So feel free to tinker.

And finally, here’s the lazy version — just type in the url you want to view and see how it works (remember, you must have Cooliris installed for your browser):

URL to view: