July 2008 Archives

Not too long ago (at work), I found myself in need of getting photo captions actually on a photo, instead of below or beside the photo (not unlike the way the lead photos are laid out on the Yahoo! Sports homepage). So, I set about tinkering with CSS and semi-transparent PNGs. After throwing out the PNGs (what if I want to change the size of the overlay? I have to make a new graphic? Pass!) and a round or two of code review and updates and then some further tinkering on my own, I've got a pattern!

Brass tacks.
As I said, the PNGs went away quickly when I realized that if I wanted to re-use this code but wanted a differently sized overlay, I'd probably need a graphic. That's just silly! With some cross-browser transparency magic, the overlay can be any size (dimensions) that I want it to be.

div.transparency {background: #000; filter:alpha(opacity=70); opacity: 0.7; -khtml-opacity: 0.7; -moz-opacity:0.7;}

Then, I thought to myself, "Self, what if you want to use a portrait-oriented photo and not landscape? And what if you have more caption on some photos than others?" (She's always being difficult, Self is.)

Defining widths and heights wasn't going to cut it if we're using differently-sized photos and may have different amounts of caption (title, title + description, etc.), so out went the dimensions. Instead, I placed the overlay by using the left and bottom properties (of course, you could use top if you always want it... across the top, but I don't, so there you are).

The overlay, div.transparency, is empty and placed inside a caption container for 2 reasons.

1. By not wrapping the caption in div.transparency, the caption won't inherit the transparency over the overlay. It, the overlay, has a different z-index than the actual caption content so the two don't conflict.
2. With the overlay inside the caption container and set to full width and height, it takes on whatever dimensions the caption content gives its container. So, it'll flex with its parent. Yay!

Monkey wrench.
At this point, I had a pretty good chunk of code working for me. I passed it over to Tom to try out and got more questions in return. What if I want it to align to the right? Does it always have to be the full width? Can it flex depending on the amount of content?

Picky, picky!

As it turns out: it can align to the right; no, it doesn't always have to be full width; and yes it absolutely can flex with the content.

For the width of the overlay, I decided to have the default not full width and offer an additional class to achieve it. Instead, the default is for the width of the overlay to be dependent upon the length of the caption content.

The default alignment of the overlay is also to the right mostly because I was using Tom's homepage as my sandbox. There's an additional class to push it back to the left, not that you couldn't swap the default and modifier if you so wished.

And lastly, there's an additional class to align the caption content to the right. Although, I must tell you, it only seems to work in conjunction with the full-width version.

div.full-width {width: 100%;}
div.caption-left {bottom: 20px; height: auto; left: 0px; margin: 0; padding: 0; position: absolute; right: auto;}
div.text-right {text-align: right;}

Samples of each case of the pattern and the code all put together.

Examples
T Incorporated: Tom's homepage changes dynamically and when there are photos, they use the photo + caption pattern.

Updates
Oh, I'm sure there will be plenty. Please feel free to drop in a comment if you've got suggestions!

Thanks to Tom for beta testing and cheerleading. (:

Inspiration, as they say, is found everywhere. The affordability of video cameras (Flip Videos, compact digital cameras that produce pretty good video, even small-ish HD cameras) has ushered in an explosion of folks creating hours and hours of their own video. It's not always good, but sometimes it can be great.


DIY35mmPro from twoneil on Vimeo.

This one is a test demonstrating a 35mm lens adapter on an HD video camera. I'm only used to seeing the focus change like this from inside my own viewfinder (or sometimes during some particularly dramatic moment in a film, heh).



Dunstan Orchard has a particular gift for composition. The combination of the images (bits of time?) and music he chooses for his video is always somehow just right. (And it doesn't help my gear lust at all that he made this one with the Ricoh GR Digital, a small-ish digital camera I'm highly interested in. (: ) For another example, check out "I can tell that we are going to be friends".



Lori is a favourite whether it's video or regular still photos. She has a great sense of humour and fabulous sense of style (and she owns that dead-center, headless thing and don't let anyone tell you different). Her videos tend to be short and this one's one of the best, I think.

Split Second
Another excellent photography exhibit from The Morning News. Barbara Probst sets up her cameras (sometimes 2, sometimes many more) to fire at the same moment, capturing a scene from different angles.

Photography is like language: It provides us with an interpretation depending on the intentions and abilities of the person that told the story or made the photograph. - Barbara Probst

The mechanics of taking (or making, if you prefer) a photograph fascinate me. From the location, time of day, equipment, people/things being photographed, and the people doing the photographing: it's all part of whatever image you finally see.

Generally, I'm not bothered or disappointed in finding out how much (or how little) work went into a photograph. Lots of prep time and lights and make-up don't necessarily make a photo
any less inspired, so why bother turning your nose up at it? Everything can't always be shot from the hip, so what's the point pretending it should be?

London is Swimming
Photos of abandoned pools in and around London. I like it when such places that are forgotten and untended manage when photographed to say something about their former lives. In Gigi Cifali's collection of pools, I think it's low angles and bright & muted colours that sucked me in. (The photos are also in Polar Inertia's latest issue.)

Incidentally, BLDGBLOG is one of my all-time favourites; if you have any interest in architecture, urban landscapes/planning, then BLDGBLOG might be something want to add to your bookmarks/feed reader. It's not the sort of thing you can just skim -- well, okay, usually there are photos, so you can but why you would is beyond me, the entries are thoughtful and worth your attention.


Snow in July? A mixed blessing in the Rockies
The NYT runs some pretty excellent photos and I'm noticing lately that they're often going with a pretty large photo on the article page for the day's featured articles. Unfortunately, they pull the photos from the stories once they're a few days old, so here's the shot from the story:



Photo credit: Michael Jamison/The Missoulian, via Associated Press