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 search display

Video loading...

  • 0:00
    Display Suite for Drupal 7 Search Display
  • 0:03
    with Kristof De Jaeger
  • 0:04
    Hi, this is part five of the Display
  • 0:07
    Suite for Drupal 7 part series.
  • 0:10
    And in this figure, I'm going to talk about the search override.
  • 0:16
    So if you download Display Suite, there is
  • 0:19
    a submodule called search display.
  • 0:22
    And if you enable that and you go to Structure and Display suite,
  • 0:26
    there is a menu item called Search.
  • 0:29
    So Search-- what it does it-- the module creates a new search
  • 0:38
    type called Search display.
  • 0:40
    So first of all, you have to enable this.
  • 0:44
    So there's a link on the Help page.
  • 0:45
    So you go to the Search settings and then
  • 0:51
    you go to Active Search Modules.
  • 0:52
    You see you have Node and you have User.
  • 0:55
    So you can safely disable Node and enable Search display.
  • 1:00
    And as the Default search module, you will
  • 1:04
    if you can-- select Search display.
  • 1:06
    So let's enable that.
  • 1:10
    So now the Search display is configured.
  • 1:14
    Right now, let's go back to Search settings of Display Suite itself.
  • 1:18
    There's a general configuration.
  • 1:21
    Here you select the Search engine you
  • 1:23
    want to use for the Search display.
  • 1:25
    So this works with Drupal core, but it also works with Apache Solr.
  • 1:32
    So if you are using Apache Solr, there
  • 1:35
    will be another Search engine right here
  • 1:38
    and then you can select Apache Solr.
  • 1:40
    So there's a couple of other firewalls here
  • 1:43
    and configuration settings that you can set.
  • 1:47
    There's a view mode called Search result,
  • 1:49
    but you can if you like select the Teaser or another View mode.
  • 1:53
    Let's say the Demo that we have created in a previous video.
  • 1:57
    So I'm not going to configure the Search results free mood, I'm just
  • 2:00
    going to select the Teaser .
  • 2:04
    There's some Extra variables here and some other options,
  • 2:07
    but I'm just going to save this thing first.
  • 2:12
    And then I'm going to do you go to my website
  • 2:18
    and then I'm just going to search.
  • 2:20
    So let's search for Potter-- for Harry Potter--
  • 2:25
    and then as you can see right now, the search results
  • 2:29
    are now using view modes.
  • 2:30
    So instead of the search snippets then you
  • 2:33
    will have by default in Drupal core you can really start
  • 2:38
    using them in a way that you like.
  • 2:39
    So this is using the Teaser view mode.
  • 2:42
    This is a page, which is just showing you the title and the body.
  • 2:50
    So it's now really easy to extend this a little bit more.
  • 2:54
    So there's some extra variables that you can enable.
  • 2:57
    So there's a-- say for instance-- Total results.
  • 3:00
    There's also a Show title.
  • 3:04
    We'll just display a title called "Search results" at the top.
  • 3:11
    There's also a check that says to only Search in the language
  • 3:16
    the site is currently in.
  • 3:17
    So if you have two languages-- say English and French--
  • 3:22
    and it will make sure that if you're browsing on the English website,
  • 3:26
    you will always see English Nodes and so on.
  • 3:29
    You could also highlight search words.
  • 3:32
    This is using a jQuery technique to highlight modes,
  • 3:39
    to highlight the search word in the text that it's going to find
  • 3:44
    and you have to hit HTML selector.
  • 3:48
    So since we're using the Teaser, we'll have to change this one.
  • 3:53
    This is going to be view-mode-teaser, because this was
  • 3:59
    read at a clause, which is build up like view
  • 4:05
    mode and then the name of the view mode, the machine name inside.
  • 4:10
    So we can also enable the Advanced search form.
  • 4:15
    So let's save this.
  • 4:18
    Let's go back to my search screen and reload.
  • 4:20
    As you can see the advanced search is now enabled as well.
  • 4:25
    Now the search keyword I was looking for is now also highlighted here.
  • 4:32
    This is not highlighted here, because, well, I have
  • 4:35
    not yet configured the basic page.
  • 4:38
    It's either view mode not yet, so it's
  • 4:40
    not having these right clauses.
  • 4:43
    But it works if it's configured all right.
  • 4:48
    Let me go back.
  • 4:49
    So there is one other nice feature available and that's
  • 4:55
    the Group by type option.
  • 4:57
    So with this setting-- if I'm just going to save this--
  • 5:03
    it will wrap all the results into groups,
  • 5:09
    and you can select if it's going to be
  • 5:11
    a field set or just a simple container with a H3 headline.
  • 5:15
    You can also adjust labels for it and you can
  • 5:20
    also enable them or disable them.
  • 5:22
    So if I were to disable the basic page here
  • 5:27
    and all results, which are on basic pages
  • 5:30
    will be rendered into an other group.
  • 5:36
    So let me save that and then go back.
  • 5:42
    You'll see then you have nice groups.
  • 5:45
    I will search for-- let's say d, and then
  • 5:49
    you'll see that I have now two results in the article and two
  • 5:56
    in the other.
  • 5:58
    We can change labels if we want.
  • 6:02
    You can also change the order of it.
  • 6:06
    So let's enable the page again and put
  • 6:11
    it at the top-- reload the screen.
  • 6:13
    And then as you can see, results are from the basic page are at the top
  • 6:18
    and Article are at the bottom.
  • 6:22
    We can just switch this back again.
  • 6:25
    You can change the labels as well as you like.
  • 6:28
    This is the other label.
  • 6:32
    Let's just change this to more results.
  • 6:35
    If you leave it empty the title will be gone
  • 6:38
    and all those labels are also translate.
  • 6:43
    So you can translate them through the language interface.
  • 6:46
    So there you go again-- label here is some more results now.
  • 6:51
    So it's really powerful if you're a themer,
  • 6:56
    this complete page is now run through a function
  • 7:01
    in this Display Suite So you can override this to your liking
  • 7:05
    to as well.
  • 7:09
    Also in this place, we can take over the user's search results.
  • 7:13
    So if I would go to users and search for admin
  • 7:19
    then I would get a search result like this.
  • 7:21
    This is not really, not really pretty in a way.
  • 7:26
    So I can override the search-- the User page-- right here.
  • 7:32
    Click on Save the configuration, reload my screen,
  • 7:36
    and then there you go.
  • 7:40
    Of course, this is now theme through the default user profile page.
  • 7:47
    So let's say for instance I would go to Layout and go to User,
  • 7:55
    I can actually, let's say create a two column layout
  • 8:02
    and put the User picture on the left.
  • 8:06
    I can actually choose it to do render
  • 8:08
    it at thumbnail, medium, or large.
  • 8:10
    So these are the image style formats and then
  • 8:12
    that's put in the bio, which is the field API field on the right.
  • 8:21
    So there you go.
  • 8:23
    And I will go back to my search-- so admin and search for users.
  • 8:30
    And as you can see right now search results for users
  • 8:33
    are now a little bit more prettier than they were before.
  • 8:37
    So that is Search within Display Suite.
  • 8:42
    It's an extra module.
  • 8:44
    So it's really easy to configure and override search results
  • 8:48
    with Display Suite for Drupal 7.
  • 8:51
    Thank you for watching and see you in another screen cast.
Loading ...

Display Suite Search Display


In this lesson we cover using the search display portion of Display Suite. This allows you to have a custom layout for your search results as well as your user search results. Display Suite offers lots of functionality here that you just can't get with a core configuration of search.

Additional resources: