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.

Field templates

Video loading...

  • 0:00
    Display Suite for Drupal 7 - Field Templates
  • 0:03
    with Kristof De Jaeger
  • 0:05
    This is part six of the Display Suite
  • 0:07
    for Drupal 7, screencast series.
  • 0:09
    And in this video, I'm going to talk about field templates.
  • 0:14
    So what's the problem?
  • 0:17
    Well, it's not particularly a problem,
  • 0:18
    but some people have some problems with the mark up of Drupal.
  • 0:22
    So if you would look at, say for instance, a body here, right here,
  • 0:26
    there are actually three containers.
  • 0:28
    So there's an outer wrapper, an inner wrapper,
  • 0:30
    and then also a field item wrapper, and then
  • 0:32
    you get the value of your body.
  • 0:34
    So that's a lot of stuff, and some people
  • 0:38
    want to have full control over it.
  • 0:41
    So there's a possibility to override the field template files,
  • 0:45
    if you like, from Drupal Core if, you like.
  • 0:49
    You can also implement your own theming functions,
  • 0:52
    but Display Suite now enables you also
  • 0:54
    to control this through the user interface, if you want.
  • 0:57
    It also enables you to change labels.
  • 1:01
    And this is really handy.
  • 1:04
    You can always do this through theming or creating functions.
  • 1:08
    User interfaces are usually easier.
  • 1:10
    And, best of all, it's all exportable,
  • 1:14
    which we'll talk about in the last part of this video serious.
  • 1:18
    So what you have to do is you need to enable the Extras module,
  • 1:23
    and the first thing that you can do the Extras screen
  • 1:26
    is enable Field Templates.
  • 1:27
    So you get a lot of info, and you can select the Default Field
  • 1:34
    Template that you want to use.
  • 1:35
    Default is the one from Drupal Core.
  • 1:38
    There's also a reset that comes with Display Suite,
  • 1:40
    and that will strip all containers.
  • 1:44
    There's also an Expert, but you can't select that here.
  • 1:47
    The Expert field template will be available on the Layout
  • 1:51
    Configuration screen, and we will see that in a minute.
  • 1:55
    So there's also a hook that you can implement.
  • 1:59
    A hook so you can expose your own theming field
  • 2:03
    templates if you would like to do that.
  • 2:06
    So let's just save it on default.
  • 2:13
    So at this point, nothing really has happened.
  • 2:16
    The only thing that has happened right now
  • 2:18
    is if you would go to Styles, there's going
  • 2:21
    to be a new text area right here.
  • 2:23
    So in a previous video, we talked about classes on regions.
  • 2:26
    We can now put them also on fields, if you like.
  • 2:30
    So let's make some friendly field classes over here.
  • 2:39
    Let's Save it.
  • 2:42
    And now we can go to our Layout.
  • 2:43
    We can go to Manage Display, and I'm going to style the full content.
  • 2:49
    As you can see, there is a new link over here at the Format column
  • 2:56
    which is called Field Display.
  • 2:57
    So if you would click on it, you would see you can select
  • 3:00
    the field template right here.
  • 3:03
    This one is set on Default.
  • 3:04
    You can reset it, or you can also use Expert.
  • 3:07
    So in the default, you can select field styles for it.
  • 3:12
    And Label is for any kind of field template.
  • 3:15
    So let's overwrite this, for instance, to Author 2, and Save it.
  • 3:26
    And as you can see right now, this is still Author 2.
  • 3:29
    There is no class right here right now, because I first have
  • 3:35
    to reload my screen, of course.
  • 3:37
    So now the label has changed to Author 2.
  • 3:42
    And if I inspect the elements, there is now
  • 3:44
    a class called Field Class 1 and Field Class 2,
  • 3:47
    which you can use in your [INAUDIBLE] as you like.
  • 3:49
    So that's one cool thing.
  • 3:52
    Let's go to the body.
  • 3:54
    Let's use the Reset field template and Update.
  • 4:02
    And actually Save it.
  • 4:04
    So I will first show you how it looks right now.
  • 4:08
    So, as you can see, there are still three containers right here.
  • 4:13
    Let me reload my screen and then inspect the elements.
  • 4:17
    And as you can see, all containers have disappeared.
  • 4:20
    The only container right here is the container of the template
  • 4:24
    of the layout we have chosen.
  • 4:27
    So it's really handy.
  • 4:29
    You can really control that in the way that you like.
  • 4:32
    But say for instance you really want to have
  • 4:34
    one container for your body.
  • 4:36
    You never know why, but that's possible.
  • 4:42
    So we have now the Reset, there is also
  • 4:44
    an expert, which gives you total control
  • 4:46
    over the markup of this field.
  • 4:48
    So you can choose to add another Field Items
  • 4:52
    wrapper or a Field Item wrapper.
  • 4:54
    You can also control the label and its elements.
  • 4:58
    So for instance, let's say we want to add a span tag and a demo class.
  • 5:08
    That's actually possible.
  • 5:09
    So let's just click on Update, reload the screen,
  • 5:18
    and now inspect the elements.
  • 5:20
    What has happened right now is that there
  • 5:22
    is now a span tag with a class called
  • 5:24
    demo.class around the body value.
  • 5:27
    So you have total full control about how
  • 5:31
    you want to make your market look.
  • 5:37
    There is also this really cool option called Hide Column.
  • 5:41
    This is one of the most frustrating things that I constantly hear.
  • 5:45
    So for instance, let's go to-- nope.
  • 5:51
    Let's do it differently.
  • 5:52
    I'm going to actually show the label of the body here.
  • 5:59
    And normally, there should be a column,
  • 6:01
    but let's Hide it right now.
  • 6:04
    Go back, and Save it.
  • 6:09
    And as you can see, the Label is printed, but there is no column.
  • 6:13
    So you really have full control on the Label
  • 6:16
    and if it needs a column or not and the container it's wrapped in.
  • 6:21
    And you have full control over the containers of any field API value,
  • 6:28
    but also all the other fields if you want to.
  • 6:31
    So that's a bit about Field Templates which are
  • 6:35
    available through Display Suite.
  • 6:37
    In the Extras module, it's not enabled by default,
  • 6:40
    but you can enable it if you like.
  • 6:42
    So that's it.
  • 6:43
    See you in other screencasts.
Loading ...

Field Templates


In this lesson we cover how you can do some powerful things with Display Suite in regards to field templates. Using the Display Suite GUI there are lots of configurations and offerings to get the markup just the way you want.

Additional resources: