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.

Insert Images into Content

Video loading...

  • 0:00
  • 0:03
    [Insert Images into Content] [with Addison Berry]
  • 0:07
    In addition to having image galleries, album art, or something like that on the site,
  • 0:13
    we also want to be able to put our images inside our content.
  • 0:19
    So for instance in a blog post
  • 0:22
    we might want to have an image inside the blog post.
  • 0:24
    Or the bio page. Maybe we want to put some images of the band in there.
  • 0:29
    Right now by default
  • 0:31
    on the article content type for our blog posts,
  • 0:34
    there is an image field, but it's separate from the body text.
  • 0:38
    So it kind of floats off on its own
  • 0:40
    and we can't really get it inside of that text.
  • 0:43
    And that's a little bit annoying.
  • 0:45
    So in this lesson we're going to take a first pass
  • 0:49
    at getting in-line or embedded images inside of our body field.
  • 0:53
    We're going to use the Insert module for this.
  • 0:57
    It's a very simple, clean, easy way
  • 1:00
    to upload an image and then insert it into our text area.
  • 1:05
    As part of working with this new concept
  • 1:09
    of embedded or in-line images,
  • 1:11
    we're also gonna need to take a look at our text formats on our site
  • 1:15
    because this isn't just a separate image field now.
  • 1:18
    This is dealing with text.
  • 1:20
    And once we start working with text,
  • 1:22
    you always have to take into account text formatting.
  • 1:25
    So we'll take a quick look at what that means
  • 1:29
    and then we'll do our configuration on our site
  • 1:31
    so that we make sure people who are uploading images and putting them in text
  • 1:35
    can do that and actually see them at the end of the day.
  • 1:39
    Because if we don't account for this in our text formats,
  • 1:42
    you're gonna do all this hard work and then nobody's gonna be able to see the images.
  • 1:46
    And that would be a real bummer. So let's take a look at how we're gonna get these things set up.
  • 1:52
    So we're going to be using the contributed module Insert
  • 1:55
    which you can get at
  • 2:01
    and this is going to modify the existing image field widget
  • 2:06
    to make it a little more useful for us to insert our in-line images.
  • 2:09
    It's going to give us something that looks like this.
  • 2:12
    So when I upload an image, say on our article content type,
  • 2:16
    instead of just getting the regular thumbnail and remove,
  • 2:20
    we have this down here.
  • 2:22
    We can select a style,
  • 2:24
    and there's an insert button that will insert it into my text area above,
  • 2:28
    wherever my cursor happens to be.
  • 2:31
    And it will do all of the HTML that's necessary
  • 2:34
    to make that work properly.
  • 2:37
    So we're gonna be adding this button
  • 2:39
    and the ability to pick which image style we actually want to use for that image
  • 2:44
    rather than putting whatever it happens to be directly into our text.
  • 2:49
    So I'm gonna go to my site,
  • 2:51
    and first thing I need to do is enable the Insert module.
  • 2:54
    I've already downloaded it so we just need to get that enabled
  • 2:58
    so we can start working with it.
  • 3:00
  • 3:02
    So now that we have Insert module enabled,
  • 3:04
    the way that we use it is we need to attach it essentially to an image field
  • 3:09
    where we want to be able to use it on our site.
  • 3:12
    So I'm going to add this to the image field that we already have on our article content type.
  • 3:18
    Our articles already have
  • 3:23
    a field for images.
  • 3:25
    If I go to content types
  • 3:27
    and then we go to article and hit manage fields,
  • 3:31
    you'll see this is the image field.
  • 3:33
    It came with Drupal core. We didn't create this or anything.
  • 3:35
    And it's using an image field
  • 3:37
    with an image widget that comes with core.
  • 3:40
    Let's go ahead and edit this.
  • 3:44
    And if you scroll down in the top section here,
  • 3:47
    you'll see this new insert field set.
  • 3:49
    And if we open that up, this is what the Insert module is going to allow us to do.
  • 3:54
    And we can configure it here.
  • 3:56
    So you're gonna configure insert per image field, per content type that you have.
  • 4:03
    We have this image field on this article content type,
  • 4:06
    but remember, it's just creating an image separate, not inside of the body text.
  • 4:11
    We're gonna try and get it inside of the text.
  • 4:14
    So first thing I need to do is actually enable the insert button.
  • 4:17
    I don't want to use absolute paths. We can use relative paths on this site.
  • 4:22
    And then these are the styles in that little drop-down
  • 4:26
    for people to be able to select how they want that image to look once they insert it.
  • 4:31
    And we don't necessarily need to do all of these,
  • 4:34
    but let's just go ahead and do maybe a thumbnail and a medium.
  • 4:39
    That would make sense. And a large.
  • 4:42
    We can select any of these image styles, and of course you can add your own.
  • 4:47
    Original image—you could, but chances are it could be really big.
  • 4:51
    So I'm not gonna bother with that.
  • 4:53
    Large, medium, and thumbnail will probably suffice for within our body text.
  • 4:58
    We can also pick what we want the default to be.
  • 5:01
    So if we always wanted it to be by default thumbnail,
  • 5:04
    if someone doesn't think about it and just inserts it, that's what they're gonna get.
  • 5:07
    And we can add some additional things like CSS classes and the maximum width,
  • 5:13
    but I'm gonna leave those empty, at their defaults.
  • 5:16
    So I'll just scroll down and save the settings for this.
  • 5:19
    So I've now added insert to the image field on our article content type.
  • 5:24
    So if I go to add the content,
  • 5:28
    go to the article,
  • 5:30
    and just create one,
  • 5:36
    now I'll pick my image to upload here.
  • 5:39
    So I'll just pick one of these images.
  • 5:42
    Upload it.
  • 5:44
    And I have my insert. So I can choose which style I want to use here
  • 5:49
    and where I want it to be.
  • 5:51
    Let me pull this up a little bit here.
  • 5:53
    So if I wanted it to be between these two lines of text here, I would do that
  • 5:58
    and I would select the size I want to use—maybe medium.
  • 6:01
    And I'll insert that.
  • 6:03
    Now I get this little popup which is important.
  • 6:06
    You should read this and not just click it away.
  • 6:08
    It's telling me that I'm not gonna actually be able to use the image,
  • 6:12
    I won't be able to display the image,
  • 6:14
    because my text format doesn't allow us to do that.
  • 6:18
    So we'll talk about text formats in a minute.
  • 6:20
    I'm gonna hit OK, but we need to come back and fix this
  • 6:23
    or else it's not gonna work the way that people expect.
  • 6:26
    But you can see here it's put in the HTML
  • 6:30
    with the link and all of the information that I need here
  • 6:33
    into my body text area.
  • 6:36
    So I didn't have to figure it out and type all of that stuff out.
  • 6:38
    So super handy to do that.
  • 6:40
    Let's go ahead and save this and see what it looks like.
  • 6:45
    You can see I have this image.
  • 6:49
    So the image is displaying, but it's displaying at the top
  • 6:53
    and it's not displaying within my actual text.
  • 6:57
    This is the image field that is coming with Drupal core by default.
  • 7:02
    And so again, it's being displayed separately from the body text.
  • 7:06
    It's a field that is above the body text.
  • 7:09
    And the one that I added in here isn't showing up,
  • 7:12
    just like the warning said that it wouldn't.
  • 7:14
    It's not displaying because we don't have our text format set up properly.
  • 7:17
    So we need to fix this content type
  • 7:20
    so that it actually works the way that we would expect it to.
  • 7:24
    The first thing is I don't want the image to appear in this individual field sitting on top.
  • 7:29
    So I'm gonna change the content type to remove that,
  • 7:32
    and then we're gonna fix our text formats.
  • 7:35
    So I'm gonna go back to structure, content types,
  • 7:37
    and on the article content type
  • 7:40
    what we want to do is manage the display.
  • 7:43
    And I don't want the image field to show,
  • 7:47
    because we're just gonna use insert for that.
  • 7:49
    So I'm actually gonna pull this down and hide it, and save that.
  • 7:52
    And then let's go ahead and do the same thing for the teaser,
  • 7:55
    because this is just for the full node and the others,
  • 7:58
    but teaser has its own display settings.
  • 8:00
    So we'll go to teaser and we're gonna do the same thing.
  • 8:03
    I don't want the image to be up there in the teaser. And save that.
  • 8:09
    So when I do that, that gets rid of that image field displaying.
  • 8:12
    And now we just need to get the image to actually show up where I wanted it to.
  • 8:16
    We need to change our text format.
  • 8:18
    If you go to configuration,
  • 8:20
    text formats—
  • 8:22
    If you're not familiar with text formats, I'm not gonna get into great detail.
  • 8:26
    But we do have other lessons that get into much more detail about text formats
  • 8:31
    if you're not familiar with them already.
  • 8:33
    I'm just gonna walk you through the basics of what we need to do to accomplish our task here.
  • 8:36
    These are the ones that come with core, and filtered HTML is the default.
  • 8:40
    And if I look at the configuration for this,
  • 8:42
    under the HTML tags that are allowed
  • 8:45
    there is no image tag.
  • 8:47
    And that's the reason we're not seeing that display. It's getting stripped out.
  • 8:51
    I could change that to full HTML on my node, and then the image would display.
  • 8:57
    But allowing people to have full HTML could also be a security risk.
  • 9:01
    That's the reason it's not in the filtered HTML.
  • 9:04
    So it depends on who's using your site and how much you trust them.
  • 9:08
    A really good option though is to create your own custom text format that does what you need it to do
  • 9:13
    and then you can let people use that.
  • 9:16
    So that's what I'm gonna do. I'm gonna create a new text format that will accomplish our goals
  • 9:20
    so I don't mess around with permissions and things.
  • 9:23
    So I'm gonna go back to text formats
  • 9:25
    and I'm gonna create a new text format.
  • 9:28
    So I'm gonna call this "Editors"
  • 9:30
    because this is for people who are allowed to edit on the site
  • 9:33
    but not necessarily everybody on the planet should be able to embed HTML images everywhere.
  • 9:39
    So we're gonna call it "Editors."
  • 9:41
    And you'll see that it already has administrator checked off.
  • 9:45
    So we'll let them be able to use this but we don't want necessarily anonymous or authenticated people,
  • 9:50
    because we're gonna be adding in additional tags here.
  • 9:53
    They can use filtered HTML. That's what that's for.
  • 9:56
    I need to enable the filters that are gonna be used in this format.
  • 9:59
    I do still want to limit HTML tags.
  • 10:02
    I just want to change what that list of HTML tags is.
  • 10:06
    I don't want to strip it to plain text. That would defeat the entire purpose.
  • 10:10
    So we'll do line breaks, URLs,
  • 10:14
    and faulty and chopped off HTML.
  • 10:16
    Right now this is identical to the filtered HTML format.
  • 10:21
    You'll notice we have this Media tags.
  • 10:23
    That's being added by the Media module.
  • 10:26
    It's just a filter that it provides in case you want to use it.
  • 10:28
    We don't need it right now, but we will definitely be taking a look at that later on in the series.
  • 10:33
    So I have my filters checked off.
  • 10:35
    And as I said, this is the same as filtered HTML
  • 10:37
    except I'm going to change the allowed HTML tag list.
  • 10:41
    And I could add all kinds of tags in here if I wanted.
  • 10:43
    People could use H2s and H3s, and that kind of a thing.
  • 10:47
    For right now, we're just gonna zero in on what we're looking at
  • 10:50
    that we need, which is the image tag.
  • 10:52
    So I'm gonna add the image tag to this list.
  • 10:57
    And then I will save it.
  • 10:59
    So if we look at our text formats,
  • 11:01
    we now have editors, filtered, and full.
  • 11:03
    So let's go back to our piece of content. Let me close this out.
  • 11:09
    And we'll edit.
  • 11:11
    And now in this text format list,
  • 11:13
    because I have the right permissions—
  • 11:15
    I gotta have the right role that has access to this—
  • 11:18
    editors is now a format that I can select.
  • 11:21
    So I'm gonna select that
  • 11:23
    and save this, and see what happens now.
  • 11:26
    And now my image is actually showing up
  • 11:28
    where I wanted it to.
  • 11:31
    And in terms of positioning, having things wrap around, and stuff like that,
  • 11:36
    I could go in and edit the HTML to make things float,
  • 11:40
    or I could use CSS to say when images are inside body text, they would float to the left or something like that.
  • 11:45
    But the point here is that I can actually insert the image inside of my body text
  • 11:50
    and I've removed it from floating up above separate from the body text.
  • 11:54
    And this was just using Insert module to simplify the process a little bit
  • 11:59
    in terms of not having to figure out the HTML that needed to be written.
  • 12:03
    And then once we did that, we also had to play around with our text formats
  • 12:07
    to make sure that images actually display.
  • 12:10

Insert Images into Content


Aside from things like photo galleries or images for albums, our content creators on the site are going to want to be able to add images to blog posts and do things like put a bio picture on the bio page. The article content type already has an image field, but that doesn't help us very much with getting that image inside the body of our content. In this lesson we're going to add in-line images using the Insert module.

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: