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!
Related posts:
