Content Make-Up | Display Suite for Drupal 7

Thank you for your contribution: 

Introduction – What is Display Suite?

vortrag-ds.029It's a module, of course, and it gives you full control over how your content will be displayed. Ever wondered how to get around

print render($page['content']);

in your page.tpl.php, and you are not into php coding and you don't like to mess around with the devel module? Well then Display Suite is for you and even better it comes with a drag and drop interface and a predefined list of layouts!

How to Use Display Suite?

What the Drupal Core Gives You

First, we will have a look what we have in Drupal per default.

vortrag-ds.003vortrag-ds.003

We have fields like image, body, tags and you can add as much as you like here. We also have view-modes (CUSTOM DISPLAY SETTINGS) like full content, Teaser, RSS, Search index, Search result. You can control the position of the fields for the different view-modes with drag and drop, you can hide or show them and you can control if the label is shown. Furthermore you have some format settings.

So an example use case would be:

  • Teaser: show only body and tags
  • Full content: show body tags and images

See some example settings for the teaser in the screenshot:

vortrag-ds.008vortrag-ds.008

That's already much more than you could do with Drupal 6 but in most cases you need more power.

What Display Suite Gives You

Let's have a look how the same settings window looks like with Display Suite enabled.

vortrag-ds.014vortrag-ds.014

As you can see, now you are actually able to choose one of the different layouts like one column, two columns, three columns and so on (and it is even possible to create your own). So with the basic settings of Drupal you can control the horizontal position of your fields but with Display Suite you can have different regions like left and right, top or bottom. And that's just where the fun begins. It was never as easy as now to control the output of your content.

Maybe some of you know the situation pictured in the following screenshot

vortrag-ds.011vortrag-ds.011

– well I always hated that. Especially when the customer wants some changes one year after the project has been launched. It just takes an unnecessarily long time to figure it all out again.

But with Display Suite it's all easy. Let's say the customer wants a new sub-line in H2 beneath the headline. You create a field, drag it to the right position, assign h2, save it and you're done. (you will see later in detail how that works.)

Another nice thing is that you can control all outputs and display of your content from one place.

We will cover now the following steps:

  1. Choose a layout and modify it with your own CSS
  2. Assign the fields to regions and change the semantic output
  3. Create a custom view-mode
  4. Use DS with views
  5. Create a DS-field (I will use a block field in this example)
  6. Finish your working day earlier and have a nice beer

1. Choose a layout and modify it with your own CSS

Let's say we decide to choose the "three column stacked" layout from the pull-down menu.

vortrag-ds.018vortrag-ds.018

As you can see on the screenshot, DS gives you some template suggestions and tells you where to find the default template. Copy it to your themes folder and rename it. There are three options: 

  • for all nodes (ds-3col-stacked--node.tpl.php)
  • for the content-type "article" (ds-3col-stacked--node-article.tpl.php)
  • and for the view-mode "full" (ds-3col-stacked--node-full.tpl.php).

If you have more view-modes, you will have more options here e.g. teaser. So you can define very precisely where to use your templates.

This is how the "Manage Display" section looks like after enabling the layout:

vortrag-ds.015vortrag-ds.015

And this is how you can influence it:

vortrag-ds.016vortrag-ds.016

And here is the default template and a modified version based on the 960gs:

vortrag-ds.019vortrag-ds.019

I think now you should get the picture and know how to work with the templates.

But there is also another way if you don't want to mess around with the template files. You can define custom styles that can be added to regions. Go to: "admin/structure/ds/styles" - create the class by just putting the name without the dot (.classname = wrong | classname = right). Go back to manage display settings and under "Extra classes for regions" you can now choose your custom classes.

2. Assign the fields to regions and change the semantic output

To assign the fields to the regions just drag and drop them. To change the semantic output you have to enable some extra settings. Go to "admin/structure/ds/extras" and check "Enable Field Templates". Also go to "Other" and check "Hide page title" – this is a very nice feature. If you assign the page title to a region, it will appear twice because it is also printed via the page.tpl.php (<?php print $title; ?>). This option gives you a checkbox to hide it!

