Adding a Ravelry Gallery Widget

I added a small Ravelry gallery widget to the right side of my blog. The code provided on Ravelry's API site seems lacking, so I had to write something of my own. I figure this is a common enough usage that others can benefit from it too. My widget displays 16 of the most recently finished projects that have a picture. Copy and paste the following into a Javascript widget, and replace COUNT and YOUR_RAVELRY_URL with what you want. <div id="rav_projects"></div> <style type="text/css"> .rav_project { float: left; padding-right:5px; } </style> <script type="text/javascript"> function drawRavelry(json) { var projects = json.projects; projects.sort(function(a, b) { return (b.thumbnail ? Date.parse(b.completed) : 0) - (a.thumbnail ? Date.parse(a.completed) : 0); }); var html = []; for (var i = 0; i < COUNT && i < projects.length; i++) { var proj = projects[i]; html.push('<div class="rav_project"><a href="' + proj.url + '"><img src="' + proj.thumbnail.src + '"/></a></div>' ); } document.getElementById('rav_projects').innerHTML = html.join(''); } </script> <script type="text/javascript" src="YOUR_RAVELRY_URL&status=finished&notes=false&callback=drawRavelry"></script>

Change COUNT to the # of items you want to display, and substitute YOUR_RAVELRY_URL with the special URL that Ravelry generates for you, which you can get here. Copy and paste the Personalized URL on that page (which looks something like http://api.ravelry.com/projects/username/progress.json?key=5ca09d97cbb02b57f942d392adb00518252318bc) into YOUR_RAVELRY_URL.