Pragmatic Site Building

With Panels

Lullabot

Strategy // Design // Development

By integrating strategy, design, and development we produce better products and create more delightful experiences. You save money and launch faster.

Chris Albrecht

Developer // Technical PM
  • chris@lullabot.com
  • @ChrisAlbrecht
  • drupal.org/u/KeyboardCowboy
Overview

Concept

Use One Method per Task

Create a Page

  • Node View
  • Views Page Display
  • Panels Page
  • Custom Menu Callback

With Panels

  • All Pages in One Interface
  • Contextual Information
  • Access Control
  • Complex Relationships
  • Reusable Layouts
  • Large Family of Modules

Take Aways

  • Method for Architecting Your Site
  • Understanding of the Panels Family
  • Views Content Panes
  • Custom Layouts
  • Panels IPE

Extras

  • Beans
  • Panelizer
  • Fieldable Panels Panes
  • Tips & Tricks
Local Install

Local Server

  • MAMP
  • XAMPP

Create a DB

Download & Install Drupal

Modules

Drush

  • Composer
  • https://github.com/drush-ops/drush/releases

Admin Menu

$ drush dl admin_menu
$ drush en admin_menu

KC Panels Demo

$ drush dl kcpd
$ drush en kcpd
Planning

Content Discovery

Design Discovery

Architecture

  • Pages
  • Content Types
  • Components
  • Blocks
  • Fields
Panels

Dive In!

Page Manager

Renderers

Allow panels to intercept and override a path's display.

Custom Pages

Are panels pages such as the home page or custom landing pages.

Variants

Are ways for a renderer to display content in a layout.

Inside Panels

Selection Rules

Determine which variant is selected, top down.

Contexts

Expose and relate contextual data to the panels system.

Layout

Select a page layout for this variant.

Content

Add a variety of content to the variant.

Try it Out!

  1. Enable the "node view" renderer and edit it.
  2. Add a variant.
  3. Create a selection rule for movies.
  4. Choose a layout.
  5. Add fields from the node to the content.
Views Content Panes

Enable

  • Views
  • Views Content Panes (Under CTools)

Create a New View

  1. View of content, Movie Reviews
  2. No block or page
  3. Continue & Edit

  1. Add a display of type Content Pane
  2. Set a contextual filter relating to movies
  3. Set the Pane argument input to From Context, Content ID (under Node)
  4. Save
  5. Open panels UI, then Content
  6. From View Panes, add the new pane