Working with Media Module in Drupal 7

In this series we look at how to integrate rich media into your Drupal website. In our example we build out a fully functional website for a band. In this lesson we take a look at what our client's needs are: to share their music and videos with their fans, and have a blog and news site with contact information.

We take a look at the modules and tools – Drupal core, Views, the Media package, music players and image display tools – we need to build the site. We'll wrap things up by actually taking a tour of the finished website so that you can see what it is that we're aiming for in this series.

Note: This series covers Media Module version 1.x. To learn about Media Module 2.x, check out our Using Drupal Chapter 4: Media Management series.

Additional resources

Using Drupal, 2nd Edition book Media project on drupal.org Colorbox project on drupal.org Gallery formatter project on drupal.org Insert project on drupal.org Wysiwyg project on drupal.org jPlayer project on drupal.org Views project on drupal.org

Before we dive into the fun world of playing with media, we need to get some basic Drupal site-building set up to meet a few of our site needs. ---- In this lesson, we'll create a foundation for the rest of the site by setting up the following things:

• Bio page
• Contact form (enable, show default config, perms, add menu item)
• Front page blog
• Add a theme (business)

Note: This series is covering Media Module version 1.x. To learn about Media Module 2.x, check out our Using Drupal Chapter 4: Media Management series.

Additional resources

Using Drupal, 2nd Edition book Business theme on drupal.org

Drupal is a Content Management System and most often when we think of content, we tend to think of the text-based content we type into into web forms and see as a blog, or an about us page. Digital media creators, however, also have to deal with sound clips, videos, and images. Those things need to be stored, retrieved and displayed just like text, and understanding the needs and processes around this will make working with them in our site a better experience.

In this lesson, we're going to look at the major needs for media asset management in Drupal with:

• Uploading and storing files
• Retrieving files
• Displaying files

Note: This series is covering Media Module version 1.x. To learn about Media Module 2.x, check out our Using Drupal Chapter 4: Media Management series.

Additional resources

Using Drupal, 2nd Edition book

The history of working with media in Drupal is long and bumpy. The main goal of the Media module is to create a refined, centralized way of handling media on a Drupal site, and Media, version 1, is the main tool we'll be using to create our site. In this lesson we'll get an overview of the Media module and specifically take a look at:

• Unified interface
• Kinds of media
• Different versions (https://groups.drupal.org/node/215218)

Note: This series is covering Media Module version 1.x. To learn about Media Module 2.x, check out our Using Drupal Chapter 4: Media Management series.

Additional resources

Using Drupal, 2nd Edition book

Working with images can sound very straight-forward, but there are actually many, many ways that we use images on the web. You need to know what your use case is, and the right approach to meet those needs, to save yourself some headaches.

In this lesson, we're going to discuss the different ways we may need to use images and how to approach those with Drupal. We'll be discussing:

• In-line content
• Image fields
• Creating galleries

Note: This series is covering Media Module version 1.x. To learn about Media Module 2.x, check out our Using Drupal Chapter 4: Media Management series.

Additional resources

Using Drupal, 2nd Edition book

For our site, one of our main needs is photo galleries. We're going to create ours by using one node per gallery to give our site editors the simplest way to make a nice gallery. In this lesson, we're going to take a look at what our finished galleries will look like, and the get started building them. We'll review the modules we need and then make our Gallery content type.

Note: This series is covering Media Module version 1.x. To learn about Media Module 2.x, check out our Using Drupal Chapter 4: Media Management series.

Additional resources

• Media module
• Chaos Tools (CTools) module

With the Gallery content type ready to go, we need work on a better display for the galleries so that they aren't just a big list of images. In this lesson, we're going to polish our galleries by adding several contributed modules that let us manipulate the display of our images in interesting ways. Specifically we will be adding Gallery Formatter and Colorbox modules to give us a nice interface for viewing the gallery images. Colorbox is dependent on the Libraries module, and we'll need to use an external javascript library, called Colorbox, to get the effect we want. We'll explain how to work with external libraries and make things are configured properly on our site.

Note: This series is covering Media Module version 1.x. To learn about Media Module 2.x, check out our Using Drupal Chapter 4: Media Management series.

Additional resources

Gallery Formatter module

Colorbox module

Libraries module

Colorbox javascript library

We have some nice looking galleries now, but there still isn't a good way for people to find and view them. In this lesson, we're going to use Views to create a Photos list page, along with a menu item, and then we'll make a Photos home page block. That block will be created with Views as well, and when you click on it, you will go to our new Photos list page.

Note: This series is covering Media Module version 1.x. To learn about Media Module 2.x, check out our Using Drupal Chapter 4: Media Management series.

Additional resources

Views module

Aside from things like photo galleries or images for albums, our content creators on the site are going to want to be able to add images to blog posts and do things like put a bio picture on the bio page. The article content type already has an image field, but that doesn't help us very much with getting that image inside the body of our content. In this lesson we're going to add in-line images using the Insert module.

Note: This series is covering Media Module version 1.x. To learn about Media Module 2.x, check out our Using Drupal Chapter 4: Media Management series.

Additional resources

• Insert module

Insert module provides a simple, clean way to get out images in-line, but we are not taking advantage of the fact that we have the Media browser for a unified experience. In order to get the Media browser in the picture for in-line images, and provide a really cohesive editing experience, we're going to give our users a WYSIWYG (what you see is what you get) toolbar, and add our browser to that toolbar. We'll be using the WYSIWYG module, along with the external CKeditor library.

Note: This series is covering Media Module version 1.x. To learn about Media Module 2.x, check out our Using Drupal Chapter 4: Media Management series.

Additional resources

• WYSIWYG
• CKeditor

Probably the most important thing that our band wants to be able to do is upload their music! In this lesson we're going to create an Album content type with a title, cover art, description, and list of songs.

Note: This series is covering Media Module version 1.x. To learn about Media Module 2.x, check out our Using Drupal Chapter 4: Media Management series.

It's great that we can list our audio files in our albums, but a link to download isn't a great way for people to experience the music. Media module is helpful to get the music up there, but it doesn't provide any players for audio and video files. We need to add our own player to make the audio experience nice and slick. In this lesson, we'll review the following players:

• MediaElement
• MediaFront
• jPlayer

Note: This series is covering Media Module version 1.x. To learn about Media Module 2.x, check out our Using Drupal Chapter 4: Media Management series.

Additional resources

We need to add our own audio player to make the audio experience nice and slick on the site so people don't have to download the files to listen to them. In this lesson we'll install the jPlayer module and the jPlayer library, then make sure our configuration is set the way we want.

Note: This series is covering Media Module version 1.x. To learn about Media Module 2.x, check out our Using Drupal Chapter 4: Media Management series.

Additional resources

• jPlayer module
• jPlayer library

In this lesson we already have albums and a nice player all set up, now we just need to make them easy to find and play. We're going to use the clone feature of the Views module to create a music listing page and then get a music block on the home page, next to the Photos block we already have. Using Views' clone feature will make this a pretty quick process for us.

Note: This series is covering Media Module version 1.x. To learn about Media Module 2.x, check out our Using Drupal Chapter 4: Media Management series.

Additional resources

Views module

Our band has been capturing stuff on videos for a while, and it's super easy for them to put them up on YouTube. YouTube has been perfect for them, and they want to keep using that, but they also want people to be able to find those videos on their site. In this lesson we'll create a new video content type and set it up to use remote media with the Media Internet Sources module, which comes with the Media package. When we add our video field to the content type we will not be configuring it for upload, which is what we used for the audio files on our albums. This configuration, with Media Internet Sources and the Media YouTube module, will allow our users to simply copy and paste in a YouTube URL or embed code to get a playable video on our site. In the process of working with the Media YouTube module, we'll also take our first dip into the Media file type display settings to make sure our video preview doesn't break our editing experience.

Note: This series is covering Media Module version 1.x. To learn about Media Module 2.x, check out our Using Drupal Chapter 4: Media Management series.

Additional resources

Media: YouTube module
Written tutorial based on this video

We have our video content type created, and we can get our videos on the site. The final step to completing this website is to create our video listing page and front page block. Like we did with the music views, we will clone an existing view to speed our work. To get our videos to display properly though we're going to have to dive deeper into our file type display settings, and in particular we will look at both a file type field setting, and the actual file display to get a custom-sized embedded video player on our listing page.

Note: This series is covering Media Module version 1.x. To learn about Media Module 2.x, check out our Using Drupal Chapter 4: Media Management series.

We've built a pretty great, and media-rich, site for our band. We nailed all of the requirements they had, and learned a lot about media in Drupal in the process. In this wrap-up lesson we're going to take a tour of the completed site to review how we built it, and step through the modules we used and how. Then we look froward by taking a quick look at some other useful modules to explore: oEmbed and File Lock.

Note: This series is covering Media Module version 1.x. To learn about Media Module 2.x, check out our Using Drupal Chapter 4: Media Management series.

Additional resources

• File Lock
• oEmbed