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.

Templates for Content

Video loading...

  • 0:00
    Templates for Content
  • 0:02
    Building Websites Using the Panels Module
  • 0:03
    with Jen Lampton
  • 0:05
    Hello, and welcome back to Drupal and Panels.
  • 0:08
    So far, we've talked about several ways
  • 0:09
    that you can use panels to control the layouts of custom pages
  • 0:12
    on your site.
  • 0:13
    Pages like your home page and landing pages.
  • 0:16
    But sometimes, it's useful to know how
  • 0:18
    you can use panels to control the layouts
  • 0:19
    of existing pages on your site.
  • 0:22
    For example, this website has a bunch
  • 0:24
    of different types of content.
  • 0:26
    Articles, basic pages, blog posts, and if we
  • 0:29
    look at the way those pieces of content are displayed,
  • 0:32
    we've got a sidebar on the left, and the content
  • 0:34
    itself on the right hand side.
  • 0:36
    This is a fairly typical layout of content on a Drupal site.
  • 0:40
    But let's say that our designer came to us with a new layout for the way
  • 0:44
    articles should be displayed, that involved dividing
  • 0:46
    that content area into two columns.
  • 0:49
    We'll have the article itself on the left hand side, with a comment form
  • 0:53
    and the comments on the right.
  • 0:55
    It's pretty easy to do this with panels,
  • 0:56
    but we're going to need to make use of the page manager module.
  • 1:00
    We'll get there by going under the structure section of our menu,
  • 1:03
    to the pages list.
  • 1:05
    This is to show us all the pages that are currently being
  • 1:08
    governed by Page Manager module.
  • 1:11
    You can tell by the ones that are in black that only one of them
  • 1:14
    is currently enabled, and that's the front page we built using panels.
  • 1:18
    In this exercise, we're going to take over the node template
  • 1:21
    to control the way existing nodes, or pieces of content,
  • 1:24
    are shown on our Drupal site.
  • 1:26
    We're going to do that by first enabling this template by clicking
  • 1:29
    the enable link on the right.
  • 1:31
    You'll notice the color will change from gray to black.
  • 1:33
    Then we'll go ahead and edit that template.
  • 1:36
    The first thing you'll notice is that there are
  • 1:38
    no variants provided by default.
  • 1:40
    This means that if we were to look at our articles right now,
  • 1:43
    it would still continue to display the way Drupal
  • 1:45
    would normally have them display.
  • 1:47
    But now, we have the ability to add variants
  • 1:50
    to take advantage of panels.
  • 1:52
    We're going to go ahead and add a new variant here.
  • 1:55
    And the first thing we're going to do is give it the name of Article.
  • 1:59
    We're going to set the variant type to panel,
  • 2:01
    and we're definitely going to provide some selection rules.
  • 2:04
    The selection rules are what are going
  • 2:05
    to allow us to limit this variant to only apply
  • 2:08
    to nodes that are type Article.
  • 2:11
    We'll click create variant, and go ahead
  • 2:13
    and add some selection criteria.
  • 2:15
    In this list, we're going to be looking for node type.
  • 2:18
    And we're going to limit that down to only article.
  • 2:24
    We'll click continue.
  • 2:25
    And on the second step, we get to choose the layout for our panel.
  • 2:28
    Because the layout our designer provided us with
  • 2:31
    is a very straightforward, two column, 50-50 layout,
  • 2:34
    that layout is provided by panels.
  • 2:36
    So we can select that from this interface, and click continue.
  • 2:40
    The next step, the panel settings, is
  • 2:42
    where you would normally choose to hide the sidebar,
  • 2:46
    if you didn't want to see a sidebar.
  • 2:47
    In this case, we do want a sidebar on our articles.
  • 2:49
    So we're going to leave that box unchecked.
  • 2:53
    This is also where we could choose to change the render.
  • 2:55
    So if you thought editors for your site
  • 2:57
    might want to rearrange the location of the comments or the comment
  • 3:00
    form, we could let them change that here, too, by changing the renderer
  • 3:04
    to the In-Place Editor.
  • 3:06
    In this case, it makes more sense to leave it as standard, since these
  • 3:09
    won't be changing very often.
  • 3:11
    So on the second step, we're just going
  • 3:12
    to go ahead and click continue, and go straight ahead
  • 3:15
    to our panel content settings.
  • 3:18
    On panel content, we're going to start
  • 3:20
    by adding the content of our node.
  • 3:22
    So we'll click on the cog wheel, top left hand side of our left side
  • 3:26
    region, and click Add Content.
  • 3:29
    The first thing you'll notice is that, in the list
  • 3:30
    of categories on the left, there's two new ones-- node and node
  • 3:34
  • 3:35
    These are both provided by Page Manager,
  • 3:37
    because we're already using the Node View template.
  • 3:40
    Page manager knows there's a bunch of new stuff
  • 3:42
    it can provide to us, because we're looking at a node.
  • 3:45
    We're going to go ahead and add node content
  • 3:48
    on the left hand side of this page.
  • 3:51
    This is the equivalent of inserting your node.tpl.php
  • 3:54
    file into your panel.
  • 3:55
    But it gives you a bunch of settings,
  • 3:57
    to let you control how you'd like that content to appear.
  • 4:00
    For starters, the most important thing to set on this form
  • 4:03
    is the build mode, down at the very bottom.
  • 4:06
    It's set to teaser by default, but we want to change this
  • 4:08
    to full content, since we're actually looking
  • 4:10
    at the page display of our node.
  • 4:13
    It's also important to uncheck the box to link title to note,
  • 4:17
    since we don't need the title of this node linking
  • 4:19
    to the page we're already on.
  • 4:21
    A couple other things to note is that the links
  • 4:24
    are turned on for our node.
  • 4:25
    This is great if we're using flags or service links.
  • 4:28
    But if you don't want links to appear on your node,
  • 4:31
    you can also turn them off here by unchecking this box.
  • 4:35
    Another box that's checked by default is the no extras box.
  • 4:38
    This will prevent the comments and comment form from coming
  • 4:41
    out in the node area of your page.
  • 4:45
    We're going to click finish to insert this content.
  • 4:47
    And then we're going to go ahead and add the comments
  • 4:49
    and comment form to the right hand side of the page.
  • 4:53
    So again, the comment form is under the node category
  • 4:57
    on the left hand side.
  • 4:58
    And as we insert that, we've got options that'll let us decide
  • 5:01
    how we want that form to appear.
  • 5:04
    We're going to add comments in the same way.
  • 5:06
    It's also in the node category.
  • 5:08
    And when we go to add node comments, it's
  • 5:10
    important to redefine the settings that you may have
  • 5:12
    already defined by content type.
  • 5:15
    That means if we've told article comments to display as a flat list,
  • 5:18
    we'll need to redefine here.
  • 5:20
    The same thing is true for the number of comments
  • 5:22
    you'd like to see per page.
  • 5:24
    They'll not be set correctly by default.
  • 5:27
    We're going to go ahead and click finish.
  • 5:28
    And now we've got our content on the left hand side, our common form,
  • 5:31
    and our comments on the right.
  • 5:33
    So we're going to create the variant, save our changes,
  • 5:38
    and then go and take a look at our article.
  • 5:41
    You should notice that, instantly, you
  • 5:43
    see a display of the article on the left, the comment form,
  • 5:46
    and the comments on the right.
  • 5:48
    But there are some things that are still incorrect.
  • 5:50
    We've got a title of our node displaying
  • 5:53
    twice here on the same page.
  • 5:55
    Once as the page title, and once as the title of the content pane.
  • 5:59
    So we're going to go back and edit this panel,
  • 6:01
    and make sure we turn off the title in the content pane.
  • 6:05
    Structure, pages, edit the node view template.
  • 6:09
    And then we're going to choose the content tab of the article variant.
  • 6:14
    In order to change those settings, you click on the cog wheel
  • 6:17
    at the top right of the content pane, and choose the settings link.
  • 6:22
    The easiest way to remove a title from a content pane
  • 6:25
    is to check the box to override the title,
  • 6:27
    and enter in the Drupal keyword none.
  • 6:29
    This will prevent that title from being displayed on this pane.
  • 6:34
    One thing to note here is that the title for our page
  • 6:37
    is already being provided by our node,
  • 6:39
    so we don't necessarily need to provide something here.
  • 6:42
    But one thing that I like to do, just to keep everything consistent,
  • 6:45
    is to change my panel so that it matches what's actually going on.
  • 6:49
    So under title type, I'm going to change the title here from manually
  • 6:52
    set, to from pane.
  • 6:54
    This should instantly show you that the left side
  • 6:56
    pane, node being cued content, is providing the title for your page.
  • 7:01
    It does that in two ways.
  • 7:03
    It's puts a border around this box, to indicate
  • 7:05
    that this one's more important than the other ones on the page.
  • 7:08
    And also, if you click the cog wheel at the top right,
  • 7:10
    there should be a new item in there that says panel title,
  • 7:13
    and it shows a little check next to it,
  • 7:14
    indicating that this pane is providing
  • 7:16
    the title for your whole page.
  • 7:19
    I'm going to go ahead and update and save this, and take a look
  • 7:22
    at our article content again.
  • 7:25
    Now you can see that we only have one title on our node, which
  • 7:28
    is what we wanted.
  • 7:29
    But before we sign off on this project,
  • 7:31
    it's also good to make sure that this display
  • 7:33
    is not taking over other types of content on our site, as well.
  • 7:36
    So we're going to go to our content list,
  • 7:38
    and check out what a blog looks like.
  • 7:40
    As you can see, we still have the default display
  • 7:43
    of content showing for blogs, meaning we've gotten
  • 7:45
    everything working correctly.
  • 7:47
    So now you've seen how to use panels to take
  • 7:49
    over the display of existing pieces of content on your site.
  • 7:53
    Stay tuned to see how you can use panels to create your own layouts,
  • 7:56
    in case the ones provided for you don't exactly fit your needs.
  • 8:00
    Thanks a lot.

Templates for Content


Drupal site builders have long wanted to rearrange the display of each piece of content. The page manager module provides us with a default node view context we can use to accomplish just this. In this lesson you will learn how to break an article into two columns.

Additional resources:
There are no resources for this video. If you believe there should be, please contact us.