Courant News: Media

In keeping with my attempt to do one blog post each day, today I’m going to talk about media in Courant News. One of the largest advantages of the web over print is the ability to publish virtually unlimited amounts of multimedia. Whereas articles often have at most one photograph associated with them in the print edition, we have the ability to publish all kinds of multimedia with our articles online: photos, videos, audio clips, interactive graphics, files, etc, etc.  First I’ll look at the reasons for doing this, and then specifically how Courant News handles media.

Rationale

In the process of producing photos for a given article, photographers often take a whole slew of photographs, and generally only see one of them published in the print edition. There is no reason for the remainder of those photographs not to join the article in its online incarnation. By allowing this, and even encouraging it, the photographers have more incentive to take more and better pictures, and are able to have their work seen and appreciated by the world.

On the video and audio fronts, there is absolutely no way to publish these forms of multimedia in a print paper. They can either supplement articles or can be standalone pieces in their own right, allowing media producers to stand on even ground with their writing reporter counterparts. With the advent of cheap digital video cameras, even newsrooms on a small budget can afford the equipment necessary to more fully engage their online audiences and provide a compelling reason for readers to come to their websites in addition to (or instead of) reading the print product. Video production skills are increasingly important in the modern era, so having a video component of your news organization can helper your staffers learn necessary skills for a future career in the industry.

The Courant Way

I originally got my start in the web design/development world doing Flash projects for a small web design company, so I have a fond place in my heart for multimedia content. As such, I took the lead among the Courant developers on implementing the media functionality. The goal was to enable as wide a variety of media types as possible, while leaving the door open for expansion in the future into new mediums.

As such, we have a base content type called the MediaItem, from which all other media types descend. MediaItems have captions, full descriptions, tags, comments, and similar such basic attributes. They also are associated with staff members, just like articles are, so that you can easily find other media created by that person.

We currently have Photo, Video, Audio, and Gallery content types, which descend from MediaItem. Each of them has attributes specific to that type of media, and it is trivial to add new ones such as our planned Flash, File, and Chart/Graph content types. Gallery, in addition to being a MediaItem in its own right, acts as a container which can hold an arbitrary collection of other MediaItems. You could use it as a slideshow, or to group a special set of media content, or whatever you want.

The advantage of all media content descending from the MediaItem base is that you can search and filter across all the different types seamlessly as if there was only one, while still retaining the ability to look at only a specific type when necessary. So instead of an article having a Photo for its thumbnail, you can have any MediaItem-derived type, such as a video or audio clip. Or on your multimedia page you can create a listing of all your media in order by publish date, without having to somehow manually combine all results from each different type of media. Thus it is really easy to add media to other types of content, as a simple relationship to MediaItem brings along access to any type of media support by the platform or your custom extensions.

For example, articles can have an unlimited number of MediaItem objects associated with them (with a specified ordering for display). I can put 1 photo, or I can put a photo and a video, or I can put 10 photos, or I can put a flash graphic, or whatever I want. The possibilities are limited only by your imagination and how you can fit them into your site design.

In your templates, there are basic faculties to allow you to display your media content, either as an embedded object (for Flash-based content such as videos, audio clips, or interactive graphics) or as an <img> tag or whatever you need. Support for the OEmbed protocol means you can embed videos from any video service that supports the standard (which all the most popular ones do).

That’s a relatively brief overview of how we are handling media in Courant News, and please leave a comment if you have any questions.

3 Responses to Courant News: Media
  1. Joey Baker

    @Max– What you’re describing sounds great! A few questions:
    • Are photos placed in a flash wrapper, or are they just regularly inserted with HTML?
    • Did you use any code as the basis for your gallery or did you write from scratch?
    • How easy is it to set one media item as the thumbnail for the story?
    • When a video becomes the thumbnail, does the video itself become the thumb, or is it a poster frame?
    • Do you support a lightbox like effect?

    Cheers,
    –Joey

  2. Max

    @Joey: So what I described is the data or code aspect of how media works, and just hinted a bit at the templates, which is more what you are talking about.

    In the standard set of templates I’ve been using, photo thumbnails are just normal HTML img tags. We’re using the sorl-thumbnail library, which you can read about and may shine some light on the functionality there (though you can choose to use whatever other Django thumbnail library you want).

    But you can control how each content type gets rendered as a thumbnail and when displayed in “full” size, so it’s ultimately up to the site designer to choose how they want to display things, using whatever HTML, CSS, Flash, and Javascript that they want.

    Regarding selecting an item as the thumbnail, by convention we’ve been just using the “first” media item associated with that piece of content. You define an ordering of the media items associated, so it’s easy to just grab the first one and use that as the thumbnail. I can imagine cases where maybe that’s not the ideal behavior, but again, you have full control over that in your templates.

    And then regarding video vs poster frame, my personal philosophy is that people should be encouraged to look at/watch media at full size and with the ability to post comments, so I try to use images/poster frames for the thumbnails and force people to click through to see the content. It’s an extra page view for ads, which is good for the publisher, and it shows more information, which is good for the user. But as I said above, you can control such behavior through your templates and do it however you want.

  3. Joey Baker

    @Max – nifty. Thanks.

    Opensource, as u point out, is amazing b/c we can customize as we like. Nonetheless, what you decide as the ‘defaults’ will be powerful decisions.

Leave a Reply