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.

Configuring a Layout in Display Suite

Video loading...

  • 0:01
    Display Suite for Drupal 7 Configuring a Layout
  • 0:03
    with Kristof De Jaeger
  • 0:04
  • 0:05
    Welcome back.
  • 0:05
    This is part two of the Display Suite for Drupal 7 videos.
  • 0:10
    And in this one, I'm going to show you how you
  • 0:12
    actually configure a node article.
  • 0:16
    So I'm going to first style an individual node.
  • 0:21
    So as you can see, this is Drupal core, my default.
  • 0:24
    And I have an image, I have some body text,
  • 0:28
    and I have added some tags.
  • 0:31
    So I now want to use Display Suite to make this a little bit more
  • 0:35
  • 0:36
    So we can go to Layout, and you can actually
  • 0:42
    click here on Manage display.
  • 0:44
    So this is one way to go to the Manage display of your article.
  • 0:47
    You can also go to Structure, Content types.
  • 0:52
    And as you can see here, this article, manage fields,
  • 0:55
    and there's also manage display.
  • 0:57
    So this goes through the same screen.
  • 1:00
    It's just faster if you use Display Suite Layout.
  • 1:03
    As you can see here, this is the default styling a node article.
  • 1:09
    And as you can see, you have Image, Body, and Tags.
  • 1:12
    And that's basically the only thing that you can do.
  • 1:15
    And what Display Suite adds right now
  • 1:17
    is the ability to select a layout and start managing that layout.
  • 1:26
    So as you can see, Display Suite comes with some predefined layouts,
  • 1:32
    and those are template files, which you can override if you like.
  • 1:38
    But most of them are already interesting enough to use.
  • 1:42
    So let me select a two column stacked layout and save it.
  • 1:48
    So what happens now is that [INAUDIBLE]
  • 1:51
    screen will change a bit.
  • 1:53
    And as you can see here, you have now a Header,
  • 1:55
    Left, Right, and Footer region.
  • 1:58
    There's also more fields available.
  • 2:00
    You can, for instance, drag the title around.
  • 2:03
    You have links.
  • 2:04
    You can put on a read more.
  • 2:06
    So Display Suite not only enables you
  • 2:09
    to use layouts on any sort of entity,
  • 2:15
    it also gives you more fields.
  • 2:18
    It's also possible to add more fields,
  • 2:20
    but that's for another video.
  • 2:21
    So let me just move some stuff around.
  • 2:25
    So you can use this region select box if you just use Left,
  • 2:31
    and you will see that the image goes into the left.
  • 2:37
    So you can also just drag.
  • 2:38
    And let's put the Body on the right.
  • 2:40
    And let's see.
  • 2:42
    Comments can go into the Footer again.
  • 2:45
    And, well, let's just put the Author and the Post date
  • 2:53
    into the Header region.
  • 2:55
    So that's it.
  • 2:57
    Let's just to save this.
  • 3:01
    And that's it.
  • 3:02
    Now I have configured a article.
  • 3:05
    So let me go back to my article here.
  • 3:08
    And as you can see, it's not really pretty, as in there's
  • 3:12
    no CSS styling on it right now.
  • 3:14
    But as you can see, this is the user name, this is the date,
  • 3:17
    this is the image, and this is the body.
  • 3:20
    So I can go back to my Layout, Manage display.
  • 3:28
    And I can make the image a little bit smaller.
  • 3:33
    Let's say Medium.
  • 3:36
    So let's save this again.
  • 3:39
    I should open two tabs.
  • 3:41
  • 3:42
    Let me go back to my individual node.
  • 3:44
    As you can see, it's now a little bit smaller.
  • 3:46
    And if I inspect the element, then you will see right
  • 3:50
    here that there are four regions.
  • 3:53
    There's group header, left, right, and footer.
  • 3:56
    So this is really cool.
  • 3:57
    And this is now for the individual article node,
  • 4:02
    so this is the default one.
  • 4:04
    Now, you can add styles to your regions, if you like.
  • 4:11
    So I'm going to open up in another tab so I can do this.
  • 4:16
    So if you go to the bottom, there's a vertical tab
  • 4:23
    right here that says "You have not defined any styles
  • 4:26
    which can be used on regions."
  • 4:28
    So if you click on that link, you can add new classes that you
  • 4:31
    can use here on your region.
  • 4:32
    So class-1.
  • 4:36
    And you can also give it a friendly name, so Class number one.
  • 4:42
    And class-2, Class number two.
  • 4:47
    Save configuration.
  • 4:50
    And you're all automatically directed right here back.
  • 4:54
    So as you can see now here, there's four regions
  • 4:58
    that we have in our layout and we can add classes to it.
  • 5:01
    So I'm just going to add a class to the header, and one on the left.
  • 5:07
    And let's just do those two on the right one.
  • 5:14
    So I've saved my settings.
  • 5:15
    I'm going to reload my screen.
  • 5:18
    I will have to inspect the element to show
  • 5:20
    you what happened because I haven't really added any styling on it.
  • 5:24
    But as you can see here, you have now
  • 5:26
    a group header, class-1, class-2.
  • 5:28
    And this one has the two classes, which is really cool.
  • 5:31
    So there's also another option on the layout.
  • 5:37
    So you can go to the bottom and just select layout again.
  • 5:42
    There's two options here.
  • 5:44
    There's the Hide empty regions.
  • 5:46
    The Hide empty regions check box will allow you to make sure
  • 5:54
    that if there's any region in your template,
  • 5:57
    so in the layout, that is going to be empty-- so for instance,
  • 6:00
    say that if the body right here does not have any value in it,
  • 6:05
    it will collapse.
  • 6:06
    So this is great.
  • 6:07
    I don't have any example right here, but it works.
  • 6:10
    So you can use that one.
  • 6:11
    The example that works though is disable
  • 6:14
    the Drupal blocks or regions.
  • 6:16
    So if I take toggle this check box and click on Save,
  • 6:22
    if I go back to my article right here, as you can see here,
  • 6:25
    now I have two blocks in my left region, which are for my team.
  • 6:29
    If I reload my screen, then those blocks are gone.
  • 6:33
    So that's a really handy feature for it.
  • 6:39
    Something else that I want to show you is the title.
  • 6:42
    So I'm going to drag Title into the Header.
  • 6:45
    And Title is a really special field that's made
  • 6:49
    available through Display Suite.
  • 6:51
    It actually has the possibility to say [INAUDIBLE] the title
  • 6:54
    or not to the exact node.
  • 6:57
    You can give it another wrapper, so some people want just the p text.
  • 7:01
    Some people don't want anything.
  • 7:03
    And you can give it a class.
  • 7:06
    Now, I'm not going to use this right here.
  • 7:07
    I'm going to move this again back to Disable.
  • 7:12
    So I'm not going to show that field in the default one.
  • 7:17
    Now the last thing that I want to show you
  • 7:22
    here is that you can actually clone layouts.
  • 7:27
    Let me go back to my individual node.
  • 7:30
    As you can see, my teasers are still styled by Drupal core right now.
  • 7:38
    So let me go to the Teaser view mode.
  • 7:41
    So those view modes are actually from Drupal core.
  • 7:44
    It's not that I have something to do with that-- or Display Suite,
  • 7:48
    I'm sorry.
  • 7:50
    What I want to do is style the teaser.
  • 7:52
    And as you can see here, you can clone
  • 7:54
    a layout from an existing one.
  • 7:56
    So we have already created Node, Article, Default.
  • 8:00
    So let's clone it, and we have the exact configuration, which is fun.
  • 8:07
    But at this point, I only want to use an image on the left.
  • 8:16
    Let's remove the Footer.
  • 8:20
    Let's also style the image a little bit less.
  • 8:29
    And the summary is actually good.
  • 8:32
    Now as you can see, I'm still using the stacked layout, so
  • 8:35
    Header and Footer here.
  • 8:37
    And I can actually use the Hide empty regions check box.
  • 8:41
    I'm going to disable Drupal blocks and regions
  • 8:43
    because [INAUDIBLE] I still want to have my blocks on the left.
  • 8:47
    So I've now configured teaser.
  • 8:49
    If I reload to screen, then you can see that the image is on the left
  • 8:55
    and my body's on the right.
  • 8:56
    I'm going to add the title on it.
  • 9:00
    So let's put the Title above the Image,
  • 9:06
    and actually let it link to the node itself.
  • 9:16
    So let's reload.
  • 9:18
    As you can see, this is now going to my individual article.
  • 9:23
    Also I've toggled the disable empty regions check box.
  • 9:28
    And as you can see right here, there's
  • 9:31
    only a group-left and a group-right which, is really, really handy.
  • 9:39
    Another cool thing that I wanted to show you is I'm
  • 9:42
    going to go to my individual article right now,
  • 9:46
    and I'm going to upload another image.
  • 9:53
    And let's say I don't really have other nice pictures
  • 9:59
    of Harry Potter, but let's take something from DrupalCon, maybe.
  • 10:05
    Here's the group picture from DrupalCon Washington.
  • 10:08
    So that's one picture.
  • 10:10
    Let's add another one.
  • 10:13
    Let's see.
  • 10:15
    So this is another nice picture from DrupalCon.
  • 10:20
    Let's save it.
  • 10:21
    And what now will happen is that I've gotten out three images
  • 10:25
    right here, which is annoying.
  • 10:26
    If I go into the front page, I also have three
  • 10:30
    images, which are, well, now small.
  • 10:32
    Now, for a teaser list, you probably only want to show one.
  • 10:36
    So this is new in the latest release of Display Suite.
  • 10:40
    Right here at the image, there's a little text field
  • 10:43
    in which you can enter a number.
  • 10:45
    So if I enter one here, and save my screen, go back to my article,
  • 10:54
    then the image field will actually only show one image,
  • 10:58
    which is really, really handy.
  • 11:01
    And it used to be creating new formatters in Drupal 6
  • 11:07
    and also in Drupal 7.
  • 11:08
    This is now gone.
  • 11:09
    You can use Display Suite to limit multiple value fields.
  • 11:13
    So that's about it a bit.
  • 11:19
    I want to talk you and show you one thing.
  • 11:21
    So Display Suite comes with predefined layouts.
  • 11:25
    You can create layouts in your module with a hook.
  • 11:29
    If you're a teamer, you can also add a layout in your team folder.
  • 11:34
    All this information is available in a file called
  • 11:38
    ds.api.php in the module package.
  • 11:42
    And for people who are used to Drush,
  • 11:44
    you can also use a Drush command.
  • 11:49
    You have to be in your Drupal installation.
  • 11:53
    And then you can just say drush help ds-build.
  • 11:59
    And as you can see here, it gives you a nice example.
  • 12:05
    So let's say drush ds-build "My template".
  • 12:09
    And let's create some regions as well.
  • 12:12
    regions="Region 1, Region 2".
  • 12:21
    And there's now a new template file available.
  • 12:26
    So as you can see, it creates an inc file,
  • 12:30
    which is a configuration which will be picked up by Display Suite.
  • 12:36
    And there's also a template file.
  • 12:38
    So the regions are actually filled in right here.
  • 12:43
    So you can see here, this is region 1, which is cool.
  • 12:46
    And let's now move this template file to my bartik team.
  • 12:52
    Actually, this is not good.
  • 12:55
    I have to create a subfolder called ds_layouts.
  • 12:59
    And let's move my template to ds_layouts.
  • 13:03
    Now, if I go back to my manage display screen here,
  • 13:09
    then my template is now available.
  • 13:12
    It's quite easy and quite fast to create templates if you like.
  • 13:19
    So that's part two of the Display Suite for Drupal 7 videos
  • 13:23
    in which you have seen how you can easily manage the layout
  • 13:30
    of a single article or a teaser.
  • 13:33
    It works on any entity in your Drupal installation.
  • 13:36
    Thanks for watching and see you in the next video.
Loading ...

Configuring a Layout in Display Suite


In this lesson we cover the basics of using Display Suite to modify the layout of a particular content type. We cover all the potential templates, adding classes to regions, and lots of configurations to set to taylor the layout to your needs. We also discuss how you can create your own template files and layouts for your own customizations.

Additional resources: