Learn Drupal's Most Powerful Site-Building Modules: Display Suite, Context, Views, & Panels
•Als KEY, PDF herunterladen•
16 gefällt mir•10,481 views
This document summarizes a presentation about using Display Suite, Context, Views, and Panels modules in Drupal to build sites. It discusses how these modules can be used individually and together to construct content, arrange blocks on pages, and display content lists. Display Suite is highlighted as a powerful tool for building custom content and Views, while Context is useful for arranging blocks. The presentation provides examples of how to integrate these modules and considers real-world use cases.
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Andere mochten auch
Andere mochten auch (20)
Ähnlich wie Learn Drupal's Most Powerful Site-Building Modules: Display Suite, Context, Views, & Panels
Ähnlich wie Learn Drupal's Most Powerful Site-Building Modules: Display Suite, Context, Views, & Panels (20)
Mehr von Mediacurrent
Mehr von Mediacurrent (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Learn Drupal's Most Powerful Site-Building Modules: Display Suite, Context, Views, & Panels
- 1. Learn Drupal's Most Powerful Site- Building Modules: Display Suite, Context, Views, & Panels By Jay Callicott Lead Architect CapitalCamp 2012 July 27, 2012
- 2. Outline • About Jay • Why talk about DS, Context, Views & Panels? • Breaking Down a Site Design • Content vs. Pages • Laying Out Blocks on a Page • Walkthrough of Context, Panels, Display Suite • Constructing Content in Drupal • Views • Use Cases
- 3. About Jay
- 4. About Jay • Mediacurrent Lead Architect
- 5. About Jay • Mediacurrent Lead Architect • Drupal developer since Drupal 4.6
- 6. About Jay • Mediacurrent Lead Architect • Drupal developer since Drupal 4.6 • OpenChurch Distribution Maintainer
- 7. About Jay • Mediacurrent Lead Architect • Drupal developer since Drupal 4.6 • OpenChurch Distribution Maintainer • @drupalninja
- 8. Why talk about DS, Context, Views & Panels?
- 9. Why talk about DS, Context, Views & Panels? • Not a lot of presentations that cover using these tools together
- 10. Why talk about DS, Context, Views & Panels? • Not a lot of presentations that cover using these tools together • I like talking strategy/philosophy of site building, not just “How To”
- 11. Why talk about DS, Context, Views & Panels? • Not a lot of presentations that cover using these tools together • I like talking strategy/philosophy of site building, not just “How To” • All of these tools use the UI - you don’t have to be a hard core developer to build advanced Drupal sites!
- 12. Why talk about DS, Context, Views & Panels? • Not a lot of presentations that cover using these tools together • I like talking strategy/philosophy of site building, not just “How To” • All of these tools use the UI - you don’t have to be a hard core developer to build advanced Drupal sites! • Panels + Context + DS have = 1 million downloads combined
- 13. Breaking Down a Site Design
- 16. Blocks
- 17. Blocks Fields
- 18. Breaking Down a Site Design
- 20. Title Body Blocks
- 22. Content vs. Pages • Let’s clarify terminology
- 23. Content vs. Pages • Let’s clarify terminology • Content uses a Drupal content structure like a content type (also users, taxonomy, etc.)
- 24. Content vs. Pages • Let’s clarify terminology • Content uses a Drupal content structure like a content type (also users, taxonomy, etc.) • The Amazon Homepage is a page
- 25. Content vs. Pages • Let’s clarify terminology • Content uses a Drupal content structure like a content type (also users, taxonomy, etc.) • The Amazon Homepage is a page • The Kindle Fire Product Page is a Product, therefore it is content
- 26. Content vs. Pages • Let’s clarify terminology • Content uses a Drupal content structure like a content type (also users, taxonomy, etc.) • The Amazon Homepage is a page • The Kindle Fire Product Page is a Product, therefore it is content • The tools for constructing Content vs. Pages can vary
- 27. Laying Out Blocks on a Page • Block Admin Page • The default Drupal way to place blocks • Can get....messy
- 28. Context
- 29. Set visibility Add blocks to regions
- 30. Drag and drop blocks Modify your context inline
- 31. Exportable!
- 32. Panels
- 33. Panels • Can create arbitrary layouts within the content area of a page
- 34. Panels • Can create arbitrary layouts within the content area of a page • Not limited to theme’s defined regions
- 35. Panels • Can create arbitrary layouts within the content area of a page • Not limited to theme’s defined regions • Exportable!
- 36. Panels • Can create arbitrary layouts within the content area of a page • Not limited to theme’s defined regions • Exportable! • Learning Curve, UI not super-intuitive
- 37. Panels Example
- 40. Constructing Content in Drupal The Basic Drupal Fields UI
- 41. The theme layer
- 43. Constructing Content in Drupal
- 44. Constructing Content in Drupal • Panels Node Template
- 45. Constructing Content in Drupal • Panels Node Template • Can also layout content
- 46. Constructing Content in Drupal • Panels Node Template • Can also layout content • Configurable arguments are great!
- 47. Constructing Content in Drupal • Panels Node Template • Can also layout content • Configurable arguments are great! • UI still makes some people crazy
- 53. Constructing Content with Display Suite
- 54. Constructing Content with Display Suite • My new favorite toy!
- 55. Constructing Content with Display Suite • My new favorite toy! • Extends Drupal UI
- 56. Constructing Content with Display Suite • My new favorite toy! • Extends Drupal UI • More intuitive than Panels
- 57. Constructing Content with Display Suite • My new favorite toy! • Extends Drupal UI • More intuitive than Panels • Can also use Panels!
- 58. Constructing Content with Display Suite • My new favorite toy! • Extends Drupal UI • More intuitive than Panels • Can also use Panels! • Create custom Display modes - Important!
- 59. Constructing Content with Display Suite • My new favorite toy! • Extends Drupal UI • More intuitive than Panels • Can also use Panels! • Create custom Display modes - Important! • Exportable
- 60. Constructing Content with Display Suite • My new favorite toy! • Extends Drupal UI • More intuitive than Panels • Can also use Panels! • Create custom Display modes - Important! • Exportable • Create custom layouts very easily
- 61. Constructing Content with Display Suite • My new favorite toy! • Extends Drupal UI • More intuitive than Panels • Can also use Panels! • Create custom Display modes - Important! • Exportable • Create custom layouts very easily • Works well with views
- 62. Constructing Content with Display Suite • My new favorite toy! • Extends Drupal UI • More intuitive than Panels • Can also use Panels! • Create custom Display modes - Important! • Exportable • Create custom layouts very easily • Works well with views DS Search is great too!
- 63. Panels + DS
- 65. Create custom view modes here
- 66. DS Select Layout
- 68. DS Custom Layout
- 71. Pulling Content
- 72. Pulling Content • Views! Everyone’s favorite UI tool
- 73. Pulling Content • Views! Everyone’s favorite UI tool • Views are all over the place!
- 74. Pulling Content • Views! Everyone’s favorite UI tool • Views are all over the place! • What’s a good strategy for using Views with these tools?
- 76. Constructing Views • Important to Site Building
- 77. Constructing Views • Important to Site Building • Row style - Content vs. Views
- 78. Constructing Views • Important to Site Building • Row style - Content Row Style vs. Views
- 79. Constructing Views • Important to Site Building • Row style - Content Row Style vs. Views View Modes
- 81. Constructing Views • In Drupal 6 I used fields exclusively
- 82. Constructing Views • In Drupal 6 I used fields exclusively • The problem...duplication
- 83. Constructing Views • In Drupal 6 I used fields exclusively • The problem...duplication • Multiple views with same ‘theme’ and same ‘fields’
- 84. Constructing Views • In Drupal 6 I used fields exclusively • The problem...duplication • Multiple views with same ‘theme’ and same ‘fields’ • Also inefficient because more fields = more joins
- 85. Constructing Views • In Drupal 6 I used fields exclusively • The problem...duplication • Multiple views with same ‘theme’ and same ‘fields’ • Also inefficient because more fields = more joins
- 87. Constructing Views • In Drupal 7 I have gone back to ‘Content’ (formerly node) style output
- 88. Constructing Views • In Drupal 7 I have gone back to ‘Content’ (formerly node) style output • Delegate theming to the content type
- 89. Constructing Views • In Drupal 7 I have gone back to ‘Content’ (formerly node) style output • Delegate theming to the content type • Custom view modes means you can theme differently based on the context
- 90. Constructing Views • In Drupal 7 I have gone back to ‘Content’ (formerly node) style output • Delegate theming to the content type • Custom view modes means you can theme differently based on the context • Simplify your views!
- 91. Constructing Views • In Drupal 7 I have gone back to ‘Content’ (formerly node) style output • Delegate theming to the content type • Custom view modes means you can theme differently based on the context • Simplify your views! • Less joins!
- 92. Constructing Views • In Drupal 7 I have gone back to ‘Content’ (formerly node) style output • Delegate theming to the content type • Custom view modes means you can theme differently based on the context • Simplify your views! • Less joins! • More re-use
- 93. Constructing Views • In Drupal 7 I have gone back to ‘Content’ (formerly node) style output • Delegate theming to the content type Avoid Field Bloat! you can theme • Custom view modes means differently based on the context • Simplify your views! • Less joins! • More re-use
- 94. Display Suite + Views
- 95. Display Suite + Views • Display Suite + Views, a match made in heaven
- 96. Display Suite + Views • Display Suite + Views, a match made in heaven • DS lets you create arbitrary view modes
- 97. Display Suite + Views • Display Suite + Views, a match made in heaven • DS lets you create arbitrary view modes • Examples:
- 98. Display Suite + Views • Display Suite + Views, a match made in heaven • DS lets you create arbitrary view modes • Examples: • Teaser - (default) You can use for your basic most common teaser
- 99. Display Suite + Views • Display Suite + Views, a match made in heaven • DS lets you create arbitrary view modes • Examples: • Teaser - (default) You can use for your basic most common teaser • Homepage Teaser - customize for homepage
- 100. Display Suite + Views • Display Suite + Views, a match made in heaven • DS lets you create arbitrary view modes • Examples: • Teaser - (default) You can use for your basic most common teaser • Homepage Teaser - customize for homepage • Gallery Teaser
- 101. Display Suite + Views • Display Suite + Views, a match made in heaven • DS lets you create arbitrary view modes • Examples: • Teaser - (default) You can use for your basic most common teaser • Homepage Teaser - customize for homepage • Gallery Teaser • Article content will use image thumb, Video content might use 3rd party image
- 102. Display Suite + Views • Display Suite + Views, a match made in heaven • DS lets you create arbitrary view modes • Examples: • Teaser - (default) You can use for your basic most common teaser • Homepage Teaser - customize for homepage DS + Views • Gallery Teaser • Article content will use image thumb, Video content might use 3rd party image
- 103. Display Suite + Views
- 104. Display Suite + Views • In the view, select ‘Content’ row style and use view-mode ‘Teaser’
- 105. Display Suite + Views • In the view, select ‘Content’ row style and use view-mode ‘Teaser’ Select your view mode
- 106. Display Suite + Views • In the view, select ‘Content’ row style and use view-mode ‘Teaser’ Select your view mode • My favorite way to site build!
- 107. Display Suite + Views • In the view, select ‘Content’ row style and use view-mode ‘Teaser’ Select your view mode • My favorite way to site build! • View mode are exportable to features
- 108. Putting it All Together
- 109. Putting it All Together • Display Suite is my go-to tool for constructing content, both ‘Full Content’ pages and views content
- 110. Putting it All Together • Display Suite is my go-to tool for constructing content, both ‘Full Content’ pages and views content • Context is my go-to tool for arrange blocks onto pages
- 111. Putting it All Together • Display Suite is my go-to tool for constructing content, both ‘Full Content’ pages and views content • Context is my go-to tool for arrange blocks onto pages • View is my go-to tool of course for creating lists of content
- 112. Putting it All Together • Display Suite is my go-to tool for constructing content, both ‘Full Content’ pages and views content • Context is my go-to tool for arrange blocks onto pages • View is my go-to tool of course for creating lists of content • Panels is not quite a go-to tool for me as much
- 113. Use Cases • Let’s look at a couple real-world examples • We’ll compare tools we could use to build these pages
- 117. These could be your panel regions
- 118. Up here might be context or page.tpl.php These could be your panel regions
- 121. Could be all context & theme regions
- 122. Content Page Example
- 126. Could be a DS View pulling a custom view mode
- 127. Could be a DS View pulling a custom view mode Additional Fields - could be Panel fields or DS
- 128. To Summarize... • Drupal offers very powerful UI tools for constructing pages and content • You can build very robust sites in Drupal without coding • Hopefully you have a better understanding how these tools can be used, individually and together
- 129. That’s It! • Context - http://drupal.org/project/context • Panels - http://drupal.org/project/panels • Display Suite - http://drupal.org/project/ds • Views - http://drupal.org/project/views Questions? @drupalninja
Hinweis der Redaktion
- \n
- 1. Today I will attempt to give a good overview of how Context, Panels, Display Suite and Views work together on a site.\n2. I’ll talk pros and cons and about my strategy with using these tools\n3. I have lots of screenshots and examples to illustrate how to use these tools to construct a site\n
- \n
- \n
- \n
- \n
- 1. Over 1 million downloads and yet a lot of people I talk to at these camps don’t use these tools regularly or don’t know a lot about them\n
- 1. Over 1 million downloads and yet a lot of people I talk to at these camps don’t use these tools regularly or don’t know a lot about them\n
- 1. Over 1 million downloads and yet a lot of people I talk to at these camps don’t use these tools regularly or don’t know a lot about them\n
- 1. Over 1 million downloads and yet a lot of people I talk to at these camps don’t use these tools regularly or don’t know a lot about them\n
- 1. One way to deconstruct a site design is to see blocks and fields\n2. A block can be just about anything, a blurb of information, a dynamic list, a menu, a field\n3. A field is pulling a specific piece of information from a piece of content \n\n
- 1. One way to deconstruct a site design is to see blocks and fields\n2. A block can be just about anything, a blurb of information, a dynamic list, a menu, a field\n3. A field is pulling a specific piece of information from a piece of content \n\n
- 1. One way to deconstruct a site design is to see blocks and fields\n2. A block can be just about anything, a blurb of information, a dynamic list, a menu, a field\n3. A field is pulling a specific piece of information from a piece of content \n\n
- 1. One way to deconstruct a site design is to see blocks and fields\n2. A block can be just about anything, a blurb of information, a dynamic list, a menu, a field\n3. A field is pulling a specific piece of information from a piece of content \n\n
- 1. Even if you have a simple page you might still think of it this way\n
- 1. Even if you have a simple page you might still think of it this way\n
- 1. We just talked about dividing a page design into blocks and fields. I also separate Content from Pages.\n
- 1. We just talked about dividing a page design into blocks and fields. I also separate Content from Pages.\n
- 1. We just talked about dividing a page design into blocks and fields. I also separate Content from Pages.\n
- 1. We just talked about dividing a page design into blocks and fields. I also separate Content from Pages.\n
- 1. We just talked about dividing a page design into blocks and fields. I also separate Content from Pages.\n
- 1. Let’s talk tools!\n2. We’ll talk Pages first, what are our options for laying out blocks on a page?\n3. This is a Drupal 6 example of the Admin Block Page and an example of where it can get messy.\n
- 1. Context in my view is a lot better for laying out blocks\n2. More of a learning curve perhaps, but can be more organized\n
- 1. This is a OpenChurch ‘global’ context example illustrating how blocks are arranged into theme regions\n2. There are more options than just blocks\n
- 1. The Admin module has a nice UI tool for modifying contexts inline\n2. And Contexts are exportable!\n
- 1. I have given some presentations on Features several times and so a big emphasis for me is exportability\n
- 1. Now Let’s talk Panels\n2. An aside, “Panels Everywhere” controls the whole page’s layout and is interesting although outside of the scope of this discussion.\n
- 1. Now Let’s talk Panels\n2. An aside, “Panels Everywhere” controls the whole page’s layout and is interesting although outside of the scope of this discussion.\n
- 1. Now Let’s talk Panels\n2. An aside, “Panels Everywhere” controls the whole page’s layout and is interesting although outside of the scope of this discussion.\n
- 1. Now Let’s talk Panels\n2. An aside, “Panels Everywhere” controls the whole page’s layout and is interesting although outside of the scope of this discussion.\n
- 1. Panels does have a nicer inline editing option called IPE which is illustrated here on the homepage\n
- 1. Panels does have a nicer inline editing option called IPE which is illustrated here on the homepage\n
- 1. Now let’s talk tools to build content\n2. Can arrange fields just using the Drupal UI and you have some flexibility\n3. This is exportable to Features\n
- 1. You can also use your theme to customize content\n2. Can have more control\n3. You have configuration store in code, version control, etc.\n4. This is pretty straight forward until you have to do ‘dynamic’ things, then things can get hairy\n
- 1. Now let’s look at how Panels can be used for building content pages\n2. When I figured out Panels node template I stopped using the theme layer at all for nodes or user customizations\n3. Not going to cover Panelizer\n
- 1. Now let’s look at how Panels can be used for building content pages\n2. When I figured out Panels node template I stopped using the theme layer at all for nodes or user customizations\n3. Not going to cover Panelizer\n
- 1. Now let’s look at how Panels can be used for building content pages\n2. When I figured out Panels node template I stopped using the theme layer at all for nodes or user customizations\n3. Not going to cover Panelizer\n
- 1. Now let’s look at how Panels can be used for building content pages\n2. When I figured out Panels node template I stopped using the theme layer at all for nodes or user customizations\n3. Not going to cover Panelizer\n
- 1. This illustrates the friendlier inline editor we saw earlier\n
- 1. This illustrates the friendlier inline editor we saw earlier\n
- 1. This is another way to edit that same page we were looking at\n2. This screen is more controversial, some people like it, some hate it\n3. Panelizer is probably a more friendly way to handle this\n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- 1. This is pretty cool...\n
- 1. Drupal comes with a couple, ‘Default’ and ‘Teaser’, many modules add additional view modes as well\n2. This screen just determines where the new view mode will show up\n
- 1. DS gives you new layout options on the Drupal Manage Display Page\n2. It’s interesting that Panels & DS layouts are interchangeable\n
- 1. This is a custom layout I defined in the theme layer which is pretty easy (works with Panels too)\n
- 1. This is a custom layout I defined in the theme layer which is pretty easy (works with Panels too)\n
- 1. We’ve talked tools for building pages and content, now let’s talk about pulling content\n
- 1. We’ve talked tools for building pages and content, now let’s talk about pulling content\n
- 1. We’ve talked tools for building pages and content, now let’s talk about pulling content\n
- 1. Most developers know Views, but I want to talk a little strategy\n2. In Drupal 4-5 I used to use node and I would find out pretty quick that the customer wanted to display content differently depending on the ‘context’ of where the content was being displayed. Having 1 ‘Teaser’ display mode was not enough. This led to node.tpl.php craziness!\n
- 1. Most developers know Views, but I want to talk a little strategy\n2. In Drupal 4-5 I used to use node and I would find out pretty quick that the customer wanted to display content differently depending on the ‘context’ of where the content was being displayed. Having 1 ‘Teaser’ display mode was not enough. This led to node.tpl.php craziness!\n
- 1. Most developers know Views, but I want to talk a little strategy\n2. In Drupal 4-5 I used to use node and I would find out pretty quick that the customer wanted to display content differently depending on the ‘context’ of where the content was being displayed. Having 1 ‘Teaser’ display mode was not enough. This led to node.tpl.php craziness!\n
- 1. Most developers know Views, but I want to talk a little strategy\n2. In Drupal 4-5 I used to use node and I would find out pretty quick that the customer wanted to display content differently depending on the ‘context’ of where the content was being displayed. Having 1 ‘Teaser’ display mode was not enough. This led to node.tpl.php craziness!\n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- 1. The main reason why I wanted to bring up views was to talk about views & DS\n
- 1. The main reason why I wanted to bring up views was to talk about views & DS\n
- 1. The main reason why I wanted to bring up views was to talk about views & DS\n
- 1. The main reason why I wanted to bring up views was to talk about views & DS\n
- 1. The main reason why I wanted to bring up views was to talk about views & DS\n
- 1. The main reason why I wanted to bring up views was to talk about views & DS\n
- 1. The main reason why I wanted to bring up views was to talk about views & DS\n
- 1. The main reason why I wanted to bring up views was to talk about views & DS\n
- \n
- \n
- \n
- \n
- 1. I use Panels primarily for page layouts where the layout is different enough to justify\n2. The Panels UI is just too outside of the Drupal UI, mixing Panels with Context is confusing\n
- 1. I use Panels primarily for page layouts where the layout is different enough to justify\n2. The Panels UI is just too outside of the Drupal UI, mixing Panels with Context is confusing\n
- 1. I use Panels primarily for page layouts where the layout is different enough to justify\n2. The Panels UI is just too outside of the Drupal UI, mixing Panels with Context is confusing\n
- 1. I use Panels primarily for page layouts where the layout is different enough to justify\n2. The Panels UI is just too outside of the Drupal UI, mixing Panels with Context is confusing\n
- \n
- 1. Could be a panel\n2. Could use context for some persistent elements\n
- 1. Could be a panel\n2. Could use context for some persistent elements\n
- 1. Could be a panel\n2. Could use context for some persistent elements\n
- 1. Could be a panel\n2. Could use context for some persistent elements\n
- 1. Let’s Look at this page again\n2. This could all be context\n3. A tie breaker for me is how different this is from the normal layout of the rest of the site\n
- 1. Let’s Look at this page again\n2. This could all be context\n3. A tie breaker for me is how different this is from the normal layout of the rest of the site\n
- 1. Here is a content page example\n
- 1. Here is a content page example\n
- 1. Here is a content page example\n
- 1. Here is a content page example\n
- 1. Here is a content page example\n
- \n
- \n