Configuring Layouts with Display Suite in Drupal 7

Display Suite allows site builders to customise how content is displayed. When I say content, I mean nodes, users and taxonomy pages as a basic example. At a lower level, you are modifying the display of an entity. All major pieces of content like nodes, users and taxonomy terms are simply entities.

In Drupal 7, a lot of contributed modules implement their own entities. For example, Drupal Commerce, Field collection or Bean module just to name a few. Display Suite makes it very easy to customise the layout of any entity using a drag and drop interface without writing custom code or overriding template files. One of the biggest benefits of using Display Suite from a developers standpoint is that you have a standard UI and consistent workflow for modifying content layouts. The days of opening a “node-blog.tpl.php” file and seeing 500+ lines of messy – sometimes insecure – code are over.

In this series of tutorials, we’ll look at every aspect of Display Suite 7.x-2.x from simply modifying layouts to creating custom layouts and fields.

Let’s get started.

Getting Started

Before we can begin you must download and install Display Suite. Display Suite 7.x-2.x requires the Chaos tool suite module. If you are using Views, then you should have ctools already installed.

Download Display Suite and enable the “Display Suite” and “Display Suite UI” module.

If you use Drush run the following command:

$ drush dl ds ctools
$ drush en ds ds_ui

From the administrative toolbar, go to Structure (admin/structure) and you should see a link to the Display Suite configuration page.

Throughout this series of tutorials, we’ll use the Article content type that ships with the Standard Drupal installation profile. If you want to follow along at home, all you’ll need is a copy of Drupal setup and installed.

Full Content Layout

Now that we have Display Suite installed, let’s jump right in and modify the “Full content” view mode of the Article content type.

How To

1. Go to Structure -> “Display Suite” and click on “Manage display” within the Article row.

2. Click on the “Custom display settings” vertical tab option at the bottom of the page and select the “Full content” checkbox and click on Save.

Now we’ll be able to modify the “Full content” view mode, you should see a link in the top right corner called “Full content”. Click on the link to select a layout and configure the layout.

3. Below the fields, there is a drop-down box called “Select a layout”, this is how you select which layout the view mode should use.

Select “Two column stacked” and click on Save.

After choosing a layout, you’ll see a few more vertical tab options like custom wrappers, custom classes and custom fields. For now we’ll ignore these options and look at them in more detail later.

Configure Full Content Fields

At this point we have selected a custom Display Suite layout, it’s time to add fields into specific regions. Each custom layout defines its own set of regions and all you need to do is drag and drop a field into a desired region.

How To

1. Move the “Submitted by” field into the Header region.

2. Move the Image field into the Left region and change the “Image style” from none to medium.

3. Move the Tags field into the Right region.

4. Move the Body and Comments field into the Footer region.

The final placement of the fields should look something like the image below:

5. Once all fields are in place scroll to the bottom and click on Save.

Create an article page and the page should look like the image below:

How To Control The Title Field

If you add the Title field to a region you will end up with two copies of the title, one above the tab menu (View, Edit and so on) and one below within the layout.

Why does this happen? This happens because the title above the tab menu is controlled by the template and not Display Suite. Everything below the tab menu is controlled by Display Suite.

How To Access Manage Display Page

Before we move on let’s discuss how you can access the “Manage display” page, there are a few ways.

You can access the “Manage display” page three ways. The first is from the “Content types” page. Go to Structure -> “Content types” (admin/structure/types) and click on the “Manage display” link on any content type.

The second is from the “Display Suite” page. Go to Structure -> “Display Suite” (admin/structure/ds) and click on the “Manage display” link.

The final way is by clicking on the “Manage display” within the tab menu from the full content page.

Configure Teaser Layout

The next layout we’ll quickly configure is the Teaser layout. By now you already know how to choose a layout and place the fields into a region. Display Suite’s UI is consistent across all entities.

How To

1. Go to the “Manage display” page (admin/structure/types/manage/article/display) for the Article content type and click on Teaser in the right hand corner.

2. Select the “Fluid two column” as the layout and click on Save.

3. Move the Image field into the Left region.

4. Move the Body and Tags field into the Right region.

