Your SlideShare is downloading. ×
Display Suite: A Themers Perspective
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Display Suite: A Themers Perspective


Published on

Published in: Technology

  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Display SuiteA Themer’s Perspective
  • 2. By Danté TaylorMediacurrent 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.
  • 5. Can’t We AllJust 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:
  • 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 didnt 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. Hes 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.
  • 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:
  • 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:
  • 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:
  • 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<?phpfunction 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/
  • 29. Custom Layouts<?phpfunction 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/
  • 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 Source:
  • 34. Don’t Forget to:Clear Your CacheHappy Theming!
  • 35. Mediacurrent helps organizations architect custom websites byleveraging our proven processes and deep expertise in Drupal.