GETTING THE MOST
OUT OF PANELS



                                                         

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 
  • It integrates with 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 
  • It integrates with Views
  • It allows a site administrator to create customized layouts for multiple uses



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).

Examples

Panel Pages (with variants) 

  • They are completely separate from the idea of traditional nodes.
    • Instead, you'll use the Page Manager which provides a UI and API to manage pages within the site. 
  • They do not show up in the Drupal admin/content view
  • Panel pages can have a custom URL path
  • They can accept and pass through arguments 
  • They can be added to the Drupal menu system just like nodes

PANEL PAGES (WITH VARIANTS) 

  • They offer more complexity:
    • Variants - Different versions of the same “page,” depending on selection criteria.
    • Selection rules - Control the criteria used to decide whether or not a variant is used.
    • Context - Add additional context objects to this variant that can be used by the content.
    • Access control - This is a nice advantage over nodes because you don’t have to worry about Taxonomy Access Control - you can just enable / disable access per user role for an individual panel page.

Examples

  • used for standardized pages

Panelize (existing) content types

with the option to panelize individual nodes

  • The best of both worlds!
  • Use your existing content types and their defined fields (which are easier for your basic content editor to continue creating content)
  • Use the panels interface to determine where the fields are placed on the page
  • When necessary, you may “panelize” an individual node when it needs to break away from the style or layout that the other nodes use (of the same content type)

PANELIZE (EXISTING) CONTENT TYPES

  • Utilize variants to create standardized variations of layouts or style for a particular content type. Consistency is good!
  • Set Relationships ...
  • Panelizer also offers the ability to use panels for
    other view modes:
    • Teasers
    • How it appears in search results
    • Views results
    • Any other custom display mode you might need

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

Panels Theme Override

  • Is this worth a mention? We may want to just throw a link to it on a final resources page.

Fieldable Panels Panes (and bundles)


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?

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
  • d.o/sandbox/mrjmd/2446801


Panels

By Kendall Totten

Made with Slides.com

Panels

Make it easy for content editors to pick styles & apply classes to panel panes or regions.

  • 1,357

More from Kendall Totten