Awesome ways of handling media on your Drupal site, part 1: ImagesAwesome ways of handling media on your Drupal site, part 1: Images

Categories:

Note: We recommend sticking with Drupal 6 for these modules. While it might be nice to have a look at a way of doing all of this in 7, we have found that the lack of support and modules makes it too difficult to recommend using 7 for media-heavy sites at the current time.

We all know that Drupal's true power lies in its extensibility. Out of the box, Drupal only comes with a simple upload module and no easy way to dig right in and start building rich media sites. Looking at the drupal.org module list can be a daunting task because of the sheer number of options that you have. Today we're going to look at some of the nicer ways of handling and displaying media on your site. This post will be broken down into 3 parts: Image, Video, and Audio. Today we're starting in with several awesome ways of dealing with images.

Getting started

We will need ways of easily inserting images into our content. To do this we are going to need a few key modules: Views, CCK (along with FileField and ImageField), and some sort of WYSIWYG editor (FCKeditor / CKEditor is a popular choice but you can get access to many options with the WYSIWYG module). CCK will basically allow us to implement images in a consistent way directly from the theme TPL files. Views will allow us to build nice grid layouts of things like galleries. Finally, a WYSIWYG takes care of everything else, allowing us to format and upload images on the fly and move them around content such as blog posts.

Many of the modules featured here will need support from other modules like Image, ImageAPI, and ImageCache. These support modules work behind the scenes to augment image support and allow Drupal to do some pretty powerful processing.

File management


The key to maintaining any media-rich site is being able to archive and review all of your images easily. Many WYSIWYG modules come packaged with their own file management solutions that will display everything in your Drupal files directory. However, let's take a look at some contributed modules that make things really simple for image handling.

Image browser module: Link
This module has a really nice, clean, compact interface. It is compatible with many WYSIWYG modules like CKeditor, FCKeditor and TinyMCE. It displays uploaded images in a grid and allows you to quickly sort through images by user. The lack of complexity makes Image Browser the ideal solution for sites that don't need the added weight of a multi-directory management system like IMCE. One additional thing I really like Image Browser because it has functionality that will help you align and size images as well as adding your own CSS styles directly from the interface if needed. It is a great no frills / no fuss image management module that you can customize to work perfectly with your theme.


Image Browser

 

FileField Paths module: Link
This module is crucial if you are going to be using Filefield, especially on more than one content type. What it essentially does is automate the placement of files within your directory structure. Let's say we have 2 content types: Blog post and Portfolio Image. Each of these has an image field that displays a small thumbnail on the front page so that the user can click and go to the  content page. Normally, the uploader would just place these images into the main Drupal files directory. After 20 blog posts and 15 portfolio images, combined with any other uploads you have done, this directory will become a huge mess of files. FileField Paths allows us to specify criteria for directory creation. I could use this to set all blog-related images to go into the /files/blog directory and the portfolio images into /files/portfolio. I could even get more specific than that, allowing Drupal to create a new folder for each specific node. This is a must for keeping your files organized.

Image Display

CCK is only capable of displaying your images either inline or linked in the actual node. Without modifying the TPL files of your theme, this will become limiting for a site that wants different ways of displaying images. What if we want ways of freeing the display of images, separating the display from the bounds of our current theme?

Lightbox 2: Link
Lightboxes have been around for a few years, but they are worth a mention. Frequently people forget that their media need not be restrained by their current design. Not all Drupal themes were designed from the ground-up to account for rich media use. In those cases you cant get really nice, large photos. Another side effect is that media embedded directly into the node can suffer from screen resolution limitations. Lightbox solves these problems by making your media show up in a modal window within the browser. The image is sized to the max resolution, and in the instance that the browser window is smaller than that, it resizes the image automatically. There is also the option for the user to make the image max resolution, so you're never limiting the display of your content to any constraints. One further benefit is that since it uses a modal window, your user never has to leave the current page or load a new URL. They can always get back to where they started simple by closing the image. Combine that with other types of media support and the ability to create galleries, Lightbox is the magic bullet of themes with media display problems.


Lightbox

 

Colorbox: Link
Colorbox is another lightbox module that is more lightweight than Lightbox 2. It also has an official Drupal 7 release, so if you are going to run a production site, this might be a good alternative.

ImageField Crop: Link
Okay, so I have thumbnails for a particular node appear in a view (e.g a list of blog posts with a uniform thumbnail display). Your default options are pretty limited if you want things to look uniform: pre-format and export all your images using a program like Photoshop (time consuming and limited by users' access to the program), or CSS styling (can result in weird aspect ratios or warped images). You could also install and configure a module like ImageCache, but if you want to allow other users to have some degree of freedom then this can be limiting. Enter ImageField Crop. This modules allows you to upload and image and then crop and resize it to fit within a specific area. Let's say that our blog view has posts with thumbnail preview that are 150px by 150px. After ImageField Crop uploads my selected image (let's say the original is 450px by 280px), I can move and resize the bounding box and get a live preview of the resulting output. The module even saves the original image so you can go back and edit it later.


ImageField Crop

 

Image Manipulation

We don't always consider some of the amazing things that can be accomplished with PHP modules these days. Drupal has a few modules hanging around that can actually assist and automate some image manipulation tasks. With these, you might just be able to cut Photoshop out of your update rotation...

ImageCache Actions: Link
If you've ever wanted to add borders, watermarks, transparency, or various other tweaks to your images, then this is the module you need. The "Actions" part of this module means you can set up powerful automatic image processing to your uploaded images. This module works best when you want uniform processing on a whole series of images. For example, your users upload images which automatically get a customized site watermark, resized, then placed within a poloroid frame, and placed within a view. In this way you can collect all this content yet ensures uniform display within your theme.

ImageCache Actions

There are a lot of different techniques for working with images within Drupal. I would encourage anyone to go to Drupal.org and check out these modules as well as some of the other offerings from the community. If you find something you like please leave a comment and I'll check it out as well!


 

Aaron Winborn's picture

Please, before nay-saying, take a look at the Media suite of modules for Drupal 7; it's come a long way, and we're wrapping up the loose ends in a sprint planned for next month.

Matt's picture

Thanks for the tip, Aaron. I'll check it out!

Anonymous's picture

would have been nice if 6 was mentioned in title to avoid the bait and switch for those who've moved on to D7.

Anonymous's picture

yeah i was all excited to see this article topic pop up in the planet only to navigate here and realize after clicking through the module links that it was all d6 only.

This is still a very ugly space in d7-- and image browser, one of the best modules of its kind, hasn't had a commit in over a year and doesn't look to have any d7 code even started yet (no issue in the issue queue even). The media module, the supposed holy grail of media handling for d7, is a ginormous unwieldy behemoth I won't touch on a production site. I much prefer d6's modular approach to media handling.

Matt's picture

We have found the same issues on many production sites. It's hard to recommend Drupal 7 for module-heavy (and media-heavy) productions at this time for that exact reason. I'll put a note at the beginning that states that this post relates mostly to Drupal 6.

lyricnz's picture

Unfortunately, I have to agree - Media management in D7 is a mess. Media module looks promising, but... has been "just promising" for quite a long time now. There are so many bugs, and loose ends, and under-features, that it's (unfortunately!) not a realistic choice for D7 yet. In fact, this gap has kept me on D6 for implementing such sites.

Anonymous's picture

I've actually had pretty good luck with the couple of d7 sites I started recently-- media handling being the only exception. Both sites were rather specific narrow use cases pretty much based on fields and views (in once case, fieldable taxonomy terms actually saved the day and probably couldn't be done with d6 without significant workarounds and/or custom code).

But definitely-- I'm still wary of committing to d7 (even just found another little weirdness just today-- user fields don't get added to the search index). And with all the big name core people seeming to focus on those huge d8 initiatives, I'm not very confident this stuff will ever get addressed for d7.

i'm afraid d7 may turn out to be the windows vista of drupal-- yeah we have pretty overlays (like windows aero ui ) which i disable immediately, but basic functionality like user fields and profiles are a small disaster. sad really that all that effort went into something so superfluous.

sorry... wandered a bit from your blog, lol...

Wim Mostrey's picture

It might be a good idea to make clear which version of Drupal you're using, at the beginning of your post.

Matt's picture

I'm using Drupal 6 because it has the largest availability for modules, but many of these have or will have Drupal 7 releases as well.

Need a Custom Designed Theme?

If you need a custom designed theme for your business then our designers can work with you to create a unique concept that is consistent with your brand, clearly communicates your value proposition and helps you achieve your goals. >> Click here to contact us and let us know about your needs and we'll analyze and provide you with an estimate for designing and development your custom theme.