Content Make-Up | Display Suite for Drupal 7

Introduction – What is Display Suite?

It'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

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.

What Display Suite Gives You

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

– 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:

Choose a layout and modify it with your own CSS

Assign the fields to regions and change the semantic output

Create a custom view-mode

Use DS with views

Create a DS-field (I will use a block field in this example)

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.

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:

3. Create a custom view-mode

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.

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:

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

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:

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.