Become a Panels Rockstar

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 SEMICONVINCED…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
X
X
Custom Content Panes
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 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.
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 reused 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
My_layout.css
My_layout.tpl.php
Admin.css
Admin.tpl.php
: Plugin file
: Common CSS for this layout
: Output template
: Optional Admin CSS file
: Optional Admin template
My_Layout.inc
• Contains the array of information
regarding your layout for Panels
– Name:
– Category:
– Template:
– CSS:
– Admin Template:
– Admin CSS:
– Regions:
Layout Name
Groups layouts together
User-facing .tpl template
User-facing .css file
Admin-facing .tpl
Admin-specialized .css
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.