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

No notes for slide

Display Suite: A Themers Perspective

  1. 1. Display SuiteA Themer’s Perspective
  2. 2. By Danté TaylorMediacurrent Creative Director @ThemeMaster
  3. 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. 4. http://www.flickr.com/photos/26658572@N03/2500158621
  5. 5. Can’t We AllJust Get Along
  6. 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. 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. http://krimson.be/about/kristof-de-jaeger
  8. 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. 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. 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. 11. Key Concepts View Modes
  12. 12. Key Concepts View Modes Code Fields
  13. 13. Key Concepts View Modes Code Fields Styles
  14. 14. What are view modes?
  15. 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. 16. What are code fields?
  17. 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. 18. What are DS Styles?
  19. 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. 20. $ drush dl ds
  21. 21. Getting Started
  22. 22. Getting Started
  23. 23. Getting Started
  24. 24. View Mode
  25. 25. New View
  26. 26. New View
  27. 27. How do you add custom Layouts?
  28. 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/article.inc
  29. 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/article.inc
  30. 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. 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. 32. Custom Layouts ds_article/article.tpl.php
  33. 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. 34. Don’t Forget to:Clear Your CacheHappy Theming!
  35. 35. Mediacurrent helps organizations architect custom websites byleveraging our proven processes and deep expertise in Drupal. @mediacurrentmediacurrent.com