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.

Case Study: Band Wagon

Video loading...

  • 0:00
    [This series based on Using Drupal - 2nd Edition]
  • 0:03
    [By Angela Byron & Addison Berry with Bruno De Bondt]
  • 0:06
    [♪ music ♪] [DrupalizeMe]
  • 0:09
    [Using Drupal - Media Management] [Case Study: Band Wagon with Addison Berry]
  • 0:19
    Almost every website at some point needs to deal with media in some fashion.
  • 0:24
    It could be as simple as needing to upload photos,
  • 0:27
    but it can also get pretty complicated
  • 0:29
    in needing automated encoding to various file formats, etc.
  • 0:34
    In this series, we're going to be taking a look
  • 0:36
    at how we work with media in Drupal
  • 0:39
    using the core image handling system,
  • 0:41
    the Media Module and WYSIWYG.
  • 0:45
    We're going to be taking a look at a project
  • 0:49
    for a website called Band Wagon,
  • 0:51
    which is a music fan site.
  • 0:53
    We're going to need to work with photos and videos
  • 0:56
    to make this project come together.
  • 0:58
    In this lesson, we're going to take a look at our Band Wagon case study,
  • 1:02
    and then we'll go through our implementation plan
  • 1:05
    and see how we're going to tackle this one.
  • 1:08
    Let's go ahead and dig into media in Drupal.
  • 1:12
    Let's take a look at the features we need for Band Wagon.
  • 1:15
    This website is the idea of John and Lisa.
  • 1:19
    They both love music. They love going to shows.
  • 1:21
    They love listening to music, and they're into everything about it,
  • 1:26
    and they have a circle of friends that are all into the same kind of music,
  • 1:29
    and they've been thinking for a while that what they'd really like is a website
  • 1:32
    where they could put that information up and share videos and photos
  • 1:37
    and their reviews of all the various things with their friends
  • 1:40
    and have their friends have a voice in that place as well.
  • 1:43
    They've spent some time thinking about what they want,
  • 1:47
    and these are the basic things that we need.
  • 1:49
    First of all, they need to be able to upload images to the site,
  • 1:53
    and we want the images to be nicely formatted
  • 1:58
    so they make sense, so we can have an image that's small in one location
  • 2:02
    but nice and full sized in other locations.
  • 2:05
    That would make sense, so we could have something like a small image
  • 2:11
    in the teaser and then a larger image can display,
  • 2:15
    because we also have the ability to upload video.
  • 2:18
    We want to be able to embed some videos,
  • 2:21
    put them up on YouTube, but we want to be able to get them into the site
  • 2:24
    and not make people go to YouTube to watch all of the videos.
  • 2:28
    And then the other thing that we're looking at in this
  • 2:30
    is making it really easy for people to be able to do these things,
  • 2:34
    because their friends don't know how to write HTML,
  • 2:37
    and nobody is really interested in learning.
  • 2:39
    We want to have a nice, simple form.
  • 2:41
    We want people to be able to select media,
  • 2:44
    and when looking at images they can also potentially reuse other people's images.
  • 2:48
    We have a library of stuff people have already uploaded,
  • 2:52
    and we can use those.
  • 2:55
    And then really important here too is actually to have a WYSIWYG tool bar here,
  • 3:01
    an editor that helps them write HTML
  • 3:04
    without them having to actually know how to write HTML.
  • 3:08
    So how are we going to approach this?
  • 3:10
    Well, for image handling Drupal Core comes with image styles.
  • 3:16
    For our photo uploads in Drupal there have been a lot of different ways to handle
  • 3:21
    working with images for a long time.
  • 3:23
    In Drupal 7 it's sort of zeroed down to using Drupal Core's Image Module,
  • 3:28
    and then there's the Media Module,
  • 3:31
    which handles a lot of things in addition to photos.
  • 3:34
    But these have become the forerunners in how people are working with this stuff.
  • 3:38
    The Image Module you've encountered with Drupal Core's article content type,
  • 3:44
    and it provides images for that content type.
  • 3:48
    The Media Module is a contributed module,
  • 3:51
    and that is going to give us multimedia support,
  • 3:54
    including the photos we want to work with.
  • 3:57
    And as you'll see in this chapter, it was developed specifically
  • 4:00
    to solve this general media management.
  • 4:05
    Instead of having individual modules for different things like images
  • 4:09
    and audio and stuff this is one contributed module package
  • 4:13
    that supports many different media file uploads,
  • 4:17
    images, videos, audio, etc., and it also has a really nice interface
  • 4:21
    for being able to manage and reuse those media assets as well.
  • 4:25
    Now, for posting videos what we want to do is expand Media Module
  • 4:30
    just a little bit more.
  • 4:32
    If you take a look at Media Module, it's a package,
  • 4:35
    and there are a bunch of different modules in there,
  • 4:38
    and there are also ones that allow you to use services on the Web
  • 4:42
    and specifically YouTube.
  • 4:44
    We just need to expand the Media Module
  • 4:48
    a little further than its basics,
  • 4:50
    and we get video handling just like that,
  • 4:52
    which makes it really easy.
  • 4:54
    When it comes to creating these thumbnails,
  • 4:56
    so here's my large image, but if I go back to my home page
  • 5:00
    I have this little thumbnail that's going on in these images here.
  • 5:05
    For that we can use Drupal Core's image styles.
  • 5:09
    We'll use Drupal Core's image styles to define those,
  • 5:13
    and then we're going to hook those up with Media Module,
  • 5:15
    because Media Module also has a lot of settings for how to handle the files that it's in charge of.
  • 5:20
    We're going to make those 2 things work together
  • 5:23
    so that we get exactly the image sizes that we want where we want them.
  • 5:27
    And then for our wonderful little WYSIWYG editor
  • 5:31
    when we go in to create something new
  • 5:33
    and we want this tool bar to appear up here
  • 5:36
    we're going to use the WYSIWYG Module,
  • 5:40
    and then we're going to need to get an editor that we can plug into it.
  • 5:44
    WYSIWYG is a very generic module
  • 5:47
    that provides a framework for working with various WYSIWYG editors,
  • 5:51
    and there are lots of them on the Internet.
  • 5:53
    What we're specifically going to be looking at is using this with the CKEditor
  • 5:57
    and how we get that plugged in, and how do we make the various buttons appear up here
  • 6:03
    so that when someone comes to the site and they want to write something
  • 6:07
    they don't have to figure out HTML?
  • 6:09
    A WYSIWYG editor is going to do it for us.
  • 6:11
    That is what we're looking to build,
  • 6:13
    and it's time to get started and get on the Band Wagon.
  • 6:18
  • 6:22
    [Based on the book Using Drupal, 2nd Edition by Angela Byron, Addison Berry and Bruno De Bondt]

Case Study: Band Wagon


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.