1. Display Suite
A Themer’s Perspective

2. By Danté Taylor
Mediacurrent Creative Director
@ThemeMaster

3. Key Assumptions
 You are familiar using Views Module
 You are familiar with Fields & Content Types
 You understand basic theming concepts
 You understand how to install Drupal modules
 Panels is not your only friend

4. http://www.flickr.com/photos/26658572@N03/2500158621

5. Can’t We All
Just Get Along

6. Display Suite Purpose
 Display Suite allows you to take full control over how
your content is displayed using a drag and drop
interface.
 Arrange your nodes, views, comments, user data etc.
the way you want without having to work your way
through dozens of template files.
 Packaged with predefined list of layouts
Source: http://drupal.org/project/ds

7. Module Maintainer
Written by Kristof De Jaeger
Experienced web developer ever since PHP 3 came out. He got
hooked on Drupal after experimenting with tons of other
frameworks including writing his own - who didn't right ? He has
written a dozen modules, writes patches for Drupal core and will
review every single line of code that goes out into production.
He's not afraid to dive into code and research best performance
practices in order to save kittens. His passion is so big he got a
Druplicon tattoo on his wrist. Talk about dedication! Thinks a day
should have 36 hours so he can finally release that one rock
album to conquer the world and retire on his own private island.
Builds arcade machines in the meantime to relive his childhood.
http://krimson.be/about/kristof-de-jaeger

8. Statistics & Reach
 Maintenance Status: Actively maintained
 Development Status: Under active development
 Reported Installs: 21,846 active sites
 Downloads: 84,275
 Last modified: April 14, 2012
 Stable Version: 7.x-1.5
 Ranked: 113 out of 9728
Source: http://drupal.org/project/ds

9. Panels vs. Display Suite
 The Display Suite always starts with a single object such as a node
and offers a way to configure its display by rearranging the fields for
that node in a fixed 5 column layout.
 Panels is focused on combining different objects such as blocks,
nodes, Views etc. together in a variety of layouts.
 As mentioned, Panels Pages offer the option to change the layout of
the detail page of a node and you have the option to create several
variants based on arguments.
Source: http://www.jyvesgarden.com/blog/display-suite-vs-panels

10. Panels vs. Display Suite
 With the Display Suite you can define the layout of your node
detail, but it does not take any arguments.
 Double nesting: In DS, you can put your fields in one of the 5
regions, but inside those regions, you can also group them together
in fieldgroups.
 Panels is restricted to one level of grouping.
Source: http://www.jyvesgarden.com/blog/display-suite-vs-panels

11. Key Concepts
 View Modes

12. Key Concepts
 View Modes
 Code Fields

13. Key Concepts
 View Modes
 Code Fields
 Styles

14. What are view modes?

15. View Modes
 View modes are another name for layouts in Display Suite
 They control how the page will be render via templates
 You are allowed to create custom templates
 Unlike the Panalizer Module you can’t mange display the size
placement of regions through the UI. Although using CSS it is
possible to achieve similar results

16. What are code fields?

17. Code Fields
 For Display Suite code fields are like what cck and and block api is
for drupal core.
 They all you to add custom and system generated variables directly
to multiple entity types.
 You can also access any variable that your theme templates have
access to using dynamic fields

18. What are DS Styles?

19. Display Suite Styles
 Display suite styles all you to add custom classes to DS regions
 They allow you to add custom styles to individual fields
 Functions a lot like panels and skinr style options

20. $ drush dl ds

21. Getting Started

22. Getting Started

23. Getting Started

24. View Mode

25. New View

26. New View

27. How do you add custom
Layouts?

28. Custom Layouts
<?php
function ds_article() {
return array(
'label' =>t('Article Layout'),
'regions' => array(
'header' =>t('Header'),
'middle' =>t('Content'),
'footer' =>t('Footer')
),
// Add this line if there is a default css file.
'css' => TRUE,
);
}
?>
themes/demo/ds_article/article.inc

29. Custom Layouts
<?php
function ds_article() {
return array(
'label' =>t('Article Layout'),
'regions' => array(
'header' =>t('Header'),
'middle' =>t('Content'),
'footer' =>t('Footer')
),
// Add this line if there is a default css file.
'css' => TRUE,
);
}
?>
themes/demo/ds_article/article.inc

30. Custom Layouts
.ds-header{
float:none;
width:100%
}
.ds-content{
float:none;
width:100%
}
.ds-footer{
float:none;
width:100%
}
themes/demo/ds_article/article.css

31. Custom Layouts
<section class="article-wrapper <?php print $classes;?>clearfix">
<?php if (isset($title_suffix['contextual_links'])): ?>
<?php print render($title_suffix['contextual_links']); ?>
<?phpendif; ?>
<?php if ($header): ?>
<header class="ds-header<?php print $header_classes; ?>">
<?php print $header; ?>
</header>
<?phpendif; ?>
<?php if ($middle): ?>
<section class="yb-main-content-wrapper">
<div class="ds-content<?php print $middle_classes; ?>">
<?php print $middle; ?>
</div>
</section>
<?phpendif; ?>
<?php if ($footer): ?>
<footer class="ds-footer<?php print $footer_classes; ?>">
<?php print $footer; ?>
</footer>
<?phpendif; ?>
</section>
ds_article/article.tpl.php

32. Custom Layouts
ds_article/article.tpl.php

33. Where To Get Help
 http://www.youtube.com/user/swentieman
 http://groups.drupal.org/display-suite
 http://vimeo.com/15863937
 http://drupal.org/node/644706
 http://krimson.be
Source: http://www.jyvesgarden.com/blog/display-suite-vs-panels

34. Don’t Forget to:
Clear Your Cache
Happy Theming!

35. Mediacurrent helps organizations architect custom websites by
leveraging our proven processes and deep expertise in Drupal.
@mediacurrentmediacurrent.com