onfocus

O'Reilly just published a digital media gift guide via press release, and it includes a bunch of great books for the MP3 and digital photo crowd. But they left out one item, imho. (Warning, what is about to follow is blatant self-promotion—but I still think it's a good idea.) If someone you know is getting a new digital camera (or receiving a digital camera or cameraphone for the first time), give them the ultimate accessories: a Flickr Pro account and a copy of Flickr Hacks. Digital cameras should ship with some sort of pipeline to Flickr. And until they do, you can encourage sharing with the account and get them up to speed with almost everything Flickr can do with the book. (This is my own digital media press release.)

And speaking of Flickr Hacks, co-author Jim Bumgardner recently joined Yahoo. He'll be doing his brand of audio and visual Flash hackery for Yahoo Music. Congrats, Jim! (And Yahoo!)

Update (12/18): Flickr added a Flickr Gifts page, and Paul Stamitiou put together a Flickr Gift Guide for the Flickrist in your life. (Alas, no mention of Flickr Hacks—but you know better!)

Flickr's recent move from beta to gamma introduced a slew of changes to the look and feel of the site. Most of the changes seemed to be centered around navigation, and finding ways to give quick access to all of Flickr's features. All well and good.

However, there was one fundamental design change in the upgrade that affects every image you view on Flickr—they removed photo borders. Flickr used to display a 1-pixel wide gray border around every photo, both on photo detail pages, and on photostream pages. This border was important because it separated the photograph from the background. The effect is subtle most of the time, but has a big impact with certain photos. Here's an example:



This photo of mine on Flickr has white at the edges, and without the border the photo bleeds into the background. Obviously you can imagine where the photo ends and page begins by drawing a mental line from the colored parts of the photo through the white parts of the photo. But the gray border used to do that work for you, and in the process made the site feel more solid.

Luckily, because I use Firefox, I can change the look of Flickr with a few lines of CSS. I put the gray border back on both image detail pages and photostream pages, and I'm already more productive thanks to eliminating the mental strain of imagining borders around photos. If you'd like to give your brain a little less work while browsing Flickr, here's how it's done:

1. Locate your Firefox profile folder.
2. Open the chrome folder and open the file userContent.css in a text editor like Notepad. (You might have to create the file if it doesn't exist yet.)
3. Add the following bit of CSS to the file: @-moz-document domain(flickr.com) { .reflect { border:solid #999 1px !important; } .Photo img { border:solid #999 1px !important; } }
4. Save userContent.css and restart Firefox.

That's all there is to it. Once the custom styles are in place, you'll see a Flickr with borders again:



I think light gray (#999) is the best color for the border, but you can make it lighter or darker by adjusting the value lighter (#ccc) or darker (#666). You might also experiment with padding and background colors if you want to mimic the white/gray borders I often use for photos here.

If you're not already obsessing over details like this, try tuning in to photo borders at other sites and in photo applications. Of course you're not supposed to notice the border (or lack thereof). But like any physical frame, pixel borders can enhance or detract from your photographs.

Update: After living with this for a day or two, I decided to go with a lighter gray border, #ccc. Just change #999 to #ccc in the CSS above if you'd like to do the same.

When I'm browsing photos on Flickr, I use the More Properties link quite a bit. That's the link that takes you to the Exif data associated with a photo if it's available. Embedded Exif data is how Flickr knows what type of camera took a particular photo, what the shutter speed was, aperture setting, and a bunch of other technical details about the state of the camera at the time the photo was taken. The more properties link is to the right of a photo on Flickr, and looks like this when it's there:



The first thing I look at on the More Properties page is the camera model. But unless I know a particular camera model number already, it doesn't tell me much. "Ahh yes, the EX-Z750," I tell myself. Of course I have no idea what that model number means. So if I really want to know what type of camera the photographer used, I have to copy the model number, go to Amazon or Google, paste it in, and sort through the results. I knew there had to be a better way.

So I wrote a (relatively) quick Greasemonkey script that does the work of looking up the camera model for me. It even inserts a picture of that particular model on the Flickr "More properties" page. Here's what it looks like in action.

More properties page before:



More properties page after:



And you can click the camera image to view more info about the camera at Amazon. Bonus for me: if you buy the camera through that link, I'll get a little kickback through Amazon's Associates Program.

Here's how it works. The script grabs the camera model from the Flickr page, contacts the Amazon API looking for that model in the Camera & Photo category, then grabs the image of the first result. Then the script inserts the image and a link to the product page into the page at Flickr.

It's not perfect. Sometimes Amazon doesn't carry that particular camera but has accessories that include a description with the model number. So you'll see a flash or remote shutter release instead of a camera. And sometimes the first result from Amazon isn't the correct model number—especially with older cameras. I'll keep tinkering with it to see if I can get more accurate results from Amazon.

If there's no match at all on Amazon, the script makes the model number a link to Google search results for that phrase.

The script just gives me a quick look at the type of camera that took the photo. I've been surprised to see cameras that look like video cameras taking nice still photos. Anyway, it was fun to put together and I learned a bit more about JavaScript.

If you already have Firefox with Greasemonkey installed, you can install this script for youself here: Flickr Camera Images

Thanks to the author of Monkey Match for a solid Amazon E4X parsing example, and of course Dive Into Greasemonkey. For more fun hacking around with with these applications check out Flickr Hacks and Amazon Hacks. (disclaimer: as you probably know I worked on both of these books.)

There's a nice review of Flickr Hacks over at MyMac.com: Hack Your Way Into Flickr, and the reviewer mentioned that the code for all of the hacks wasn't available online. O'Reilly has remedied the situation, and you can grab all of the code from the book in one zip file: Flickr Hacks Code. Carpal tunnels everywhere are rejoicing. (And don't forget about the color figures gallery at Flickr—another way to view parts of the book.)

yay! I'm a little late with this news, but Flickr Hacks is now available in physical book form! Is there someone you'd like to see posting their photos to Flickr but they haven't made the leap? Give the gift of Flickr Hacks. :) I think the book is a great introduction to the Flickrverse, and any reader will become a Flickr power user if they give some of the more advanced hacks a go.

It's great to see the book in its final form, especially because this one was so much fun to work on. This picture is my copy of the book, and you can keep an eye on photos tagged with flickrhacks to see others.