In this example we want to change the "subline" field to be printed as H3. After dragging the field to your desired region, click on the "Field display" link. See the screenshot:

vortrag-ds.033vortrag-ds.033

This will open some additional options. In our case we check "Outer wrapper" and put H3 in the element input-field. See the screenshot:

vortrag-ds.034vortrag-ds.034

As you can see in the next screenshot, we will have a nice H3 output.

vortrag-ds.035vortrag-ds.035

You can also give a span or div with a class. That makes sense for a use case like:

<span class="readmore-link"><a href="url">Read more</a></span>

vortrag-ds.037vortrag-ds.037

Above: before/after

3. Create a custom view-mode

Creating custom view-modes can be very useful. Take a look at the example mockup:

vortrag-ds.022vortrag-ds.022

As you can see there are four different versions of a teaser with different sizes of the pictures and different formatting of the headlines. So we have to create the view-modes. But that's fairly easy.

Click on "manage view modes" and create them. See the screenshot:

vortrag-ds.037vortrag-ds.037

So now we can have different templates for each view-mode. In the theme folder the templates could look like this:

ds-2col--node-article-teaser.tpl.php
ds-2col--node-article-teaser-2.tpl.php
ds-2col--node-article-teaser-3.tpl.php
ds-1col--node-article-teaser-4.tpl.php
ds-3col-stacked--node-article-full.tpl.php

Just assign the desired settings, put your CSS in the template and you're done.

4. Use Display Suite with views

For the teasers mentioned above we need views to create them. So if you are familiar with the views module, you know that you can add the fields there. But with DS you don't need to do that, in fact, it is even more practical not to create fields in views. Because with DS all output of the content stays in one place and makes it easy to contain. If you don't know views, find some tutorial, I'm not going to explain it here.

The basic format settings in views are "fields". We change that to "Display suite" and choose the desired view-mode. See the screenshot:

vortrag-ds.029vortrag-ds.029

And that's it. You can set some filter-settings or whatever you like. It is important to understand that all output settings are handled by DS. The next version will also have panel support.

5. Create a DS-field (I will use a Block field in this example)

To understand why this can be useful check the next screenshot.

vortrag-ds.021vortrag-ds.021

This is an example mockup of a node-view. Beneath the picture are two teasers that could be something like "similar articles". So you would create a block in a view with an argument. With DS it is possible to nest a block in a field. Or you can have custom code in a field and use token or even rules. This is indeed a very powerful function. In this example we create a field that holds a block. See the screenshot:

vortrag-ds.031vortrag-ds.031

Navigate to: admin/structure/ds/fields/manage_block You have to give a label. At entities check "Node". At block choose your block in the pull-down menu. If your views settings are right, the block should appear here. Choose the right block and save. The new field will now appear in your "manage display" settings.

Actually you can use any block here. For example you have the fblikebutton module installed. The module creates a block with the Facebook like button. Create a DS-Fields that holds the block and you can assign it easily to any given region.

6. Finish your working day earlier and have a nice beer

Cheers!

Conclusion

The Display Suite module for Drupal 7 is the ideal tool for all themers. It makes the work much easier. Finally, you have full power to control the output of content and all your layouts stay in one place. All settings are exportable via features, which makes DS ideal for development as well. As mentioned above, the new version will play together nicely with panels, so it is possible to use the panel layout editor on view modes.

For me, and I believe many others, DS is one of the most important tools to do theming in Drupal.

About the Autor

Tino Urbiks is a freelance Webdesigner and Drupal-themer based in Berlin. He is working with Drupal since 2008.

Comments

Wow! Excellent tutorial. Thank you for taking the time to write this. It's much appreciated.

Mohammed

Nice, useful write-up - thanks! I feel that one of Display Suites big strengths is being able to replace other modules. I had been playing with block_reference (well done module) but see now that I can get by with just DS and a block field.

One note: you have a missing/repeated screen shot above, right below where you say: "Click on "manage view modes" and create them. See the screenshot:"

Cheers,

Dave