GETTING THE MOST
OUT OF PANELS
Mediacurrent
Red Hat
Derek DeRaps & Kendall Totten
#with-more-beard
@kendalltotten
WHY IS PANELS AWESOME?
- It allows a site administrator to create customized layouts for multiple uses.
WHY IS PANELS AWESOME?
-
It allows a site administrator to create customized layouts for multiple uses.
- The layout builder! (but don't use the flexible layout)
GROSS.
WHY IS PANELS AWESOME?
-
It allows a site administrator to create customized layouts for multiple uses.
- The layout builder!
- It supports the styles plugin
WHY IS PANELS AWESOME?
- It allows a site administrator to create customized layouts for multiple uses.
-
The layout builder!
- It supports the styles plugin
- It includes a pluggable caching mechanism
WHY IS PANELS AWESOME?
-
It allows a site administrator to create customized layouts for multiple uses.
- The layout builder!
- It supports the styles plugin
- It includes a pluggable caching mechanism
- It can be integrated with Organic Groups
WHY IS PANELS AWESOME?
-
It allows a site administrator to create customized layouts for multiple uses.
- The layout builder!
- It supports the styles plugin
- It includes a pluggable caching mechanism
- It can be integrated with Organic Groups and Views
WHY IS PANELS AWESOME?
-
It allows a site administrator to create customized layouts for multiple uses.
-
The layout builder!
-
It supports the styles plugin
-
It includes a pluggable caching mechanism
- It can be integrated with Organic Groups and Views
-
It allows a site administrator to create customized layouts for multiple uses
- Panels has an entire sub-ecosystem unto itself ...
Let's dive into some of the pearls!
Panels in action
panels in action
ADD STYLES TO PANES OR REGIONS
Add Styles to panes or regions
Ok, I want to use Panels!
how do I know where to start?
Panel nodes
-
A new content type in which you can create nodes.
- These new nodes are viewable in the /admin/content list
- They are searchable like regular nodes.
- The main difference is that you may add custom text or images to each panel node (beyond the defined fields, which you may add to this content type).
- There are no options related to variants, access control, or selection rules (we'll cover this later).
Example
one-off ad-campaign landing pages?
Panelize (existing) content types
- Use your existing content types and their defined fields
- Use the panels interface to place the fields on the page
PANELIZE (EXISTING) CONTENT TYPES
-
Create multiple displays for the same Content Type and let Users choose the one they want
PANELIZE (EXISTING) CONTENT TYPES
- You may “panelize” an individual node when it needs to break away from the default display defined for that Content Type
PANELIZE (EXISTING) CONTENT TYPES
-
Use different displays for each view mode
- Teasers
- How it appears in search results
- Views results
- Any other custom display mode you might need
Panel Pages (with variants)
- a.k.a "Page Manager," often referred to as just "Panels"
- Different from the traditional idea of content (nodes).
- They do not show up in the Drupal admin/content listing
- Like Views, they have a path, arguments, and conditions
- Special pages (e.g., Node View) vs. Custom Pages
PANEL PAGES (WITH VARIANTS)
- Variants - Different versions of the same “page”
PANEL PAGES (WITH VARIANTS)
-
Selection rules - Criteria for controlling:
- Access Control (user access)
- Variant selection
- Pane display
PANEL PAGES (WITH VARIANTS)
- Context - Add additional context objects to this variant that can be used by the content.
PANEL PAGES (WITH VARIANTS)
Example: Language Variants
Panel Page Example
- Fancy landing page with it's own custom layout, unique content, and unique URL:
boydstoast.com/half-off-toast-sale
image source: theoatmeal.com
PANEL PAGE EXAMPLE
Multiple variants: show a different display based on user role
1-column layout for anonymous users, showing the general event description and details
2-column layout for authenticated users, so that a registration form can be shown in the sidebar
More goodies!
(for Panels)
PANELS IN-PLACE EDITOR
-
Provides a UI for managing some Panels directly on the frontend, instead of having to use the backend.
-
This is especially useful when Panelizing nodes, where you may want the flexibility to freely move panes around the page and play with the layout.
-
Works with workbench moderation (jk!)
Mini-Panels
- Mini panels can be used as blocks by traditional Drupal pages or as panes by other panel pages.
- Useful for moving around groups of sidebar content to reuse across various content types.
- Essentially they are small panelized content areas for
when you need to have complex block layouts, or
layouts within your layouts...
Panels Everywhere
-
A complete replacement for your theme page templates (page.tpl.php) in the same way that Panels can be a complete replacement for your site's node templates (node.tpl.php).
- The difference between Panels and Panels Everywhere is that PE is "aware" of page elements (like menus) that are not visible to Panels or node templates
Fieldable Panels Panes (and bundles)
-
This module creates a fieldable entity that may be placed onto panel pages as a pane. These panes can be created either directly in the Panels UI or in a separate administrative UI and later added.
- Once added, they can be easily reused.
- Each entity supports revisions, and any revision can be made current without having to make a new revision.
- FPPs can be translated
- You can create the various types of FPPs by using the FPP Bundles module.
"Content Type" plugins
- It's not what you think!
- No relationship to Drupal content types aka Nodes.
- Content Type plugins are an easy way to create custom markup for a pane.
-
Works just like a custom block defined by hook_block_info()
And last but not least...
Classy Panel Styles module!
It allows editors to apply ready-made styles
the themer has whipped up for them —
to Panel Panes AND Regions!
How it works
Content editors can apply styles to
panel panes or regions to add background
colors, widths, layouts and more.
Classy Panel Styles Module
Beyond that, it provides flexibility with page layouts
when they need it, without requiring 101 options.
Make it easy for content editors to:
- Apply styles without remembering CSS classes
- Create customized layouts without flexible panels builder
- Change styles without editing CSS
- Update pages & styles on the live site without pushing code
Can it get even better? Yes!
Panel styles can be previewed in the editor!
How Is it Different?
What about Panels Extra Styles or Semantic Panels?
These modules are similar, but Classy Panel Styles:
- Shows your Panel Pane & Region styles in the Editor
- Content Editors can apply more than one style set
- Content Editors don't have to remember CSS classes
- Gives you a UI to define new style sets!
DO We take the stuff below out?
except for maybe the part about javascript, that might be a good-to-know
butt, how does it work?!?
Storage and ui
- CTools Export UI plugin (aka CTools Object plugin)
- Creates a database table
- Provides full CRUD UI (demo) and Features integration
Style Plugin
- One style plugin definition; provides multiple SubStyles
- Templates insert the classes to Pane & Region markup
JS MAGIC SAUCE
- Form stores the class names into Drupal.settings
- Element IDs "#panel-pane-1" => classes "float-left blue"
- JS added to the Panels editor to apply those classes
create custom styles!
use Sass!
- Delete, modify or add to the example styles that come with the Classy Panel Styles module
-
First define your styles in the interface, then create or modify the styles in the CSS or Sass.
questions?
Resources:
-
http://drupal.org/project/panels
-
d.o/project/panelizer
-
d.o/project/fieldable-panels-panes
-
d.o/project/classy-panel-styles
-
Panels Theme Override: d.o/sandbox/mrjmd/2446801
paranoia backup 4-7-15
By Kendall Totten
paranoia backup 4-7-15
Panels, how hard can it be?
