Sometimes I even impress myself

Been working on an official movie site for my mate, hot shot movie writer/director/producer Colleen Patrick recently. Well, I say "official." It's official at the moment. With the film in pre-production they needed a web presence. Initially a quick-and-dirty web presence just so that anyone paying a visit to the official URL wouldn't get one of those impersonal hosting pages.

Once the film was in the can and slated to have its premier at the Seattle International Film Festival, "quick and dirty" needed to become a little more polished.

Once the film finds a distributor, they'll swing into action with their army of Flash/PHP/Java programmers and dump all over my work, but for now I'm the official webmaster. Go take a look. We're at http://www.thewholetruththemovie.com.

Recently, to follow up the trailer on YouTube, Colleen and her fellow producers and tech crew have been releasing interviews from the EPK - the kind of thing that will eventually find its way onto the "extras" DVD. Now originally, The Whole Truth website featured just that one trailer, on its own page. About a week ago, Colleen emailed me asking if I could put up all the rest of the interviews.

Problem was, the website was conceived as a fixed space. The list of interviews from the EPK is already 14 long and increases by one a day. I have no idea where it will end. I needed a way of displaying YouTube videos in a kind of gallery, where you could pick from a list, and see the result in a "display area." A few minutes' research uncovered one way of doing this that YouTube themselves offer. A YouTube Custom Player. Associated with a playlist, this can be embedded in a site in exactly the same way as a single video file, but offers a selection panel containing all the videos on the playlist. It has the advantage that any additions to the playlist are immediately reflected in the custom player, so updating the site with each new day's interview would involve just a single operation on YouTube.

I tried it out, and it worked fine, but it wasn't exactly the image I wanted. What's more, the available colour schemes are quite limited and didn't match the livery of the site. I needed something more configurable.

As always when I'm stuck for a solution, I turned to Stu Nicholls' marvellous CSS Play site. Browsing through his list of inventive galleries, I came across this one, which was uncannily close to what I'd envisaged for the YouTube gallery. I downloaded the code and read through it quickly.

Obviously, the main difference between this and what I was trying to do is that Stu's gallery handles img tags, and the standard YouTube embedding code uses object tags. But the simple Javascript array handler seemed eminently editable to handle object instead of img, so I set about fiddling with it to see if I could make it work.

With remarkable ease, I proved the 80/20 rule. I got 80% of the way to what I wanted in the first half-hour. That last 20% proved a little more tricky. For a start, the left and right arrows, which remained as imgs, were not being picked up as part of the array. It looked certain this was screwing things up somewhere. If they weren't part of the list that could be "clicked" then they would remain dormant and there'd be no way to access videos beyond the visible elements of the list.

I reasoned that since images ARE objects of a sort (indeed the CSS/HTML standards body intended object to replace img, although most browsers still handle img tags better than objects and they have much wider currency) I could replace the left/right arrow img tags with object declarations. Immediately things started to work a little better. The main problem remaining at that point being that YouTube videos are considerably wider than Stu's original photos, which required some pixel-counting and adjustment of widths and array limits to get the main functionality working as intended.

It was then only a simple matter of positioning the whole gallery correctly on the page, and amending the text and background colours to match the site. In fact the hardest (well, most tedious) part of the whole exercise proved to be the creation of thumbnails for each of the 14 YouTube videos.

The final result can be seen here. And yes, as the title of this post implies, I impressed myself. You might think I'm easily impressed; I couldn't possibly comment.

The editing requirements for this version will be slightly more onerous than for the YouTube Custom Player, involving the creation of a new thumbnail for each new video, adding an entry to the array and adding a new item to the HTML list that forms the basis for the gallery. But that's all mechanical stuff. The gallery is unlimited in capacity and looks much more a part of the site than the nearest Custom Player livery - a rather dangerous looking cherry red.

It's true to say that if there were hundreds of entries it would become very tedious scrolling through them one at a time if you knew you wanted #93, for instance, but I doubt that will be a problem in this case and if it does turn out to be an issue I can always add extra left and right buttons to skip an entire section (8 entries) at a time.