WP Flickr Background in Alpha testing

on January 20, 2010 in WordPress with 8 comments by

If you’re new to this website, you probably haven’t noticed. But the background you’re seeing is actually something new. And random. And streamed from Flickr. It’s a new plugin that I am developing for WordPress called ‘WP Flickr Background’.

A little over two weeks ago I changed my theme to Motion by 85ideas, and was intrigued by its effective use of transparencies and the background. And since I quickly get bored looking at the same thing, I thought ‘Why not make this background random’? Flickr provides millions of photos, many of them under a Creative Commons Attribution License, and this would be an excellent source for those random backgrounds. So I started coding…

Interestingly, it wasn’t as straight forward as one would expect. After all, you could simply use a dynamically generated CSS style sheet with a ‘background’ element pointing to a random Flickr photo. Right?

But small photos cascade and your website will look like a bad 1995 rendition of your first HTML page. And the large photos may be SO large, you end up staring at just a grain of sand instead of a beach.

CSS3, the brand-spanking new version of CSS style sheets, supports stretching of background images. Unfortunately, not a single browser I have tried supports it. So I reverted to good-old image hacking, basically injecting the background in a negative Z-indexed <div> block at a fixed position.

Yes, that last sentence is a great conversation breaker. But trust me, it is the injection portion that’s trickiest. For one, I do not like it when plugins require me to manually modify files, let alone modify files in the first place. So I assume there are other people out there who think alike. So how can I change a WordPress theme without actually modifying its files? Enter Javascript, jQuery to be specific, and we are on our way to great trickery!

So in the end, WP Flickr Background will use Javascript to add a new background image overlaid by the actual (original) contents. And it works! At least, it does so with Opera 10, Firefox 3, Google Chrome 3, MSIE 8 and Safari 4. Hence I am now putting the plugin through a public Alpha test, waiting for complaints to roll in: “Your website looks weird” and “I’m getting Javascript errors” are some of the things I am expecting to see during testing, but hopefully there will be none! You will let me know, right?

If I am satisfied that there are no major issues with the plugin, then I will make it available for download. In meantime, I will be re-arranging a few things on the website once again to make room for the new plugin and a few others I am thinking about writing. So please excuse construction going on in the next few days!


  1. Anonymous
    posted on Feb 14, 2010 at 11:59 AM  |  reply

    hey i just downloaded motion theme but it doesnt look like that i like this theme can u please help me to make 1 like that please thanks…

    • posted on Feb 14, 2010 at 3:50 PM  |  reply

      The “Motion” theme by 85ideas is definitely what I am using. The difference is the use of my very own “WP Flickr Background” plugin, which not only changes the background randomly, but also permits you to make some minor CSS tweaks. The tweaks I have made to accommodate the changing backgrounds is to give the blog text its own background (whereas in the original Motion theme there’s none), so that the white text remains readable.

  2. Anonymous
    posted on Feb 08, 2010 at 8:28 PM  |  reply

    Hi, you’re amazing. I just began to investigate this today as a cool idea my friends and I thought of for an overhaul of our site. “wouldn’t it be nice if…” and here you are already in testing! If you’re looking to put an early revision out there, I’d love to be a crash test dummy for you.

    Kudos for thinking of such a cool idea and seeing it through to completion!

    • posted on Feb 14, 2010 at 3:46 PM  |  reply

      I’m nearing the point where I think I can release the code into the wild, so stay tuned :)

      • Anonymous
        posted on Feb 16, 2010 at 4:35 AM  |  reply

        Yesssssssss… Cannot wait to get to play with this. Are you factoring in portrait shot resizing, or is it purely landscape images, and is the resize automatic? I’m looking to prepare an album of photos in advance : ) *rubs hands in anticipation*

  3. posted on Jan 24, 2010 at 5:14 AM  |  reply

    […] Published WP Flickr Background in Alpha testing. […]

  4. posted on Jan 23, 2010 at 2:45 PM  |  reply

    It works fine here on Firefox 3.6. It is a little sluggish to scroll on my little laptop though :(

Join the discussion

Your email address will not be published. Required fields are marked *