0
Content visualization with Display Suite Drupal Meetup Singapore 1 st  March 2011
O hi! <ul><li>Matthias Vandermaesen
Drupal Ninja from Belgium
@netsensei </li></ul>
Wordpress
Krimson http://www.krimson.be
Krimson
Mollom Http://www.mollom.com
Pandion Http://pandion.im
Teach you how to control Drupal's output of content in a fast, easy and efficient way. Subject of the day
The problem Let's take a look at an example...
The problem
The problem <ul><li>Modern websites have/are... </li><ul><li>Complex layouts </li><ul><li>Stacked, columns, column spannin...
Grid systems </li></ul><li>Various layouts </li><ul><li>Content detail pages, overview pages, landing pages, Frontpage,......
Path, logged in, session,... </li></ul></ul></ul>
The problem Where do I show stuff on my site? When does it have to be shown? How will it be shown? Who can see stuff on my...
Two core concepts <ul><li>Two important concepts: </li><ul><li>Context </li><ul><li>When  will/should content be shown?
If vars A, B, C then show elements 1, 2, 3 </li></ul><li>Layout </li><ul><li>Where  will/should content be shown? </li></u...
Our challenge Our challenge Translate a static design, wireframes, requirements into a fully fledged Drupal based website
Two core concepts Today I'm only going to talk about controlling 'where' content gets placed in your layout
Drupals' limitations
Limitations <ul><li>Limitation #1: Controlling how objects get displayed </li><ul><li>Limited number of build modes
Hard to order fields within a build mode </li><ul><li>Frontend <> Backend
Clunky interface </li></ul><li>Hard to add extra content in a build mode
Hard to order fields
Hard to position fields </li></ul></ul>
Limitations <ul><li>Limitation #2: Controlling Views </li><ul><li>2 row style plugins: Fields & Node
Fields hell </li><ul><li>Order fields
Different Views displays ~ variations of content </li></ul><li>Theming hell </li><ul><li>“Views needs more <div>”
Template galore </li></ul></ul></ul>
Limitations <ul><li>Limitation #3: Theming Layer </li><ul><li>Template suggestions hell </li><ul><li>Herding cats
node-...tpl.php, page-...tpl.php,... </li></ul><li>Easy to mingle business / presentational logic </li><ul><li>Clutter op ...
Classic: “if path = x then show z” </li></ul><li>Base themes (like Zen) don't always make it easier </li></ul></ul>
Theming hell
Limitations <ul><li>Limitation #5: no central command </li><ul><li>ImageCache formatting
Views displays
CCK displays
Upcoming SlideShare
Loading in...5
×

Visualizing Content with Display Suite

3,205

Published on

Slides from a talk I gave for the Singaporean Drupal user group. (1st march 2011)

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

