This page is archived
We're keeping this page up as a courtesy to folks who may need to refer to old instructions. We don't plan to update this page.
Alternate resources
Almost every website needs some kind of media management support, ranging from allowing users to upload photos to handling automatic media encoding in different file formats. There are many aspects to working with media and through this series will explore core image handling, the Media module, and WYSIWYG. We'll see how all of these pieces fit together through building the Band Wagon project, which is a music fan site that is going to need the ability to work with images and videos. This series is based on the Using Drupal, 2nd Edition book by O'Reilly Media, and uses the source code provided for that book. Note: This series is covering Media Module version 2.x. To learn about Media Module 1.x, check out our Working with Media Module in Drupal 7 series.
See our guide Using Drupal Book by O'Reilly Media to access all of our tutorials related to this book. Each series covers a chapter (or appendix).
In this lesson, we take a look at our Band Wagon case study, and then we'll go through our implementation plan and see how we're going to tackle this one. In our case study, John and Lisa decide to make a website to share information about all the music they love, including videos, photos and reviews, and they want their friends have a voice on the site as well.
First of all, they need to be able to upload images to the site, and have an image that's small in one location but full-sized in other locations. We'll want to embed some videos, as well.
Their friends don't know how to write HTML, so we let them use a simple form to select media, and maybe reuse other people's images. We want to provide them with a WYSIWYG tool bar, an editor that helps them write HTML without coding.
How will this work? We'll use Drupal Core's Image Module and image styles, and expand the Media Module. For our WYSIWYG editor we're going to use the WYSIWYG Module, and then we're going to need to get an editor that we can plug into it.
Additional resources
When you’re uploading photos to a website, it’s important to ensure that they are displayed at the right size. Otherwise, when you upload an exceptionally large image, chances are good that it will break your site’s layout. To prevent this, you’ll want to scale these images so that they’re a consistent size, and create thumbnails for use in listing pages. Image styles are a feature that’s part of Drupal core’s Image module, and it provides these options and many more for displaying images. In this lesson we'll get an overview of the core image styles feature so that we understand how it works, which styles and effects we have to work with, and some tips for troubleshooting when your images don't display properly.
Additional resources
Before we can nicely publish our favorite bands’ photos on our website, we need to make sure to set up image styles, in order to create scaled-down versions of the images while leaving the original images intact. In this lesson we'll modify an existing image style to customize it, and also see how we can improve our image quality.
Additional resources
The Media module for Drupal 7 solves a number of long-standing media-related problems in Drupal. At its core, Media provides a framework to manage media assets on a Drupal site, regardless of whether those assets exist on the site’s server or somewhere else on the Internet. Media has had much active development over time, and was a moving target when Using Drupal was written, so the latest version of Media is a fair bit different from the version we cover in this lesson, "2.0-unstable3." Version 2 of Media is very, very different from version 1, which is a much older version. We highly recommend that you learn the fundamental pieces of Media 2.0 using the source code that comes with the book and is covered in the About the Using Drupal series. That will allow you to follow the lesson without getting lost in the changes. Then, when you upgrade to the latest version down the road, you will have a solid foundation to explore the newer versions.
Additional resources
To get our music reviews built, we need to get started with a new content type. In this lesson we will get the basics in place by creating the new content type, with our main fields, and the ability to upload an image.
Additional resources
Now that users can post reviews on the Band Wagon site, we need to make sure that the content they publish, including their intro photos, is actually displayed correctly. To accomplish that, in this lesson, we're going to configure the field display settings and apply image styles.
Additional resources
We now have a site with most of the basic functionality the Band Wagon project needs to start. However, one important piece remains: streamlining the content editing process, and allowing easy image and video integration in posts. In this lesson we will compare content editing tools and discuss how to integrate our media directly into the body of our content.
Additional resources
Text formats are an important security feature of Drupal, so it pays to understand them. A text format will “scan” your content and make HTML formatting changes to it before sending it to the browser for display. In this lesson we'll see what formats and filters are, and how they relate to each other, walk through the filter workflow, as well as reviewing the default formats that come with Drupal core.
Additional resources
Let’s set up the WYSYWIG editor for the Band Wagon website, using the WYSIWYG module and CKEditor. Note that if you prefer a different WYSIWYG editor, such as TinyMCE or Aloha, the installation instructions are very similar. In this lesson we'll we'll not only get WYSIWYG set up, but we'll also enable the Media filter and integrate that with our WYSIWYG editor.
Additional resources
The Media module for Drupal 7 not only supports adding and managing media that is uploaded from a user’s computer into Drupal, but it also comes with a submodule, called Media Internet Sources, that allows using media assets from various Internet locations. In this lesson we'll look at what media internet sources can do for us and quickly explain what stream wrappers are and how they relate to what we want to do on the site.
Additional resources
Because we already the Media module installed, it’s really easy to enable support to post videos from YouTube on the Band Wagon site. In this lesson we'll enable Media Internet Services and Media: YouTube modules, and make sure everything is working properly to embed a YouTube video into our content.
Additional resources
If you’ve completed the Band Wagon site to this point, you’ve built a solid foundation for a Drupal-based music fan site that provides the main features we wanted. In this lesson we'll look at some more modules to explore, and how they could enhance the site we've created:
Additional resources
We've built a nice site for John and Lisa that meets their needs, and has them happily uploading photos and videos to their site. In this lesson we'll tour the Band Wagon site, walking through how we addressed our implementation points, and then wrap up with a review of the modules we used and referenced during the series.