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 view modes

Video loading...

  • 0:00
    Display Suites for Drupal 7 - View Modes
  • 0:02
    with Kristof De Jaeger
  • 0:04
    And in this video,
  • 0:05
    I'm going to talk about view modes.
  • 0:08
    So if you install Display Suite, you can manage view modes
  • 0:13
    through the user interface, instead of having to implement [INAUDIBLE]
  • 0:17
    entity and [? for alter, ?] so you can create new view modes.
  • 0:22
    So what are view modes, exactly?
  • 0:25
    Maybe not everyone knows that.
  • 0:27
    So let me go to Article and Manage Display.
  • 0:31
    As you can see here at the top right here, you have Default and Teaser.
  • 0:36
    So Drupal Core comes with a couple of view modes.
  • 0:39
    So this is not something that Display Suite gives you.
  • 0:43
    It's enabled by default through Drupal Core 7.
  • 0:48
    So I could enable the full content view mode or the search
  • 0:52
    result view mode to have custom configuration
  • 0:57
    to display it in that context.
  • 1:00
    So when Drupal is going to render a full content node,
  • 1:06
    it's going to call a node view with the [? full ?] as an argument,
  • 1:11
    and then it will look up any configuration
  • 1:14
    and then displays it how it's configured.
  • 1:18
    So with Display Suite you can create new view modes.
  • 1:21
    So let's create a new view mode.
  • 1:24
    So form is really easy.
  • 1:27
    You give it a label.
  • 1:29
    So let's create a demo view mode and enable it on the node entity.
  • 1:36
    So that's it.
  • 1:39
    There's now a new view mode.
  • 1:41
    And now I can go back to my layout.
  • 1:46
    Can go to Articles.
  • 1:49
    And as you can see here at the top right, it's not enabled yet
  • 1:52
    but it's available here at the bottom,
  • 1:55
    at the Custom Display Setting stamp.
  • 1:57
    Now going to enable it.
  • 1:59
    This is still Drupal Core in action.
  • 2:04
    Now it tells me that I can configure it.
  • 2:07
    And then as you can see here, it's not
  • 2:10
    using any Display Suite layout or something
  • 2:12
    like that, but just Drupal core.
  • 2:16
    So let me copy or clone Teaser that I have configured already.
  • 2:23
    So it is now titled Image and Body.
  • 2:26
    It's the same configuration as in Teaser.
  • 2:29
    So there's no difference right now.
  • 2:32
    But let me just do something else.
  • 2:37
    Let's just put the image in the right, body in the left.
  • 2:42
    And let's disable the title.
  • 2:47
    So let's save this one.
  • 2:51
    So as you can see right now, the demo view mode is configured
  • 2:55
    to only have a body and an image.
  • 2:58
    There is still configured to have title, image, and body.
  • 3:02
    So how or where do you use it, as if you're a module developer
  • 3:06
    and you're creating custom code, you can just call node view
  • 3:10
    and pass on demo s and arguments.
  • 3:13
    And it will display the node as disconfiguration.
  • 3:19
    So it's going to create a layout with four regions.
  • 3:24
    And it will put the body in the left region and the image in the right.
  • 3:31
    Now typically where we use it is on views.
  • 3:35
    So this is a view of articles.
  • 3:39
    And it's using the teaser view mode.
  • 3:41
    But we can change this.
  • 3:43
    So let me edit the view.
  • 3:46
    And Display Suite comes with a row style plug-in.
  • 3:52
    And you can select it and you can now select Display Suite.
  • 3:58
    You can also use Content and Demo view mode will
  • 4:01
    be available over there as well.
  • 4:03
    But I want to show you that Display Suite row plug-in because it
  • 4:08
    has a couple of more options.
  • 4:10
    So let me just go for the easiest options.
  • 4:14
    It's now using Teaser, but we can also use Demo.
  • 4:17
    So let's just use Demo.
  • 4:20
    Apply it and Save.
  • 4:25
    And as you now can see, my layout is completely different right now.
  • 4:29
    So it's now the body's on the left, the image is on the right.
  • 4:32
    That's exactly what I have configured right here.
  • 4:36
    So this is really, really cool.
  • 4:39
    If I go back to my front page, front page Drupal Core is
  • 4:44
    always using the Teaser view mode.
  • 4:45
    And you can see that it is using the Teaser view mode.
  • 4:49
    This is using the article view mode.
  • 4:50
    So this is a really handy example on how
  • 4:54
    you can create new view modes to have different styling
  • 4:57
    in different contexts.
  • 4:59
    Now the Display Suite row plug-in has
  • 5:03
    a couple of other cool settings.
  • 5:07
    There's an advanced view mode.
  • 5:09
    This is purely for developers.
  • 5:11
    You can create a function and do all kinds of stuff in there
  • 5:15
    and render like you want.
  • 5:18
    You can also group.
  • 5:20
    I'm not going to show you this one, but the most interesting one
  • 5:24
    is this one.
  • 5:25
    This is the alternating view mode.
  • 5:27
    So what this does is that if you enable it,
  • 5:32
    then you can actually tell row of the view which view mode
  • 5:39
    he has to use.
  • 5:40
    So by default, this should actually be demo, I think.
  • 5:45
    But you can actually say, OK, first item in my list
  • 5:48
    has to be a full content.
  • 5:50
    Second one has to be a demo.
  • 5:52
    So let's just use Demo as first one and use Teaser as the second one.
  • 5:59
    All the rest will be Teasers, for instance.
  • 6:02
    There's also a check box that tells you to use
  • 6:07
    this configuration on any page.
  • 6:09
    It's also possible to not toggle it, and then this configuration will
  • 6:18
    only be applied to the first page.
  • 6:20
    And then all second pages of a view will use the default view
  • 6:24
    mode that is configured here above.
  • 6:27
    So let me just save it.
  • 6:31
    So we have first Demo than Teaser.
  • 6:34
  • 6:36
    Let's save this.
  • 6:39
    And then you will see that the first one is
  • 6:42
    actually rendered as a Demo view mode,
  • 6:46
    and the second one is using the Teaser.
  • 6:48
    So this is not a long video, but this
  • 6:53
    is showing you the power of view modes
  • 6:55
    and where you-- and we are actually using constants usually in views.
  • 7:03
    So that's it for this part of the video.
  • 7:06
    See you in the next video.
Loading ...

Display Suite View Modes


In this lesson we cover how one can use view modes and display suite to allow multiple options of layouts for content display. This allows a user to have a different layout of the same content for different scenarios of the site. Combining this with views and you can start to see the power of display suite in action.

Additional resources: