Aug. 25, 2011
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:
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.
FileField Paths module:
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:
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.
Colorbox:
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:
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.
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:
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.
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!
Adapted from Awesome ways of handling media on your Drupal site, part 1: Images, by Matt, August 22, 2011 - 10:43
For more information on Drupal Development, Drupal Expert, Drupal Developer and Drupal Programmer visit DCKAP
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:
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.
FileField Paths module:
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:
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.
Colorbox:
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:
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.
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:
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.
Adapted from Awesome ways of handling media on your Drupal site, part 1: Images, by Matt, August 22, 2011 - 10:43
For more information on Drupal Development, Drupal Expert, Drupal Developer and Drupal Programmer visit DCKAP
