Check your version

This video covers a topic in Drupal 7 which may or may not be the version you're using. We're keeping this tutorial online as a courtesy to users of Drupal 7, but we consider it archived.

Introduction to the Media Project

Video loading...

  • 0:01
  • 0:05
    [WORKING WITH THE MEDIA MODULE IN DRUPAL 7] [Introduction to the Media Project]
  • 0:11
    [with Addison Berry]
  • 0:18
    Media. Images, audio, video.
  • 0:22
    It's everywhere on the web today.
  • 0:24
    And it's a really common task when building a website
  • 0:27
    that you be able to integrate all of that rich media into the website
  • 0:31
    in addition to just text.
  • 0:33
    In this series we're going to be looking at how you would go about doing that with your Drupal site.
  • 0:38
    And we're gonna do it by building out a fully functional website for a band.
  • 0:43
    They're gonna need all of those different kinds of media to work on their site to make it rich
  • 0:48
    and for people and their fans to get the greatest experience out of it.
  • 0:53
    In this lesson we're gonna take a look at what our client's needs are.
  • 0:57
    What is the actual case study that we need to build out?
  • 1:00
    And then we're gonna take a look at the modules and the tools that we're gonna use to accomplish that task.
  • 1:06
    We'll wrap things up by actually taking a tour of the finished website
  • 1:10
    so that you can see what it is that we're aiming for
  • 1:13
    and what it is that we really need to build in this series.
  • 1:16
    So let's get started by taking a look at what we are trying to do here.
  • 1:22
    So for a quick review of what our client needs,
  • 1:26
    what are the goals that we're trying to accomplish in this project here?
  • 1:30
    First of all, and probably the first thing that comes to mind for them
  • 1:34
    is that they want to be able to share their music and videos with their fans.
  • 1:39
    They also want to be able to have the band bio, so a little bit of information about them.
  • 1:43
    And related to that, they would also like to be able to blog,
  • 1:46
    so put news announcements or just put general thoughts from the road
  • 1:49
    or that kind of a thing onto the site
  • 1:52
    to build a little bit more of a connection with their fans.
  • 1:55
    And then they also want a contact form.
  • 1:59
    People want to get in touch with them or book things,
  • 2:01
    or there's press, or fans just want to say hi.
  • 2:04
    So we just want a very simple contact form on the site as well.
  • 2:08
    It's relatively straightforward.
  • 2:10
    But we do need to make that we have in particular the music and videos working properly on the site.
  • 2:17
    So in terms of how we're going to end up approaching that and what we're going to end up doing,
  • 2:22
    we're going to end up touching upon these main contributed modules.
  • 2:26
    Of course we're gonna rely on Drupal core for a number of these things—
  • 2:30
    creating the blogging that we need, the contact form, the band's bio page—
  • 2:35
    all of those are things that we can do with Drupal core.
  • 2:38
    But once we head into the music and video stuff
  • 2:43
    and wanting to make the editing experience for the blogging a little better,
  • 2:46
    we need to move into some contributed modules.
  • 2:50
    So we're gonna be looking obviously at the media package
  • 2:53
    and a number of different modules that come within that package.
  • 2:57
    It's not just one module.
  • 3:00
    And related to that, we'll also be looking at using things like Colorbox and Gallery Formatter
  • 3:05
    so that we have some more interesting ways to display the images that we have on the site.
  • 3:11
    We're also going to look at Insert and WYSIWYG
  • 3:13
    to make it easier for them to— when they're writing a blog—
  • 3:17
    to just be able to put things in there, highlight things with bold text,
  • 3:21
    and insert images into the body of the text.
  • 3:24
    We're also gonna look at how we would do that with Media Browser.
  • 3:28
    That comes with Media module as well.
  • 3:30
    And then when it comes to the music and video stuff,
  • 3:35
    we're gonna be looking at how we can again use Media module to help us embed some videos,
  • 3:40
    but with the audio files we really still need a player.
  • 3:44
    Media doesn't come with a player for playing those in the browser.
  • 3:49
    So we're going to take a look at several of the players that are available out there
  • 3:53
    and then we're gonna end up using jPlayer
  • 3:55
    so that people can go to the site, see what music is available,
  • 3:59
    and then actually play it directly in the browser.
  • 4:02
    And then of course we're gonna be using Views
  • 4:04
    to build our lists of all of the content that we need.
  • 4:07
    So we're gonna want galleries and we're going to want the list of all the videos
  • 4:12
    and the music and that kind of a thing.
  • 4:14
    And we're gonna need Views to help us get that done,
  • 4:16
    working with the Media module and the other things that we've set up
  • 4:20
    so that we end up with a nice experience for our end users.
  • 4:23
    So let's take a look at the actual site that we're going to be building.
  • 4:27
    So this is the We Sing Songs band website.
  • 4:31
    It's very simple and clean, as you can see.
  • 4:34
    We're going to use a contributed theme to help us make it look nice
  • 4:39
    and not quite like a regular old Drupal site.
  • 4:42
    And you can see we have some navigation here
  • 4:45
    for music, photos, videos.
  • 4:47
    We have the biography page.
  • 4:49
    We do have a contact form.
  • 4:53
    And if we go to something like music,
  • 4:55
    you can see we have an image for the album
  • 4:57
    and then we can list the songs.
  • 4:59
    And there's actually a player so that people can just listen to the music here if they want.
  • 5:06
    We also have photo galleries.
  • 5:08
    We actually have several galleries that are going on.
  • 5:11
    We can go in and then go through the gallery.
  • 5:14
    So if it's for a particular gig or something like that, we have that.
  • 5:17
    And then we also have videos that we can embed and play.
  • 5:22
    So if I go back to the home page,
  • 5:24
    we've also set up the home page pretty nicely
  • 5:26
    where we have these main headers for music, photos, and videos
  • 5:30
    that will take us to those various pages.
  • 5:33
    If I click on music, then I go to the list of albums that they have.
  • 5:39
    And we also have this front page blog.
  • 5:42
    So right now it just has this welcome to the site,
  • 5:45
    but as they blog they can put these things right here on the front page,
  • 5:50
    and everybody can see what the latest news is that's going on in this site.
  • 5:53
    And if I log in and we go to add some content,
  • 5:57
    if I go to create an article,
  • 6:00
    you'll notice that we have this really nice WYSIWYG toolbar here.
  • 6:03
    And I also have this nice media browser
  • 6:06
    so that I can upload new images,
  • 6:09
    or if I wanted to I could select from the library
  • 6:12
    to add something to the body text on this page.
  • 6:16
    So it's a nice, clean, simple website
  • 6:21
    and it should work really well for the band.
  • 6:23
    So let's actually dive in and figure out how we're gonna build this website.
  • 6:29

Introduction to the Media Project


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.

Log in or sign up to download companion files.