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:
- get the photos and put them in a container;
- at runtime (the server processing is as close as it gets to actual programming style runtime);
- behind the content of the site;
- fixed, so you don’t get scrollbars;
- choose the size of the wall and of individual photos;
- as a plugin with the appropriate options;
- 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 repository was actually a no breainer. Who keeps photos you can mark as favorite? flickr.com. 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
bodyelement. Easiest way to do it is
- then style said container with
position: fixed; left: 0; top: 0;and a nice small
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->colslists. 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
leftand don’t forget to use
overflow: hiddenon 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.
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.