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.

Various Display Suite extras

Video loading...

  • 0:00
    Display Suite for Drupal 7 - Various Display Suite Extras
  • 0:02
    with Kristof De Jaeger
  • 0:04
    Hi, welcome.
  • 0:05
    This is part eight of the Display Suite for Drupal 7 Series,
  • 0:09
    and in this part, I'm going to talk about a couple
  • 0:12
    of features that are available in the Extras module.
  • 0:17
    So if you enable the Extras module, you can go to the Extras menu.
  • 0:22
    The first one I'll be looking at is the Contextual Links,
  • 0:25
    so let's enable it.
  • 0:29
    And what it will do is make your life easier when you're
  • 0:33
    browsing around your website.
  • 0:35
    So as you can see here, now there's a View,
  • 0:37
    Edit, and Devel local menu tab.
  • 0:41
    If I reload the screen, then there's going to be
  • 0:44
    a Manage Display menu local tab.
  • 0:46
    So this is not really a contextual link,
  • 0:47
    but it's more or less the same.
  • 0:51
    If I click on the link, the internal page callback
  • 0:54
    will look up what we are looking at and will redirect you
  • 0:58
    to the Manage Display screen and the exact view mode
  • 1:01
    that you want to style.
  • 1:02
    So that's really handy so you don't really have to inspect the element
  • 1:06
    or try to guess which sort of view mode you are looking at.
  • 1:11
    So it's contextual links, so it works also on contextual links.
  • 1:16
    So this is a teaser view.
  • 1:18
    And, as you know, contextual links works on there, too.
  • 1:21
    Now, look at this.
  • 1:22
    You have Edit, Delete, and Manage Display.
  • 1:24
    You click on Manage Display, you will
  • 1:27
    go to the teaser of your article.
  • 1:29
    You can style some stuff.
  • 1:30
    You just click on Save, and you go right back to your page
  • 1:35
    where you came from.
  • 1:36
    So it's a really handy feature, because in the previous versions,
  • 1:41
    this wasn't available and you had to really
  • 1:43
    guess what you were looking at.
  • 1:45
    So that's Contextual Links.
  • 1:48
    A second one I'm going to talk about is Page Title options.
  • 1:52
    So, again, let's go to Extras and then the other vertical tab
  • 1:56
    and enable it.
  • 1:58
    So this will enable some options for the Page Title.
  • 2:01
    So this will only work on a full-view mode,
  • 2:05
    so I'm going to actually not use Manage Display.
  • 2:09
    I'm going to go through this one, because I want to two tabs open.
  • 2:15
    And what now has happened in the layout vertical tab,
  • 2:19
    I need to go to Full Content.
  • 2:21
    So it works only on the Full Content view mode or it might work-- well,
  • 2:26
    not might work, it will work on any other view mode
  • 2:29
    if the switch view feature is on.
  • 2:31
    But I'll be talking about that later on in this video.
  • 2:34
    So again, in the Layout vertical tab is now a new option.
  • 2:41
    Well, it's not a new option.
  • 2:42
    It's already available in a previous release,
  • 2:45
    but you can either Show the title, you can Hide it,
  • 2:48
    or you Manually set it.
  • 2:49
    So real easy.
  • 2:52
    You Save your screen, go back to the node, and the title is gone.
  • 2:58
    Really handy.
  • 3:00
    You can also manually set another title.
  • 3:02
    So there's a text field right here, so you can give it a manual title.
  • 3:11
    And Save it.
  • 3:12
    And go back.
  • 3:13
    There is the manual title.
  • 3:17
    You can also use tokens.
  • 3:19
    So any token that's available in the system, those tokens
  • 3:23
    are made available through the ctools,
  • 3:26
    actually, through ctools module.
  • 3:28
    So let's, for instance, put in the node edit
  • 3:30
    URL-- a really strange one, but OK, it works.
  • 3:36
    So now my title is a node URL.
  • 3:38
    It's really funny.
  • 3:39
    So that's the Page Title options.
  • 3:42
    Let me just go back and just set it to Show
  • 3:46
    so my original title will be back.
  • 3:50
    So there you go.
  • 3:51
    Another feature that's available in the Extras
  • 3:53
    and I want to talk about now is the Extra fields.
  • 3:57
    So this is probably a bit cryptic.
  • 4:01
    It's probably something really module developers will use,
  • 4:05
    unless you know how to inspect a node element.
  • 4:09
    So as an example, right here I'm going to paste something
  • 4:14
    here, which consists of a note, SOA entity type, a bundle, and a field.
  • 4:21
    So this field is something that will be available on some nodes,
  • 4:27
    but the module author hasn't really exposed
  • 4:31
    the field yet to make it available in the Manage Display screen.
  • 4:36
    So this is an option to enable it.
  • 4:39
    The second thing that you always should do
  • 4:41
    is provide a patch for the node author
  • 4:43
    to make it available by default.
  • 4:46
    So I'm going to firstly go to my Manage Display here.
  • 4:51
    So there is no Tweet button right here,
  • 4:55
    although I have enabled the module.
  • 4:56
    But I want to have the Tweet button on it, so there you go.
  • 5:01
    Save the configuration, and then reload this screen.
  • 5:08
    And there you go.
  • 5:08
    There is now a Tweet button over here, which
  • 5:11
    I can just put into the header.
  • 5:13
    And let's Save it.
  • 5:17
    And there's your Tweet button.
  • 5:20
    It's in the header, it's on the right,
  • 5:21
    because the Tweet button itself has some CSS, of course.
  • 5:24
    But that's one way to add extra fields that you know of that
  • 5:28
    are available on node objects in 3D Content Container.
  • 5:33
    So really handy.
  • 5:35
    It's probably not going to be used a lot, but you know it's there.
  • 5:40
    So let's remove this again.
  • 5:43
    And Save.
  • 5:47
    It will go back to my bodes, so there you go.
  • 5:49
    The Tweet button is now gone again.
  • 5:53
    So another feature, this is a video with a lot of features,
  • 5:58
    is the Switch View Mode and the Switch View Mode field.
  • 6:01
    So they are two different things.
  • 6:05
    I'm going to enable it.
  • 6:07
    So the Switch View Mode, what it does,
  • 6:09
    it's a really interesting module, it gives you the ability to override
  • 6:15
    the View Mode per individual node.
  • 6:18
    So that's basically it.
  • 6:20
    So if you add a node, there's going to be an extra vertical tab
  • 6:24
    right here called Display Settings.
  • 6:26
    So the View Mode, by default, will be default,
  • 6:29
    but you can tell it to use the Demo View Mode only for this node alone.
  • 6:34
    So that's really handy, and really easy.
  • 6:39
    And I didn't want to go to Manage Display.
  • 6:43
    Again, also, in Manage Display Nodes we're looking at a [? demo, ?]
  • 6:46
    so that's interesting to know as well.
  • 6:47
    But it works.
  • 6:49
    So let's go back to the node.
  • 6:51
    Let's go to Edit, and just put it on Default.
  • 6:58
    The default that you are selecting here is actually empty.
  • 7:02
    During rendering, Display Suite will be smart enough
  • 7:05
    to know that the full content has been configured
  • 7:07
    and will be using the full content view mode.
  • 7:10
    So that's switching view modes.
  • 7:11
    It's really easy, really handy.
  • 7:13
    Of course, you need to have a couple of view modes enabled,
  • 7:17
    otherwise it's just useless.
  • 7:19
    So the Switch View Mode field, what it does
  • 7:23
    is it's actually just a field.
  • 7:25
    So there's a new field available here called Switch View Mode.
  • 7:34
    Let's put it on the right.
  • 7:36
    So let's put it above the image.
  • 7:38
    There are some configuration options for it.
  • 7:40
    So what you will see here now is all the other view
  • 7:44
    modes that are available.
  • 7:45
    And you can create links to it.
  • 7:47
    So let's create a link to the demo.
  • 7:50
    So see the demo content.
  • 7:55
    So this link is actually [? configurable. ?]
  • 7:57
    You just click on Update.
  • 8:02
    Let's just Save it.
  • 8:03
    Now what will happen is now there's a link available here
  • 8:07
    that, if I click on it, will load the Demo View Mode
  • 8:11
    and just replace the HTML in it.
  • 8:13
    So it's really handy.
  • 8:14
    Let's just reload it.
  • 8:16
    And I'm going to go to Manage Display,
  • 8:18
    and I'm going to configure the demo view mode.
  • 8:26
    And let's put the switch view mode over here into the header.
  • 8:33
    As you will see, there is a demo.
  • 8:37
    Of course, you can put a link on it.
  • 8:40
    Let me do that.
  • 8:42
    So go to full.
  • 8:45
    Look at demo.
  • 8:47
    So let's Save this.
  • 8:52
    Let's Save.
  • 8:56
    I actually have to go back now here.
  • 8:59
    So, again, here this is see the demo content.
  • 9:03
    And now look how demo is not a link anymore,
  • 9:07
    because it knows that we're looking at the demo display view mode.
  • 9:12
    But we can go back to full.
  • 9:13
    So there you go.
  • 9:14
    It's a really handy easy field that's available in the Extras
  • 9:20
    and it's called the Switch View Mode field.
  • 9:22
    And I think that's about it that I wanted to show
  • 9:25
    you for this part of the video.
  • 9:26
    So there are a lot of cool, small, subtle features,
  • 9:30
    and I've showed you them all in right now.
  • 9:32
    So thank you for watching, and see you in another screencast.
Loading ...

Various Display Suite Extras


In this lesson we cover several extra options provided by the included "Extras" module with display suite. We will show how turning on the Contextual Links extra makes it easier to edit a layout when viewing an entity that is using it. We also look at the Page Title extra that allows you to hide/show the title for a particular layout. Finally we discuss a very powerful feature that allows you to have an option of an end user to select between different view modes.

Additional resources: