The m is for maus~. I do what I please. About m~, The Archives and the Lifestream RSS

Story of the Wall, a flickr favorites plugin

The short story of a wordpress plugin that displays your latest favorite photos from flickr and gives credit to their authors.

First of all, due credit

Go here to see all the photos, authors and dates (thanks, BTW). Then come back. I’ll wait for you.

Onto the plugin

The idea is simple: have a background of different photos you like. Like a wall. Hence, the name. Get it? Get it? Not funny.

The concept is also simple:

  1. get the photos and put them in a container;
  2. at runtime (the server processing is as close as it gets to actual programming style runtime);
  3. behind the content of the site;
  4. fixed, so you don’t get scrollbars;
  5. choose the size of the wall and of individual photos;
  6. as a plugin with the appropriate options;
  7. also, display the flickr favorite photos wall separately with the titles and some meta data.

See? Simple as pie. If I had added another item to the list, then it would have been complicated. Oh, wait: get the photos from a repository you don’t setup or manage yourself. So, maybe, it’s not that simple.

The setup

The repository was actually a no breainer. Who keeps photos you can mark as favorite? Hey, I have a flickr account (actually, I have a Yahoo! account, but that’s besides the point). That took care of where to put them and how to select the favoritest (not a word, I know).

To get them:

  • fetch the favorites RSS,
  • parse it with PHP (either classic simplexml_load_string or SimplePie),
  • do some string manipulation (since flickr isn’t kind enough to give you the width, height and URL of the static photo in separate elements, you get them from the item’s description. Stupid.)

To put them behind the content of the site,

  • first you need a container that is separate from all the other containers, directly into the body element. Easiest way to do it is add_action('wp_footer', 'display_mFlickrFavoritesWall').
  • then style said container with position: fixed; left: 0; top: 0; and a nice small z-index: -1000.

To list them in nice equal columns

  • calculate required name of columns. Something like $this->cols = ceil($this->maxWidth / $this->sizes[$this->imageSize]); will do just fine. Which means you need $this->cols lists. Unordered lists.
  • use the total width of the columns — it’s the numer of columns multiplied by the width of an image — to style the container, otherwise the last list will drop below the rest when the container’s width becomes bigger than the body‘s.
  • float the lists left and don’t forget to use overflow: hidden on the container.
  • run through the XML to place the images in lists, each time when you reach the maximum height starting a new one, until you’re finished with the columns.

The credit page

Since the plugin has a handy shortcode, make a new template (say… template-wall.php) in which you put mflickrfavoriteswall detailed=1 in nice shortcode brackets.

That’s it. You’re done. Serve chilled.