USING PANELS
Suzanne Dergacheva
@suzanne_kennedy
Drupal Consulting, Development, andTraining
evolvingweb.ca
Suzanne Dergacheva, Co-founder
@suzanne_kennedy
TRAINING PROGRAM
evolvingweb.ca/training
WHAT IS PANELS?
PAGE-BUILDINGTOOL
WHAT IS IT GOOD FOR?
managing blocks managing lots of layouts
creating
custom
pages
WHY USE PANELS?
x
TO AVOIDTHE BLOCKS UI
MAKES IT EASYTO
PROTOTYPE LAYOUTS
TO GIVE ADMINS FREEDOM
DRAG AND DROP UI
TO AVOID WRITING CUSTOM
CODE
USING PANELS PAGES
PANELS PAGES
1 page = 1 path
SIMPLE LANDING PAGES
CREATE LANDING PAGES
Path = yoga-workshop
layout content
Fancy Banner
Login
Welcome
Message
News
View
Contact Info
Yoga Wo...
#1 SET UP PANEL
#2 CHOOSE A LAYOUT
#3 CHOOSE SETTINGS
#4 ADDYOUR CONTENT
= LANDING PAGE
VARIABLE LANDING PAGES
VARIABLE LANDING PAGES
Path = my-classes
Fancy Banner
Admin
News
Admin
Message
Contact Info
layout content
Fancy Banner
Au...
#1 SET UPTHE PANEL
#2 CHOOSE A LAYOUT
#3 CHOOSE SETTINGS
#4 ADD CRITERIA
#5 ADDVARIANT
#6 ADD CONTENT
=TWOVARIANTS
=TWOVARIANTS
Student Landing PageInstructor Landing Page
OVERRIDE EXISTING PAGES
OVERRIDE EXISTING PAGES
Path = taxonomy/term/[tid]
Category Variant
Fancy Banner
Admin
News
Admin
Message
Contact
layout c...
#1 ENABLE PANELS PAGE
#2 ADD AVARIANT
#3 SELECTION RULES
• Choose layout
• Add content
• Choose setting
• Add more variants...
OVERRIDE EXISTING PAGES +
ADD CONTEXTS
OVERRIDE EXISTING PAGES
Path = node/[nid]
Class Variant
selection criteria
Is the current
node of type class?
arguments
[n...
ADDING CONTEXTS
CONTEXTS
ADDING CONTENT
CREATE NEW DYNAMIC
PAGES
CREATE DYNAMIC PAGES
Path = node/[nid]/gallery
Fancy Banner
Contact Info
layout content
selection criteria
Is the current
...
#1 SETTING UPTHE PANEL
#2 ASSIGNING ARGUMENT
ADDING CONTENT
TO PANELS
BLOCKS CONFIGURATION
ADDING CONTENTTO A
PANEL
ADDING CONTENTTO A
PANEL
Custom
Blocks
Menus
Views
Widgets
Views
Panes
Page
Elements
Miscellan
eous
Activity
ADDING CONTENTTO A
PANEL
Custom
Blocks
Menus
Views
Widgets
Views
Panes
Page
Elements
Miscellan
eous
Activity
New
Custom
Co...
USINGVIEWS PANES
Views
Pane
PANELS, PANELIZER,
PANOPOLY, OH MY...
PANELIZER MODULE
• You get panels configuration (layout and content) for each
node.
• Often leads to too many panels, too m...
PANELIZER
PANOPOLY
• Comes with panelizer, fieldable panel panes
• Panels set up for lots of built-in pages
• Extra layout options (a...
PANOPOLY
TRICKYTHINGS
USABILITY FOR ADMINS
Panels In-Place-Editor
PANELS FOR LISTING PAGES
Make sure you’re linking to Panels
RESPONSIVE DESIGN
Make custom layouts and use media queries
CONTENT - CONFIG
• With Panels, you end up with configuration mixed up with
content (inserting nodes, blocks and custom tex...
THINGSTO AVOID
TOO MANY LAYOUTS
Stick to a few good ones
DUPLICATE CONFIG
Use mini-panels or context
v
FLEXIBLE LAYOUTS
Instead, add custom layouts to your theme
TRAINING PROGRAM
training@evolvingweb.ca
evolvingweb.ca/training
Drupal Consulting, Development, andTraining
evolvingweb.ca
Suzanne Kennedy, Co-founder
@suzanne_kennedy
DrupalCamp NYC Panels Presentation - April 2014
DrupalCamp NYC Panels Presentation - April 2014
Upcoming SlideShare
Loading in...5
×

DrupalCamp NYC Panels Presentation - April 2014

1,195

Published on

Using Panels throughout your website can be a powerful site building tool. Here are some techniques for using Panels and some advice to using Panels wi

Published in: Technology, Business
1 Comment
3 Likes
Statistics
Notes
No Downloads
Views
Total Views
1,195
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
1
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "DrupalCamp NYC Panels Presentation - April 2014"

  1. 1. USING PANELS Suzanne Dergacheva @suzanne_kennedy
  2. 2. Drupal Consulting, Development, andTraining evolvingweb.ca Suzanne Dergacheva, Co-founder @suzanne_kennedy
  3. 3. TRAINING PROGRAM evolvingweb.ca/training
  4. 4. WHAT IS PANELS?
  5. 5. PAGE-BUILDINGTOOL
  6. 6. WHAT IS IT GOOD FOR? managing blocks managing lots of layouts creating custom pages
  7. 7. WHY USE PANELS?
  8. 8. x TO AVOIDTHE BLOCKS UI
  9. 9. MAKES IT EASYTO PROTOTYPE LAYOUTS
  10. 10. TO GIVE ADMINS FREEDOM
  11. 11. DRAG AND DROP UI
  12. 12. TO AVOID WRITING CUSTOM CODE
  13. 13. USING PANELS PAGES
  14. 14. PANELS PAGES 1 page = 1 path
  15. 15. SIMPLE LANDING PAGES
  16. 16. CREATE LANDING PAGES Path = yoga-workshop layout content Fancy Banner Login Welcome Message News View Contact Info Yoga Workshop Landing Page
  17. 17. #1 SET UP PANEL
  18. 18. #2 CHOOSE A LAYOUT
  19. 19. #3 CHOOSE SETTINGS
  20. 20. #4 ADDYOUR CONTENT
  21. 21. = LANDING PAGE
  22. 22. VARIABLE LANDING PAGES
  23. 23. VARIABLE LANDING PAGES Path = my-classes Fancy Banner Admin News Admin Message Contact Info layout content Fancy Banner Author Message layout content Author News selection criteria selection criteria What’s your user role? student What’s your user role? instructor Student Variant Instructor Variant Contact Info Machine Name = my_classes
  24. 24. #1 SET UPTHE PANEL
  25. 25. #2 CHOOSE A LAYOUT
  26. 26. #3 CHOOSE SETTINGS
  27. 27. #4 ADD CRITERIA
  28. 28. #5 ADDVARIANT
  29. 29. #6 ADD CONTENT
  30. 30. =TWOVARIANTS
  31. 31. =TWOVARIANTS Student Landing PageInstructor Landing Page
  32. 32. OVERRIDE EXISTING PAGES
  33. 33. OVERRIDE EXISTING PAGES Path = taxonomy/term/[tid] Category Variant Fancy Banner Admin News Admin Message Contact layout content selection criteria Is the term a category? Tags Variant Fancy Banner Admin News Admin Message Contact layout content selection criteria Is the term a tag?
  34. 34. #1 ENABLE PANELS PAGE
  35. 35. #2 ADD AVARIANT
  36. 36. #3 SELECTION RULES
  37. 37. • Choose layout • Add content • Choose setting • Add more variants...
  38. 38. OVERRIDE EXISTING PAGES + ADD CONTEXTS
  39. 39. OVERRIDE EXISTING PAGES Path = node/[nid] Class Variant selection criteria Is the current node of type class? arguments [nid] = a node Fancy Banner Contact Info content adsbody related content contexts all the fields/properties for the current city layout
  40. 40. ADDING CONTEXTS
  41. 41. CONTEXTS
  42. 42. ADDING CONTENT
  43. 43. CREATE NEW DYNAMIC PAGES
  44. 44. CREATE DYNAMIC PAGES Path = node/[nid]/gallery Fancy Banner Contact Info layout content selection criteria Is the current node an event? Event Gallery Variant contexts all the fields/properties for the current event arguments [nid] = a node
  45. 45. #1 SETTING UPTHE PANEL
  46. 46. #2 ASSIGNING ARGUMENT
  47. 47. ADDING CONTENT TO PANELS
  48. 48. BLOCKS CONFIGURATION
  49. 49. ADDING CONTENTTO A PANEL
  50. 50. ADDING CONTENTTO A PANEL Custom Blocks Menus Views Widgets Views Panes Page Elements Miscellan eous Activity
  51. 51. ADDING CONTENTTO A PANEL Custom Blocks Menus Views Widgets Views Panes Page Elements Miscellan eous Activity New Custom Content
  52. 52. USINGVIEWS PANES Views Pane
  53. 53. PANELS, PANELIZER, PANOPOLY, OH MY...
  54. 54. PANELIZER MODULE • You get panels configuration (layout and content) for each node. • Often leads to too many panels, too much variation • Use with care!
  55. 55. PANELIZER
  56. 56. PANOPOLY • Comes with panelizer, fieldable panel panes • Panels set up for lots of built-in pages • Extra layout options (and responsive) • In-place editor • Pre-configured
  57. 57. PANOPOLY
  58. 58. TRICKYTHINGS
  59. 59. USABILITY FOR ADMINS Panels In-Place-Editor
  60. 60. PANELS FOR LISTING PAGES Make sure you’re linking to Panels
  61. 61. RESPONSIVE DESIGN Make custom layouts and use media queries
  62. 62. CONTENT - CONFIG • With Panels, you end up with configuration mixed up with content (inserting nodes, blocks and custom text into your panels) • Editing some content on the homepage requires more knowledge
  63. 63. THINGSTO AVOID
  64. 64. TOO MANY LAYOUTS Stick to a few good ones
  65. 65. DUPLICATE CONFIG Use mini-panels or context v
  66. 66. FLEXIBLE LAYOUTS Instead, add custom layouts to your theme
  67. 67. TRAINING PROGRAM training@evolvingweb.ca evolvingweb.ca/training
  68. 68. Drupal Consulting, Development, andTraining evolvingweb.ca Suzanne Kennedy, Co-founder @suzanne_kennedy

×