My goal with this new site is to not only to design a very clean, beautiful site, but to also showcase some of the nice effects that are possible with javascript libraries like jQuery (and teach myself how to effectively use them in the process). Last night, I worked for over 6 hours simply getting one small section of the front page to work the way that I want it to. My rule for myself was simple: I would accept no compromise from the design that I drew in Photoshop–unless IE 6 and its crappy rendering forced me to, which it did on the horizontal tab navigation. Bad browser! BAD! No biscuit.
So, if it’s still working, you should see a big image from flickr. You hover over that image, and you should see the image title and the description from flickr slide up onto the image, and if you mouse-off, the details will float back down.
The animation and hover effect is created with jQuery and a plugin for jQuery called hoverIntent. I had to add hoverIntent because I wanted a delay between mousing off the image and the slide-down. Doing this part, including writing the CSS and javascript, was actually only about an hour’s worth of coding at the most, and the only reason it took that long was because I screwed up including the script, and then I wanted that delay and had to go find out how to do that with hoverIntent.
Where things really got sticky was figuring out how to get the data from Flickr onto my page.
Here’s why: there are basically two plugins that you can use with WordPress to talk to Flickr. Unfortunately, neither one did exactly what I wanted. After playing with Falbum and FlickrRSS, I decided FlickrRSS was going to be the easiest for me to beat into submission. Important caveat: WordPress runs on PHP. I’ve worked with PHP off and on for the last 8 years, but I have never really learned it. I am NOT a programmer–I am a designer. A programmer probably could have written the code to do what I wanted to do here in about an hour. If a client had asked me to do this kind of modification, I would have contracted out the work to an expert. But I’m cheap and I took it as a learning opportunity, so I beat my head on it instead. So, moving on:
The first problem I had was that by default, FlickrRSS could display images, but had no options for displaying the title of the image and the description from flickr. My design plans called for this data. So first, I had to dig around in the Flickr API, look through the different feed types ‚and look at the source code of my flickr RSS feed to see if it provided what I needed. It did, but unfortunately, the area of the feed that provided that also provided a damned “JeremyT has posted a photo:” and an img tag including the image before even running the description. This information needed to be stripped. It was pretty easy for me to figure out how to write the PHP to start displaying that information, and even style it. But I needed to figure out how to take that information and strip out the img tag and the “JeremyT has posted a photo:” string. This took me down the rabbit hole of PHP functions and operators and all a bunch of stuff that I understand at a basic level due to all the work I’ve put into Actionscript at the day job. Eventually, through Google-fu, I found str_replace, and that worked fine. There’s probably a better function, but I couldn’t find it. I also used striptags, and provided a list of tags that were okay. Paragraph, bold, italics, and so on.
I describe it, and it sounds so easy, but the constant tweaking, the uploading and testing, then testing again–that’s what too so long. And my solution involved hacking the code in such a way that my desired effect is going to happen for every image I try and display anywhere. I will take advantage of this and provide more popups, or I’ll use CSS to hide that information. I just need to modify some IDs into classes and it’ll be more flexible.
So, one technical hurdle overcome–three hundred to go! God help me, this program stuff is actually kind of fun. JQuery is especially cool.