5. Finally move the Title field in the Right region above all the other fields. Configure the field by clicking on the cog icon and change the Link drop-down to Yes.

Once you are happy with the layout click on Save at the bottom of the page. The completed layout should look like the image below:

Go to the homepage and you should see a new Teaser layout.

Tutorial Summary

In this tutorial, we went through the key functionality of Display Suite. We chose a layout and added fields to the layout regions. This was all achieved without writing a single line of code and using a simple drag and drop interface. This is the power of Display Suite.

This tutorial is part of the “Using Display Suite in Drupal 7” series. Check out the latest tutorials from the series homepage, a new part will be published weekly over the next few weeks. Join the series newsletter to stay up to date.

If you have any questions, please leave a comment.

Ivan Zugec

About Ivan Zugec

Ivan is the founder of Web Wash and spends most of his time consulting and writing about Drupal. He's been working with Drupal for 10 years and has successfully completed several large Drupal projects in Australia.

42 thoughts on “Configuring Layouts with Display Suite in Drupal 7”

  1. Thanks Ivan, every now and then you just need the information straight and with clarity– that’s exactly what you did and I appreciate that! …owe you one!

  2. When you modify, you are clearly modifying the entire content type. What if I have one basic page layout that I want to be different without affecting the other basic pages? Clearly when you click on the Manage Display, the path presented is modifying the content type and not just the current basic page (or article or whatever). How can you change just one instance?

    1. I don’t think you can do that out-of-the-box with Display Suite. There could be a module out there that does it. If you find a module let me know.

    2. You should look at Panels if you want to create a page layout that is different without altering content type directly.

    3. Jesus Manuel Olivas

      @Nancy You can set by node if you enable display suite “view modes per node” at [admin/structure/ds/list/extras]

        1. Jesus Manuel Olivas

          @Ivan & @Nancy If you are using context (that you should) and want to change the view mode for a node based off of a context you may try https://drupal.org/project/contextual_view_modes

          What is the advantage, you do not have to set the view-mode per node one-by-one you can define it based on a taxonomy value or any other contextual filter.

    4. I forgot I had been here before. This was my question about 6 months ago and I think it wasn’t possible at the time. However, as of 2.6 version of Display Suite, in the extras, there is now an option called View Mode Per Node that makes possible creating a view mode for just one node. More practically, you would probably create several view modes and apply them to individual nodes as needed.

  3. Hi, Can you please say why, after I’ve clicked on the “Custom display settings” vertical tab option at the bottom of the page and selected the “Full content” checkbox and clicked on Save, it is not saving, i.e. the “Full content” checkbox does not remain checked and I don’t see a link in the top right corner called “Full content”.

    1. There can be a lot of reasons why. Try configuring Display Suite on a freshly installed Drupal site.

  4. Ivan, Your tutorial works for an individual piece of content. But when that content is placed on the front page and I click Home the layout is lost. How can I maintain the layout when I view the article on the front page?

    1. You need to configure the “Teaser” view mode. The “Full content” view mode is only used when you view a piece of content from the “node/12” URL.

      The layout is not lost, it just needs to be configured. View modes allow you to display a piece of content in multiple ways.

  5. At a look at the last photo you have. The picture is aligned left. the right column is aligned left. What is the most effective way to move the text closer to the image for this page without effecting other content types which may use this same template layout. It looks weird the way it is right now. Adjusting CSS on the 50% left column will effect all pages that use this template.
    I really think this is the last step to completing a great tutorial.

    1. The best way to customize the layout is via CSS. But if you target a generic class, you could change the look and feel of other content types using the same template.

      Luckily, Display Suite allows you to define custom CSS classes for fields and regions. Check out my second tutorial on Display Suite, look for the heading “CSS Classes on Regions”.

      What I recommend you do is define a custom CSS class for a region and style the layout using the custom class.

      1. Thanks, I did just as you suggested. I have a 2 column layout. created CSS regions (staff-left and staff-right) assigned them and the show up in CSS so I can make changes. Altho this does not change the size of the region. It is set to 50% by display suite’s CSS file for 2 column. I can’t make it 30% without effecting all other 2 column template pages.
        The CSS region in DS allows me to make changes to items in the region but I need to change the width of the region itself witch is defined in ds_2_column.css
        I think what I’ll really trying to do here would require creating a new ds template file. I have never done this before, so I think it may help a lot of people if we knew how it was done. Not much information on step by step how to do it.
        Thanks

        1. thanks a lot Craig, I agree with you and your suggestion helped me to work on css and update my image to move more to the right as well. The field template video should have added the css customization as well.

  6. Hi, I have problems when I change the filter of a cloned view. I duplicated block the view using the clone, but when make any modification in the filter of any of the views, the other assumes changes. I need three different blocks within the same view. The block master the Portuguese language, and the other 2 blocks in English and Spanish. Any idea to solve this? Thank you.

    1. Hmm, I’m not sure. First, make sure you have an overridden the filter within each view display. Also, when you define your Display Suite block, make sure you configure the block to display a specific views display.

  7. Hi Ivan!

    Thanks for the tutorial! I change the layout to a two column layout, it works fine, but how can I add a block to the right column? Because on the block management panel, I can’t see the Right region, only the Content region, what put the block to the left side by default.

    Many thanks!
    Bart

    1. Display suite regions and theme regions are two separate systems they just share the same name.

      What you have to do is display the block via a block field or dynamic field. Go to the “manage display” page of a view mode that is controlled by Display Suite and click on the custom fields vertical tab.

  8. Carlos Jaramillo

    I’m using the Julio distribution with Drupal 7, but I don’t even see the “manage display” option anywhere. I’m assuming it has to do with the distribution, but I really wish there is a way to enable this (I’m kind of new to drupal administration).

    1. Are you logged in as the administrator? The Julio distribution should have the “manage display” page, however, your user account may not have permission to access the page.

      1. Hi, Ivan.

        Yes, I am using the first user (administrator) account. I know this works in the standard/official distribution. I’m not sure if the problem is Julio related. Any more hints?

        1. I don’t know what could be causing the problem. I have never used the Julio distro, you’ll have to do some good old fashion debugging. 🙁

  9. On my production server, I’m getting the message: “This layout is defined in code: disable layout.” below the selected DS layout, whereas on my local installation this doesn’t show. Clicking “disable layout” returns the message that “This operation is not possible.” How can I correct this?

      1. i get the same message as the guy above, and it causes the the header image to be overlapped by the right image . where would i check if the disabled property is true?

        1. When you export layout settings into code, there is a `disabled` property that can be set to `FALSE`. ($dslayout->disabled = FALSE;) That’s what I’m referring to.

          The person who asked the question never replied back so I still don’t know what the problem is.

  10. I all,

    I’m using this plugin and I really like it , I just have one question.
    On my display I have 3 colums and they are full with content.
    All fine and all but there is no space between them, making it kinda messy.

    How do you get a space between you content? CSS, Wrappers?

  11. I am using DS with a module called rListing that creates some real estate content types. DS allows me to change the layout for the teaser view, but when I change layout for full view, nothing is rendered in the node. Do you have any clue why this would be?

    1. I’ve never used rListing before. If it works without DS, then there must be some compatibility issue between rListing and DS. I don’t know why, you’ll have to look in the code.

  12. Many thanks for this great tutorial. I have a strict layout on my website’s homepage and I want to limit the length of article teaser titles (only in teaser view mode; they can be as long as needed when seen in page view mode). I was wondering if there is any way to limit the number of characters in an article teaser’s title? I have figured out how to add a preprocess function to my template.php file to truncate the title of an article when in teaser mode. However, for teasers that are configured using Display Suite, the preprocess function has no effect. Do you have any suggestions?

  13. Hi,

    it is a very cool module. However I like to use the “AT ..” Layouts instead of the standard “Two column stacked” etc. forms. But they are not displayd in the select list. Only in the “Manage Display” Tab I can select the Adaptive Theme (AT) panels.

    How do I add the AT Panels also to the “Manage Form”?

  14. 1. Is it responsive if my theme is responsive?

    2. How to customize commerce product detail page?

Comments are closed.