WPWall: Image based WP Reader

screenshotSo I’ve been playing around with the WordPress REST API for a while.  It’s pretty cool.  There is a lot of stuff you can do without actually having to authenticate using OAuth.  And having stuff like Intensedebate for comments, Gravatar for identity stuff, things are percolating for an epic platform approach (outside of FB).  And with the integration of the publishing platform, content sharing becomes really powerful.  Checkout the developer API spec page here: REST API Spec.

Anyway – So I cooked up an idea to have an imaged based reader of sorts.  Given that I didn’t need to manage any complicated OAuth process with back-end php/perl (storing stuff in mysql), this seemed like a cool way to build a quick & simple toy in just a few hours.   Pure HTML w/ a dose of jQuery.

WordPress.com already features a reader (see that here).  And the WordPress Reader is a much easier way for you to follow blogs.  And Freshly Pressed (located here), is a great way to see stuff new and significant.

But my script (I’m calling it WPWall – because it gives you just a wall of images) is a little different for the following reasons:

  • It will show you a condensed view of posts at a specific blog or group of blogs you specify (i.e. pandodaily.com or gigaom (or both, plust more)).
  • It relies on the “Featured Image” pic assigned to a post as a basis of presentation.  Many posts won’t have this assigned.  If not, you just see a pic of the author (served via Gravatar).  Many blogs do assign a featured image post tho, so that’s nice.
  • It doesn’t have any state concept built in.  It doesn’t know you, and it doesn’t know what blogs you follow (remember no OAuth integration).  You just simply give it a list of WordPress blog URLs (separated by commas).  WPWall then fetches the posts from those blogs using jQuery (like the top 16 or 19 or something like that).  Then using Masonry, you get a wall of photos arranged by size. Hats off to the jQuery Masonry plugin, a very cool script built by David DeSandro, a Twitter dev in NY,  that greatly helps display random-sized things together.  See  jquery masonry here.  I’m using a fraction of the power available here – I’m actually just using the default configs.
  • Which hints at the next thing I was trying to accomplish.  Rather than just list posts in chronological order – I wanted to show the posts as pictures with different sizes: the more likes the bigger.  So the images are sized based on how popular they are – like a link cloud!!! Since “likes” are also provided through the REST API for a post ID, that provided inspiration.  But this presented the unique presentation challenge that masonry solved (at least good enough for me).
  • I’m a horrible designer; and barely a sufficient hack 😉

This is a very quick hack (took just a couple of hours).  None of the license stuff is on it, but it’s GPL 2 or later, and all content and images and other bits (jquery, masonry (MIT license)) all belong to their respective owners.  Get the code here.  You can probably run this from your local hard drive – it just needs a spot that can be accessed by your browser.  Pretty cool.

See my little Sunday project here (it loads pandodaily, techcrunch and gigaom by default; change to other blogs w/ the button at the bottom).

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s