paraphrasing panels panelizer and panopoly

Paraphrasing Panels, Panelizer and PanopolyKeenan HollowayDeveloperForum One

Saturday, July 27, 13

PanelsThe Foundation


PanelsA standard way of customizing page displays


Panels: Install and EnableInstall CTools and Panels

Module/Sub-‐Module Enable:

CTools: Page Manager

Panels: Panels, Panels In-‐Place Editor (op9onal)

AddiAonal SeBngs

Enable “node_view” Node template (Structure-‐>Pages) if you plan to override content type displays


PanelsCreating a Panel Page


Panels: Overall StepsCreate a new Panel page

Specify what the page is (new page, overriding exisAng page, etc)

Specify a selecAon rule if needed (if more than one variaAon “variant” will exist or other)

Specify page layout for the Panel page

Add content to the Panel page using the selected layout


Panels: PagesPanels can override the display of:Comment reply page, Node add/edit form, Node template, Node and user search, Taxonomy term template, User edit template, User profile template and Custom pages


Panels: ContentA Panels page consists of content from various sources that is exposed as a “Pane” and placed in a region on the page.


Panels: Panes/Categories


Panels: PanesViews content panes

Allows Views content to be used in Panels(sub module of CTools)

Fieldable panels panes

Separate module that allows you create panel pane en99es that may be used in Panels that are fieldable

Can be created through Panels UI or code


Panels: In-Place Editor

In-place editor

How to enable it

Strengths and weaknesses


Out the box (seen above)

Flexible Builders layout (Not really used because it lives in configuraAon and is markup heavy)

Custom responsive layouts

Panels: Layouts


Panels: Layouts: Custom

Talk about layouts out the box as well as custom responsive layouts. Show code of custom layout?

The following files are needed:

Template file (contains template HTML for the layout)

INC file (contains Panel informa9on and configura9on)

CSS file (op9onal and contains CSS for the layout)

Icon file (PNG image icon representa9on of the layout)

You can use a preprocess hook to make your layout smarter (responsive to content).


Panels: Panel Page


Panels: VariantsConsider Variants as “if” statements for Panel pages

They are used typically with selecAon rules

They read as “if selecAon rule true, use this Panel variant” from top to boTom

Gives you the ability to have one Panel provide variaAon to a page based on your logic (node display by node type for example)


Panels: ContextContext are are things the Panel is aware of


PanelsStrengths and Weaknesses

Note: These cascade


Panels: StrengthsPanels are exportable using things like Features, Hooks and ConfiguraAon module

Very stable

Many contribuAng modules

Great permissions seBngs

Popular

Great in responsive design sites


Panels: WeaknessesUser interface can be challenging and isn’t very 508 compliant

Advanced layouts sAll require you to fall back to code to create

PotenAal conflicts can arise when used with other modules that override displays like Display Suite

Content in configuraAon issues can arise since panes are exportable configuraAon that contain content


PanelizerPanels + Settings Applied Per Node


PanelizerA way to customize the display of one node without effecAng others

Takes panels (stuff) and applies it to nodes

(This can be done with Panels alone but gets unmanageable having many variants)


Panelizer: Entity Display


Panelizer: Display Override


Panelizer: Display OverrideThis node VS default node template


PanelizerStrengths and Weaknesses


Panelizer: StrengthsWorks on any enAty (as of Version 2)

Create mulAple defaults

Customize view modes

Allowed configuraAon can be managed


Panelizer: WeaknessesCould be too much freedom if not locked down correctly

Available opAons could be abused in the hands of users who are not informed in opAmized user experience


PanopolyPanels + Panelizer + Drupal Distribution


PanopolyPanopoly is an Apps enabled distribuAon of Drupal powered by lots of Chaos Tools and Panels magic

Customized site integraAon with Panelizer and Panels

Takes most of the configuraAon and seBngs of Panelizer/Panels out your way for a simpler user experience

Similar funcAonality, beTer presentaAon (UI)


Panopoly: InstallStandard Drupal install procedure

Panopoly Demo and News Apps can be skipped

Responsive BarAk theme is nice


Panopoly: IPE


Panopoly: Layouts


Panopoly: ContentCore panels/panelizer content is hidden in place of custom “Panelizer content” items


PanopolyStrengths and Weaknesses


Panopoly: StrengthsProvides a best pracAce default stack of modules (removes the pains of module selecAon)

Provides many responsive cross browser layouts as well as responsive images funcAonality

Improved search with Search API (with DB or Solr search)

Many other nice to haves like WYSIWYG editor, Admin interface and others

Easily add custom Pane enAAes (like files, videos, links, spotlight, GMap, etc)


Panopoly: WeaknessesLike many distribuAon there are a lot of things you’ll want to turn off to make it yours (Modules, Workflow, Content, Etc.)

I personally prefer not using distribuAons (could be PTSD)


OverallTips and Best Practices


Tips and Best PracticesSome views configuraAon (item number, filters, sorAng, fields, etc) can be exposed to the panel pane seBngs and customized in the Panel config. Grant access in views with “Allow seBngs”.

With Views you can pass arguments from the Panel page to the view with “Use Panel path” and “Argument input” seBngs in Views. This is great for passing context to the View.

Select “Disable Drupal blocks/regions” to let the Panel take over the full content area of the page.


Tips and Best PracticesTry not to mix content with configuraAon. Use rendered content as opposed to fields and use fieldable content panes as opposed to custom content panes.

Panels Extra Styles is a great module for controlling HTML/Style output of Panels/Panes: drupal.org/project/panels_extra_styles


Resources & ThanksEarl Miles aka "merlinofchoas"

Forum One TeamMatt Cheney: Panopoly: Building a Powerful Base Distribution

Damien McKenna: Panelizer and DrupalJeff Eaton: Module Monday: Panelizer

Karen McGrane: Drupalcon Portland Keynote


Questions?Slides: capitalcamp.org/content/paraphrasing-panels-panelizer-and-panopoly

Contact: Keenan Holloway [email protected]


http://capitalcamp.org/content/paraphrasing-panels-panelizer-and-panopoly

http://capitalcamp.org/content/paraphrasing-panels-panelizer-and-panopoly

mailto:[email protected]

mailto:[email protected]

paraphrasing panels panelizer and panopoly

Technology

panel page

panel page

place editor

weaknesses

layouts saturday

panel

display

page