Sane media management in Drupal


Keeping track of the images, videos and sound clips in your website can be difficult.

Here's what happens: an organization plans for their new website. They make a huge push to get its content in place. Deadlines are established, arms are twisted, articles artfully produced. There isn't time or patience to fuss over the site's directory structure when people are busy finding just the right media to make their points and make the site beautiful.

However, when the smoke clears and the site is launched, here’s what the org is faced with:

Total media entropy. The horror. The. . . horror.

Let me be clear about why this is bad: if you want to use an image in more than one place—say, in your homepage slideshow, as well as at the top of your latest blog post—that’s not really an option unless you memorize its filename. Of course, you don’t have to care about that. You could just upload a new copy of the image every time you want to use it. But if you do, over time this directory fills up to the point where it creates disk-space problems for your site. This might slow down the site’s operation, or force you to buy a bigger hosting plan for it. Whether or not those things happen, you’ll be putting up with a less and less pleasant experience every time you want to just put a picture into an article… all so that 6 copies of an image called "1f380b5025f711e38c6122000aa8013a_7.jpg” can quietly sit on your website for years. Yes, that is a real filename, from a real website. See above, re: the horror.

Taming the Crazy

When we started work on a new site for the Boston Institute for Contemporary Art, we knew that they were going to need a really thoughtful approach to this problem. They’d be posting tons of big, beautiful images of their exhibits—and artist interview videos, and sound clips—and as with all our projects, we wanted this site to work well for many years to come.

So we searched the Drupal community for better approaches to media management. After considering several big systems, we installed Scald and EPSACrop. Once we got them configured and wrote some glue code, here’s what the ICA got.

Metadata: Tagging, Readable Image Names, and Lots More

With the setup I’ve described, it was possible to save extra information about every media item. Now, instead of being stuck with image names chosen by your digital camera, you could call your image “Crowd Picture from Party 10/22/15.” The underlying filename that the website used was still “1f380b50…”, but that was no longer your problem.

Better still, you could keep track of other stuff about the image—say, the person who should be credited for it, the caption it should use, and some tags. Let’s imagine tagging our hypothetical image, “events.” That’ll be useful below. . .


Here's a huge improvement over the old “toss all the pictures into a directory” approach: Scald provides a media-management screen that gives you an overview of all the media on your site. That includes YouTube or Vimeo videos that you’ve dropped into pages, SoundCloud clips, and any other kinds of media that you might upload or link to. The same system of tags applies to all of it.  That means you can search for all media tagged “events” at once, or everything whose title includes “party,” and so on.

No more hunting for obscure filenames! ...Unless you like obscure filenames, in which case go ahead and name things obscurely.

Insert With Drag & Drop!

In this day and age, this shouldn’t be a breakthrough (and for our colleagues in the Wordpress world, it isn’t). However, it is now functional, and easy to use, in Drupal.

Just, you know, put the picture where it's supposed to go.

That list of media appears along the side of every page you edit; if you want it out of the way, you can minimize it. If you want to upload a new media item here, you use the “Add” menu to either upload an image or create a reference to some media out on the internet, like a YouTube video.

One Image, Many Crops

We were really proud of this clutter-reducing feature. Let’s say that you want to highlight that party picture in a large, landscape format on your homepage, but then also want it to appear in a small, square format as a "teaser" in a list of blog posts. In other setups, you'd have to fire up Photoshop, crop the image two separate ways, and upload each of the crops as its own image file.  Thanks to the EPSACrop module, it is possible to upload a single image for both purposes, and create a crop for each one one, right on the site. Of course, you’re not limited to two formats:

Here, we’re establishing the “thumbnail” crop for our picture. . .
. . .and the one that would stretch across the homepage. . .
. . .and one that might appear in a partial-width slideshow.

Not Just for Art Museums

These features are very useful for our clients whose work centers around media. But everyone's site needs images, likely video, and maybe even sound. If you want your site to last--and not drive you up the wall--get in touch with us and we'll help you manage media right.