No Downloads
Views
Total Views
3,205
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
23
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "Visualizing Content with Display Suite"

  1. 1. Content visualization with Display Suite Drupal Meetup Singapore 1 st March 2011
  2. 2. O hi! <ul><li>Matthias Vandermaesen
  3. 3. Drupal Ninja from Belgium
  4. 4. @netsensei </li></ul>
  5. 5. Wordpress
  6. 6. Krimson http://www.krimson.be
  7. 7. Krimson
  8. 8. Mollom Http://www.mollom.com
  9. 9. Pandion Http://pandion.im
  10. 10. Teach you how to control Drupal's output of content in a fast, easy and efficient way. Subject of the day
  11. 11. The problem Let's take a look at an example...
  12. 12. The problem
  13. 13. The problem <ul><li>Modern websites have/are... </li><ul><li>Complex layouts </li><ul><li>Stacked, columns, column spanning,...
  14. 14. Grid systems </li></ul><li>Various layouts </li><ul><li>Content detail pages, overview pages, landing pages, Frontpage,... </li></ul><li>Dynamic </li><ul><li>Elements are removed or added dynamically
  15. 15. Path, logged in, session,... </li></ul></ul></ul>
  16. 16. The problem Where do I show stuff on my site? When does it have to be shown? How will it be shown? Who can see stuff on my site? ...
  17. 17. Two core concepts <ul><li>Two important concepts: </li><ul><li>Context </li><ul><li>When will/should content be shown?
  18. 18. If vars A, B, C then show elements 1, 2, 3 </li></ul><li>Layout </li><ul><li>Where will/should content be shown? </li></ul></ul><li>Where on your site =/= where in your layout </li><ul><li>Where on your site refers to a context </li></ul></ul>
  19. 19. Our challenge Our challenge Translate a static design, wireframes, requirements into a fully fledged Drupal based website
  20. 20. Two core concepts Today I'm only going to talk about controlling 'where' content gets placed in your layout
  21. 21. Drupals' limitations
  22. 22. Limitations <ul><li>Limitation #1: Controlling how objects get displayed </li><ul><li>Limited number of build modes
  23. 23. Hard to order fields within a build mode </li><ul><li>Frontend <> Backend
  24. 24. Clunky interface </li></ul><li>Hard to add extra content in a build mode
  25. 25. Hard to order fields
  26. 26. Hard to position fields </li></ul></ul>
  27. 27. Limitations <ul><li>Limitation #2: Controlling Views </li><ul><li>2 row style plugins: Fields & Node
  28. 28. Fields hell </li><ul><li>Order fields
  29. 29. Different Views displays ~ variations of content </li></ul><li>Theming hell </li><ul><li>“Views needs more <div>”
  30. 30. Template galore </li></ul></ul></ul>
  31. 31. Limitations <ul><li>Limitation #3: Theming Layer </li><ul><li>Template suggestions hell </li><ul><li>Herding cats
  32. 32. node-...tpl.php, page-...tpl.php,... </li></ul><li>Easy to mingle business / presentational logic </li><ul><li>Clutter op you tpl's and template.php with extra PHP
  33. 33. Classic: “if path = x then show z” </li></ul><li>Base themes (like Zen) don't always make it easier </li></ul></ul>
  34. 34. Theming hell
  35. 35. Limitations <ul><li>Limitation #5: no central command </li><ul><li>ImageCache formatting
  36. 36. Views displays
  37. 37. CCK displays
  38. 38. Block management
  39. 39. Formatter settings
  40. 40. ... </li></ul></ul>
  41. 41. The problem <ul><li>Inefficient development
  42. 42. Not user friendly / flexible </li><ul><li>Content editors might be deterred </li></ul><li>Maintainability </li><ul><li>Upgrade without breaking
  43. 43. Hard to debug </li></ul><li>Security </li><ul><li>PHP Filter: no-no! </li></ul></ul>
  44. 44. The problem Drupal can do better!
  45. 45. Contrib to the rescue
  46. 46. Contrib to the rescue <ul><li>Context
  47. 47. Display Suite
  48. 48. Panels
  49. 49. Spaces
  50. 50. Sections
  51. 51. Delta </li></ul>
  52. 52. Display Suite http://drupal.org/project/ds
  53. 53. Display Suite “ DS is an API that other modules can use to store and manipulate display data for objects (nodes, users, comments etc).”
  54. 54. Display Suite Demonstration
  55. 55. Display Suite <ul><li>Define custom build modes per Drupal object
  56. 56. Define custom fields (with token support)
  57. 57. Define custom field groups
  58. 58. Support for formatters
  59. 59. Plugins alter build modes @ runtime
  60. 60. It's an API : DS itself doesn't do anything </li></ul>
  61. 61. Display Suite + ... <ul><li>ND, ND_contrib </li><ul><li>Node display, CCK integration, Fivestar,... </li></ul><li>VD :: Views display integration
  62. 62. CD :: Comments display integration
  63. 63. UD :: User display integration
  64. 64. ...
  65. 65. http://drupal.org/node/644662
  66. 66. In D7 => DS Extra's </li></ul>
  67. 67. Display Suite + ... <ul><li>ND, ND_contrib </li><ul><li>Node display, CCK integration, Fivestar,... </li></ul><li>VD :: Views display integration
  68. 68. CD :: Comments display integration
  69. 69. UD :: User display integration
  70. 70. ...
  71. 71. http://drupal.org/node/644662
  72. 72. In D7 => DS Extra's </li></ul>
  73. 73. Display Suite <ul><li>What is a build mode? </li><ul><li>A display definition for an object (Teaser, Full node,...)
  74. 74. “How should it be displayed”
  75. 75. In D7: Build mode = View mode </li></ul><li>Build mode ~ Layout
  76. 76. Layout: 5 regions :: header, footer, left, middle, right </li><ul><li>Hold Object properties (CCK fields,...)
  77. 77. Hold DS Custom fields
  78. 78. Hold Blocks </li></ul></ul>
  79. 79. Display Suite <ul><li>Formatter support </li><ul><li>Formats individual CCK fields </li><ul><li>Defines “How will this field be displayed” </li></ul><li>Custom formatters module
  80. 80. http://drupal.org/project/custom_formatters </li><ul><li>Write your own formatters </li></ul><li>ImageCache formatters
  81. 81. http://drupal.org/project/imagecache </li><ul><li>Caches images / based on CCK ImageField </li></ul><li>Integrates with CCK, DS, Views, Panels,... </li></ul></ul>
  82. 82. Display Suite <ul><li>Build modes </li><ul><li>Take over the default build modes
  83. 83. Define your own custom build modes </li></ul><li>Integrates with Views row styles </li><ul><li>Views fields vs Node object </li></ul><li>Comes with minimal CSS for DS regions </li><ul><li>Easy positioning of regions so you don't have to
  84. 84. Consistent styling </li></ul></ul>
  85. 85. Display Suite <ul><li>DS manages the display of Drupal objects ... </li><ul><li>Easy management at object level
  86. 86. Stylesheet delight </li><ul><li>Few basic predefined styles (regions)
  87. 87. Completely overrideable </li></ul><li>Template suggestions in your theme </li><ul><li>Reduce overriden tpl's for extra classes,...
  88. 88. Unless you want to add extra variables </li></ul></ul></ul>
  89. 89. Display Suite <ul><li>... DS does not control your entire page layout </li><ul><li>Panels + Panels Everywhere modules </li></ul><li>... DS is not context aware! </li><ul><li>Context module + DS for node displays
  90. 90. Views integration
  91. 91. DS Plugins for @ runtime changes
  92. 92. Custom DS fields </li></ul></ul>
  93. 93. Display Suite Questions? Matthias Vandermaesen @netsensei Http://www.krimson.be
  1. A particular slide catching your eye?

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

×