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.

Display Suite Fields

Video loading...

  • 0:01
    Display Suite for Drupal 7 Fields
  • 0:04
    with Kristof De Jaeger
  • 0:05
    Hi, this is part three of the display
  • 0:07
    suite from Drupal 7 video series.
  • 0:10
    In this part, I will talk about fields, and especially
  • 0:15
    in the Display Suite fields.
  • 0:16
    So if you have installed Display Suite,
  • 0:19
    then there is a menu item here called Fields.
  • 0:23
    And if you click on it, then you can manage all kinds of fields.
  • 0:31
    Add a field is a custom field, you have
  • 0:34
    dynamic fields, you a preprocess field, and a block field.
  • 0:38
    So important to know is that fields from Display Suite
  • 0:44
    are not related with fields API.
  • 0:47
    There are some sort of a way to add content to entities.
  • 0:55
    On an easy way, they don't get any input, they just display stuff.
  • 1:04
    And in this part of the video, I will show you
  • 1:07
    what sort of display it can have.
  • 1:13
    So I've already told you, you can add and manage those fields
  • 1:18
    through Display Suite layout.
  • 1:21
    But you can-- sorry, fields-- but you can also,
  • 1:25
    if you are managing a layout for, let's say this is the article
  • 1:30
    teaser, at the bottom of the screen is a vertical tap here called,
  • 1:36
    Add Custom Fields-- with the same links, but now in buttons.
  • 1:41
    So I'm going to use this screen all the time.
  • 1:45
    They're going to present the same form over again,
  • 1:49
    and they present the same form, sorry.
  • 1:52
    So it doesn't matter where you add those fields.
  • 1:55
    So that's great.
  • 1:57
    A custom field-- so if you create a custom field, you give it a label.
  • 2:02
    So let's say Custom Display Field.
  • 2:07
    I will attach it to a node-- a node entity.
  • 2:12
    And this part is the important part.
  • 2:14
    So you can now give it the code that it has to display.
  • 2:19
    This can just be some text, so if I say, this is some text.
  • 2:24
    Then the field will output text.
  • 2:27
    But you can also use PHP code.
  • 2:30
    And the cool thing about this is that there
  • 2:34
    is a new input format, the text format, that
  • 2:38
    comes installed in Display Suite.
  • 2:43
    It's called Display Suite Code.
  • 2:45
    And the important part is that in the PHP
  • 2:50
    that you can right over here, the entity object is available.
  • 2:54
    So that means that when the field-- when a node is rendered,
  • 2:59
    for instance, the node object is going to be passed to the function
  • 3:03
    internally, and you can use anything from that object.
  • 3:06
    So let's create a field that says, Type of Node.
  • 3:16
    And then just do here, print entity type.
  • 3:22
    So that's it.
  • 3:23
    You can also use tokens, in case the token module is installed.
  • 3:27
    So it's your choice.
  • 3:31
    So you click on Save, the Manage screen will be reloaded.
  • 3:36
    And there's a new field available here, a custom display field,
  • 3:40
    that you can now drag and drop around.
  • 3:43
    So let's move it into the header.
  • 3:46
    Let's save my screen.
  • 3:51
    And this is my individual article.
  • 3:54
    I'm going to reload.
  • 3:56
    And then you can see here, this is a type of node article.
  • 4:00
    So this is actually the node type.
  • 4:03
    And so this is one way to add new custom display fields onto objects.
  • 4:10
    So let's go back over here, and remove that one.
  • 4:17
    So that's a custom field.
  • 4:19
    So if I would go to Display Suite fields,
  • 4:22
    then you can see this field is listed here.
  • 4:25
    I can edit it, of course, and you can also delete it.
  • 4:31
    So let me go back to my layout, manage display,
  • 4:38
    and let's add a block field.
  • 4:40
    In a block field-- the name itself is pretty straightforward,
  • 4:43
    I think-- gives the ability to create
  • 4:48
    a field that will display a block.
  • 4:50
    So all the blocks that are available here in the Drupal system,
  • 4:54
    you can select them here.
  • 4:55
    So let's take Who's Online.
  • 5:01
    You can choose how you're going to render it--
  • 5:05
    it can be rendered through the block template,
  • 5:06
    you can just use block title this content,
  • 5:09
    or only show the block content.
  • 5:10
    So again, let's choose node here, render it to the block template,
  • 5:15
    save it again.
  • 5:17
    And now do we have a new field called a block field?
  • 5:21
    And let's put that one here.
  • 5:24
    I'll look in the right region above the body.
  • 5:31
    Reload my screen.
  • 5:33
    And there you go, here's the block field I added easily into my nodes.
  • 5:41
    So that's a block field.
  • 5:43
    Again, I'm going to disable this one, and show you another field.
  • 5:49
    So I've showed you already custom fields and block fields.
  • 5:53
    There's also a prepreprocess field.
  • 5:57
    This one is a little bit cryptic, and it's
  • 5:58
    not going to be used a lot.
  • 6:00
    But any variable that's available on the variables one
  • 6:05
    when theming layer it run in Drupal, and there
  • 6:11
    are variables available there.
  • 6:13
    And you can access them with Display Suite easily.
  • 6:17
    So for instance, on the node there is
  • 6:19
    a variable that's called, No URL.
  • 6:24
    So let's save it.
  • 6:29
    And let's put this one, for instance,
  • 6:33
    on the left above the image.
  • 6:38
    So while Drupal is rendering, there's
  • 6:39
    a lot of variables available there.
  • 6:42
    And now it's also available right here.
  • 6:45
    So here's node four, that's node URL.
  • 6:47
    There are other variables on all kinds of entities.
  • 6:51
    There are modules which are adding a lot of preprocess stuff on it,
  • 6:56
    and you can easily access them now, with the Display Suite,
  • 6:59
    and [? render ?] them around where you like.
  • 7:01
    It's not something that will be used a lot, I think,
  • 7:04
    but it's handy sometimes.
  • 7:06
    So that was a preprocess field.
  • 7:09
    And now let's show you the most crazy one, that's a dynamic field.
  • 7:15
    So let's just create a dynamic field.
  • 7:20
    Let's put in a node, and save it.
  • 7:23
    So the display of this one is going to configured at somewhere else.
  • 7:26
    So let's create the dynamic field.
  • 7:29
    And let's put this one-- instead of the body, for instance--
  • 7:37
    so let's move the body away.
  • 7:40
    So now this field is over here.
  • 7:43
    So first of all, let me just save it.
  • 7:45
    And so there you go, there's a dynamic field.
  • 7:49
    If I'm going to reload my node-- and the body
  • 7:52
    is gone, of course-- and dynamic field here, there's nothing here.
  • 7:56
    That's because we have to configure it.
  • 7:58
    So right here, there's a check box called Show Title,
  • 8:06
    and there's a Title wrapper.
  • 8:07
    But the content, and that's the most important one
  • 8:10
    here, that's configured over here.
  • 8:11
    So you just go to Select Content, and then you
  • 8:15
    have all kinds of content stuff that you can display here.
  • 8:20
    So the node context is passed on, so I
  • 8:24
    can actually go and select a node body over here,
  • 8:27
    but there's all kinds of stuff.
  • 8:29
    There's activity-- so there was our blocks-- can use forms,
  • 8:33
    you can add menus.
  • 8:36
    So for people who are familiar with ctools package and panels,
  • 8:41
    this is more or less the same screen that you know from there.
  • 8:46
    And that's available now for this dynamic field.
  • 8:51
    So let's take the node body, push Finish, and then here update.
  • 8:59
    And then the summary will tell you indeed its type body.
  • 9:03
    Let's save this, go back, and there's the body again.
  • 9:11
    So dynamic fields are really powerful.
  • 9:13
    In case you have views installed, for instance, then let's go
  • 9:18
    back to Edit, let's go to cancel.
  • 9:20
    I can now go back to something else.
  • 9:22
    In case views is installed, then you can also install the content
  • 9:27
    field panes, and you can use views, and do a lot of custom stuff
  • 9:32
    in here.
  • 9:34
    But this is more or less also more interesting for blocks, I think.
  • 9:38
    I mean you can just create a couple of dynamic fields,
  • 9:41
    and the good part is, is let's say let's use this one.
  • 9:49
    So this is now going to type as User-online.
  • 9:54
    Let's save it.
  • 9:59
    And there's the User-online.
  • 10:01
    So why is dynamic field a really powerful one?
  • 10:05
    This is the default layout for an article on teaser.
  • 10:10
    The dynamic field is also available, but it
  • 10:14
    can have another type of content.
  • 10:18
    So on the default, here, it's showing the User-online block.
  • 10:21
    On the teaser, we can easily say to drop in the menu.
  • 10:27
    So that's the power of the dynamic field,
  • 10:30
    because it can display all kinds of stuff in all kinds of contexts.
  • 10:36
    So cool part about Display Suite fields
  • 10:39
    is you can, indeed, manage it through the user interface,
  • 10:43
    but you can also implement hooks if you're a module developer.
  • 10:49
    And all those fields are also exportable.
  • 10:52
    But that's for another screencast, and then I
  • 10:55
    think it's part 11 or so.
  • 10:58
    So that's a bit about fields.
  • 11:00
    See you in another screencast.
Loading ...

Display Suite Fields


In this lesson we cover adding different type of custom fields to your layout using Display Suite. From adding a custom code field, blocks, to dynamic fields, each of these can be moved around your layout and replicated/modified across different display modes.

Additional resources: