Your SlideShare is downloading. ×
0
Display SuiteA Themer’s Perspective
By Danté TaylorMediacurrent Creative Director              @ThemeMaster
Key Assumptions You are familiar using Views Module You are familiar with Fields & Content Types You understand basic t...
http://www.flickr.com/photos/26658572@N03/2500158621
Can’t We AllJust Get Along
Display Suite Purpose Display Suite allows you to take full control over how  your content is displayed using a drag and ...
Module Maintainer          Written by Kristof De Jaeger          Experienced web developer ever since PHP 3 came out. He g...
Statistics & Reach   Maintenance Status: Actively maintained   Development Status: Under active development   Reported ...
Panels vs. Display Suite The Display Suite always starts with a single object such as a node  and offers a way to configu...
Panels vs. Display Suite With the Display Suite you can define the layout of your node  detail, but it does not take any ...
Key Concepts View Modes
Key Concepts View Modes Code Fields
Key Concepts View Modes Code Fields Styles
What are view modes?
View Modes View modes are another name for layouts in Display Suite They control how the page will be render via templat...
What are code fields?
Code Fields For Display Suite code fields are like what cck and and block api is  for drupal core. They all you to add c...
What are DS Styles?
Display Suite Styles Display suite styles all you to add custom classes to DS regions They allow you to add custom style...
$ drush dl ds
Getting Started
Getting Started
Getting Started
View Mode
New View
New View
How do you add custom      Layouts?
Custom Layouts<?phpfunction ds_article() {  return array(    label =>t(Article Layout),    regions => array(      header =...
Custom Layouts<?phpfunction ds_article() {  return array(    label =>t(Article Layout),    regions => array(      header =...
Custom Layouts.ds-header{float:none;    width:100%}.ds-content{float:none;    width:100%}.ds-footer{float:none;    width:1...
Custom Layouts <section class="article-wrapper <?php print $classes;?>clearfix"> <?php if (isset($title_suffix[contextual_...
Custom Layouts                 ds_article/article.tpl.php
Where To Get Help http://www.youtube.com/user/swentieman http://groups.drupal.org/display-suite http://vimeo.com/158639...
Don’t Forget to:Clear Your CacheHappy Theming!
Mediacurrent helps organizations architect custom websites byleveraging our proven processes and deep expertise in Drupal....
Upcoming SlideShare
Loading in...5
×

Display Suite: A Themers Perspective

37,753

Published on

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
37,753
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
29
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Transcript of "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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×