Presentation on theme: "Become a Panels Rockstar. Audience Survey Have you tried Panels? Are you a …. –Themer / Designer? –Developer / Code Junkie? –Information Architect?"— Presentation transcript:
Become a Panels Rockstar
Audience Survey Have you tried Panels? Are you a …. –Themer / Designer? –Developer / Code Junkie? –Information Architect?
Audience Survey Are you most familiar with… –Drupal 4.7 –Drupal 5.x –Drupal 6.x –Drupal 7.x –Shhhh…..Im developing Drupal 8.x Have you used the Context Module?
What are Panels? Panels are a flexible way to display various content with specific access controls simultaneously.
What Panels are NOT A replacement for all your content types. A way to make freeform HTML pages. As easy as making grilled cheese.
Should I use Panels? It depends. How big is your site going to be? How important are any two different pieces of data to a certain user or persona? What content is needed and when? The context of information matters!
Why not just use the Context module ? Reactions arent always so simple. Can work together, but not in/as a Panel. Realllllly big sites can be quite complex. –Large quantities of Context reactions might be hard to manage. Stressed about working with multiple layouts? What if I want to re-use data about the page Im currently on?
OK…IM SEMI- CONVINCED…WHAT DO I NEED TO GET STARTED?
What modules do I need? ModuleNoviceIntermediatePro Chaos Tool Suite (ctools) XXX Panels XXX Views XXX Page Manager XXX Custom Content Panes XX Views Content Panes X Custom Rulesets X Mini Panels X Provided by Chaos Tool Suite
Lets get to know the Panels interfaces.
Panel Nodes Great way to learn how to use Panels. Customizable layouts. Can add/remove blocks/forms/content as you please. Limited access to more complex information, such as views. Not a solution for ALL content.
What are the components of a Panel? Panels contain regions Regions contain Panes Panes contain everything else
Whats a Region? Regions are the building blocks of a Panel. Can be identified using custom classes and ids. Contain Panes
Whats a Pane? Panes are the meat of a Panel Any content added to the panel is treated as a Pane Can customize display with Stylizer or custom CSS
LETS BUILD IT ALREADY
First, we need… A situation which requires two chunks of content to be scanned by the user quickly. Lets try an Employment Info page. –Why should I work here? –What benefits are included?
Page Manager Whats a Page? Nacho-mommas standard HTML page A URL which can: –Respond with a specific HTTP status code –Display custom content –Help administrators manage the site –Control who has access to it –Pull content from different sources for later display
What is a Variant? A deviation from the norm. A way to make one page act like several An opportunity to provide different levels of access to content A way to take some complexity OUT of your site!
Selection Criteria Allows the site to filter pages and variants on a myriad of attributes. Can be customized to meet specific needs. Can use criteria from contexts given to the page.
Why would I use a Selection rule? Without them, the page will take over all potential instances of content. Sometimes different types of visitors need different content.
What is a context? Related information to the subject at-hand. Information that can be re-purposed throughout the site. Additional information the user wants!
Can contexts be inherited? In short no. If a Context is added to a Page a Panel Node cannot inherit it. It can be used to include specific content. Contexts can be passed to Views.
Using Views as Contexts Bring content into the page without loading everything. Use exposed views operators how you please. Give the user control to specific parts of the view.
Custom Access Rules Allows for complex access rules to be re- used and re-purposed throughout pages and panels. Exportable!
Custom Layouts Use Panels layouts as Views row formatters. Exportable!
Why not build custom layouts with the layout manager? We like clean output. Hard to extend into 960.gs and other structural frameworks –Some themes provide these Extra step talking to the database Less control over CSS
Hard Coded Layout Plugins When built-in layouts just dont do it. Only one line of code required to tell Panels where to look –plugins[layouts] = Where should I look for sample code? –Check out the Zen theme. –Adaptive Themes (AT) Panels??
Your very first layout plugin Layouts/ –My_layout/ My_layout.inc: Plugin file My_layout.css: Common CSS for this layout My_layout.tpl.php: Output template Admin.css: Optional Admin CSS file Admin.tpl.php: Optional Admin template
My_Layout.inc Contains the array of information regarding your layout for Panels –Name:Layout Name –Category:Groups layouts together –Template:User-facing.tpl template –CSS:User-facing.css file –Admin Template:Admin-facing.tpl –Admin CSS:Admin-specialized.css –Regions:Array of regions in template
My_Layout.inc $plugins[my_layout] = array( name => t(My Layout), category => t(My Layouts), template => my_layout.tpl.php, css => my_layout.css, admin template => admin.tpl.php, admin css => admin.css, // note: regions is content in Drupal 6 regions => array( top => t(Top Region), left => t(Left Region), ), );
Template.tpl.php How should I structure it? Are you using a grid system? What code is required? –Drupal 6 –Drupal 7 Caveats: Will be used for any user if no admin template exists.
Admin.tpl.php How should I structure it? Who can access it? –This is only visible to administrators. Why use it? –Sometimes you/your client needs complex displays that arent very easy to edit/add content to. –This makes it a breeze for admins to experience your panel structure exactly as is required!
My_Layout.css Contains the CSS for your end-user panel/regions Caveats: Try not to get too jazzy. You might find this template is useful elsewhere and want to do different things with it. Admins and end-users alike will encounter this CSS fileand it may be a bug. Focus on structural CSS, not visual.
Admin.css Contains the CSS for your admin panel/regions Caveats: Has to work alongside your user-facing CSS. Useful for overriding a few things that might be only in your user CSS.