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.

Alternate resources: 

Using Drupal Chapter 4: Media Management
Manage Files, Images, and Other Media

Introduction to the Media Project

Video loading...

  • 0:01
    [drupalize.me]
  • 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
    [drupalize.me]

Working with Media Module in Drupal 7

Loading ...

Introduction to the Media Project

Loading...
6 minutes 32 seconds // Drupal 7 // HDCC //

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.

Downloads: 
Log in or sign up to download companion files.
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

Share