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.

Create Image Galleries

Video loading...

  • 0:00
    [Working With the Media Module in Drupal 7]
  • 0:03
    [Create Image Galleries] [with Addison Berry]
  • 0:08
    One of the main features that we need on this site is the ability to create image galleries.
  • 0:14
    We want the band to be able to decide when they want a new gallery
  • 0:17
    and then upload whatever images belong to that gallery.
  • 0:21
    The way we're going to accomplish that on this site
  • 0:24
    is by creating a content type for galleries so that each gallery
  • 0:29
    is its own individual node
  • 0:31
    and all of the images in the gallery are fields on that node
  • 0:35
    so they can just keep uploading images, and then that just defines what the gallery is.
  • 0:41
    It's a really simple way for our people who are creating the galleries to have to deal with them
  • 0:46
    without having to figure out all these different pieces that are involved.
  • 0:50
    And it's actually pretty simple for us to build as well.
  • 0:54
    So in this lesson, we're going to go ahead and start off
  • 0:58
    by reviewing the modules that we're going to enable for this,
  • 1:01
    in particular media module and its dependencies.
  • 1:06
    Then we're going to create the image gallery content type.
  • 1:10
    So we'll have a title and a body.
  • 1:12
    And then we're going to have a whole bunch of image fields so that they can upload all the images that they need
  • 1:18
    to just the one node.
  • 1:20
    Once we have that, we'll go ahead and create an image gallery so we can sort of see what it looks like
  • 1:25
    and actually have some real live content on our site to play with.
  • 1:29
    So let's go ahead and get ourselves some image galleries on the site.
  • 1:34
    So let's take a quick look at what our target goal here is.
  • 1:38
    So in the finished demo site that I've created,
  • 1:42
    we have this Photo Galleries section of the site
  • 1:45
    which you can see in the menu item here as well,
  • 1:49
    and we have a couple of galleries.
  • 1:51
    Specifically what we're going to be starting with in this lesson
  • 1:56
    is creating the actual gallery—individual gallery—nodes.
  • 2:00
    So this is a gallery, what it looks like.
  • 2:03
    You can see we have a large image here. We have a little slideshow kind of a thing going on underneath,
  • 2:08
    so I can switch between the images, and that swaps it out in the main viewing area for me here as well.
  • 2:13
    There's more images we can go to.
  • 2:18
    And then there's this magnifying glass on the image itself.
  • 2:21
    So if I click on that, that pops open this full size image for me to look at.
  • 2:27
    So this is what we're ultimately shooting for.
  • 2:32
    Before we can get to this fancy stuff here,
  • 2:36
    what we want to do is just be able to create a gallery in a node
  • 2:41
    because all of these images are associated
  • 2:44
    with just this individual piece of content we've created.
  • 2:49
    If I edit this,
  • 2:52
    you'll see that we have just a regular node with a bunch of images attached to it.
  • 2:57
    So that's the first thing that we need to do before we can even get fancy with things.
  • 3:01
    So let me go back over.
  • 3:03
    This is the site we're actually building.
  • 3:05
    It doesn't have any of this fun stuff on here yet.
  • 3:08
    And the first thing we're going to need to do is enable some modules.
  • 3:13
    So if I go over to Modules, and I'm going to collapse a bunch of these things that we don't need
  • 3:18
    because I want to look at this Media section.
  • 3:21
    We're going to be enabling the Media module to create the gallery.
  • 3:26
    The reason we want to use the Media module for this is we're going to create a node that has a lot of image fields on it,
  • 3:31
    and we want people to be to use that media browser to find images
  • 3:36
    or reuse existing images that are already on the site, that kind of thing.
  • 3:40
    So we're going to need Media module to get that Media browser.
  • 3:44
    Now when we enable Media,
  • 3:47
    you'll see under here we have some requirements
  • 3:51
    for File entity and for Chaos tools.
  • 3:54
    Now with File entity, it's right here, it's still part of this whole package,
  • 3:58
    so I could just check that off.
  • 4:00
    Chaos tools, I can go up and I can find that.
  • 4:02
    Do keep in mind that Drupal will enable modules that you need as long as they are actually installed.
  • 4:07
    So I already have all of these on my site. I just haven't enabled them yet.
  • 4:12
    So I'm just going to go ahead and select Media, File Entity because it's there,
  • 4:15
    and Save Configuration.
  • 4:19
    It tells me I also need Chaos tools which I do have,
  • 4:23
    and yeah, I will go ahead and enable that too.
  • 4:27
    So we now have the modules that we need in place to get the media browser
  • 4:31
    that we're going to want to use on our image field.
  • 4:33
    Let's actually go create our content type for the galleries.
  • 4:37
    So go to Structure, Content Types, and we're going to add a new content type here,
  • 4:42
    and we're going to call this Gallery.
  • 4:45
    And we can go ahead and just leave the rest of these settings,
  • 4:48
    and I want to add my fields.
  • 4:52
    So we have the title and the body, so the body would be our description that we have for that.
  • 4:57
    If we wanted, we could edit and call the label for that description
  • 5:00
    but title and body works fine for me.
  • 5:03
    What I'm mostly focused on here now is adding image files to this node.
  • 5:07
    So I want to add a new field called Images.
  • 5:12
    And what we're going to do for this is we're going to create an image field
  • 5:20
    and this comes with Drupal core.
  • 5:22
    And the widget that we're going to use—
  • 5:24
    the image is the widget, the upload widget,
  • 5:27
    the people would interface with to upload the images. That's what comes with core.
  • 5:31
    But instead, we want to pick the Media File Selector.
  • 5:33
    That's our media module's browser that we have.
  • 5:36
    So I'll pick Media File Selector,
  • 5:40
    hit save.
  • 5:43
    Now this is just asking me where I want to save those files.
  • 5:46
    We can save them Public. We don't need to keep this in a private directory or anything.
  • 5:50
    And we could select a default image.
  • 5:53
    If somebody doesn't upload something, put a default in there.
  • 5:55
    That doesn't make sense on a gallery. If you don't have an image, you don't have a gallery.
  • 5:59
    So we'll save those field settings as they are.
  • 6:03
    We have our standard image file settings that we can choose here
  • 6:07
    like the file extensions that are allowed.
  • 6:10
    Allowed URI schemes, so this is something that media module wants to know
  • 6:16
    where can someone have images coming from.
  • 6:20
    Now these are both local to my server.
  • 6:23
    In the future, we can see you can also add external services here.
  • 6:27
    And we're not using private files, so I can uncheck that.
  • 6:30
    You could leave it be, it doesn't matter.
  • 6:33
    But I really just want these to stay public. I don't need these to be in private.
  • 6:36
    Now for file directory, we just have our general File directory on our site.
  • 6:42
    And what I can do is create a new subdirectory in our files folder
  • 6:47
    just for the images that are associated with this content type. So that's kind of nice.
  • 6:52
    So I'm just going to go ahead and create a galleries directory here.
  • 6:56
    You just type in the word. You don't need a slash at the beginning or anything like that.
  • 6:59
    And this will create a galleries folder inside our site files folder.
  • 7:04
    And again, I can put limitations on the images that are being uploaded and such like that.
  • 7:08
    I'm going to leave all this be, and then I'm just going to go ahead and save it.
  • 7:13
    Now the one thing that I've done here though is I—
  • 7:16
    so I've added an image field, and if we go to Add content
  • 7:20
    and I Create a Gallery, you'll see that I can select this,
  • 7:25
    but I can only add one image and a gallery with one image is kind of silly.
  • 7:30
    So if I go back to Structure, Content Types, and I manage my fields
  • 7:37
    and edit this image field,
  • 7:41
    down here under number of values,
  • 7:44
    I want to make sure that I go ahead and set this to unlimited
  • 7:47
    so that people can upload as many images as they want to.
  • 7:52
    So when I save the settings for that,
  • 7:54
    and now Add content,
  • 7:59
    you'll see I have an Add another item button,
  • 8:01
    and that's how I'll be able to upload multiple images, just using one field.
  • 8:04
    I don't have to add an individual field for each of the images I want.
  • 8:08
    So let's go ahead and actually create a gallery here.
  • 8:14
    And you'll notice down here for images, I can select Media.
  • 8:17
    And when I open that up, I'm getting that media browser rather than just a regular upload form field as it were.
  • 8:23
    So let me go ahead and start picking some stuff here.
  • 8:27
    We've got robots.
  • 8:35
    And I can just keep adding items that I need.
  • 8:38
    So I'm going to put a bunch of them in here just so that we have an actual gallery
  • 8:42
    versus just one image or something like that.
  • 8:49
    So once I have all of my images in here, I'll go ahead and save it.
  • 8:54
    And you can see we have a whole bunch of robot photos going on.
  • 8:59
    So that's my gallery.
  • 9:02
    It doesn't look great in particular,
  • 9:06
    but we will get to cleaning that up.
  • 9:08
    But at least I have a gallery content type
  • 9:11
    and I have all of the images associated with it.
  • 9:15
    So now it's just a matter of cleaning it up and making it look the way that I want to look.
  • 9:21
    But there we go.
  • 9:23
    So we have our content type created, and we added one image field using the media browser widget,
  • 9:28
    and we uploaded a whole bunch of images by setting it
  • 9:31
    so that that field was allowed to have unlimited additions added to it.
  • 9:38
    [drupalize me]

Create Image Galleries


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.

Log in or sign up to download companion files.
Additional resources: