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.