Configuring Layouts with Display Suite in Drupal 7

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.

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.