become a panels rockstar. audience survey have you tried panels? are you a …. –themer /...
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…..I’m 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 aren’t 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 I’m currently on?
OK…I’M SEMI-CONVINCED…WHAT DO I NEED TO GET STARTED?
What modules do I need?Module Novice Intermediate Pro
Chaos Tool Suite (ctools) X X X
Panels X X X
Views X X X
Page Manager X X X
Custom Content Panes X X
Views Content Panes X
Custom Rulesets X
Mini Panels X
Provided by Chaos Tool Suite
NOVICE
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
What’s a Region?
• Regions are the building blocks of a Panel.
• Can be identified using custom classes and id’s.
• Contain Panes
What’s 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?
INTERMEDIATE
Page Manager
What’s a Page?• Nacho-momma’s 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 usea 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.
PRO
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 don’t do it.
• Only one line of code required to tell Panels where to look– plugins[layouts][] = <foldername>
• 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
<?php print $content[‘region-name’];?>
– Drupal 7• <?php print $regions[‘region-name’]; ?>
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 aren’t 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 file—and 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.