DrupalCamp NYC Panels Presentation - April 2014

  • 676 views
Uploaded 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

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

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
676
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
0
Comments
1
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. USING PANELS Suzanne Dergacheva @suzanne_kennedy
  • 2. Drupal Consulting, Development, andTraining evolvingweb.ca Suzanne Dergacheva, Co-founder @suzanne_kennedy
  • 3. TRAINING PROGRAM evolvingweb.ca/training
  • 4. WHAT IS PANELS?
  • 5. PAGE-BUILDINGTOOL
  • 6. WHAT IS IT GOOD FOR? managing blocks managing lots of layouts creating custom pages
  • 7. WHY USE PANELS?
  • 8. x TO AVOIDTHE BLOCKS UI
  • 9. MAKES IT EASYTO PROTOTYPE LAYOUTS
  • 10. TO GIVE ADMINS FREEDOM
  • 11. DRAG AND DROP UI
  • 12. TO AVOID WRITING CUSTOM CODE
  • 13. USING PANELS PAGES
  • 14. PANELS PAGES 1 page = 1 path
  • 15. SIMPLE LANDING PAGES
  • 16. CREATE LANDING PAGES Path = yoga-workshop layout content Fancy Banner Login Welcome Message News View Contact Info Yoga Workshop Landing Page
  • 17. #1 SET UP PANEL
  • 18. #2 CHOOSE A LAYOUT
  • 19. #3 CHOOSE SETTINGS
  • 20. #4 ADDYOUR CONTENT
  • 21. = LANDING PAGE
  • 22. VARIABLE LANDING PAGES
  • 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. #1 SET UPTHE PANEL
  • 25. #2 CHOOSE A LAYOUT
  • 26. #3 CHOOSE SETTINGS
  • 27. #4 ADD CRITERIA
  • 28. #5 ADDVARIANT
  • 29. #6 ADD CONTENT
  • 30. =TWOVARIANTS
  • 31. =TWOVARIANTS Student Landing PageInstructor Landing Page
  • 32. OVERRIDE EXISTING PAGES
  • 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. #1 ENABLE PANELS PAGE
  • 35. #2 ADD AVARIANT
  • 36. #3 SELECTION RULES
  • 37. • Choose layout • Add content • Choose setting • Add more variants...
  • 38. OVERRIDE EXISTING PAGES + ADD CONTEXTS
  • 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. ADDING CONTEXTS
  • 41. CONTEXTS
  • 42. ADDING CONTENT
  • 43. CREATE NEW DYNAMIC PAGES
  • 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. #1 SETTING UPTHE PANEL
  • 46. #2 ASSIGNING ARGUMENT
  • 47. ADDING CONTENT TO PANELS
  • 48. BLOCKS CONFIGURATION
  • 49. ADDING CONTENTTO A PANEL
  • 50. ADDING CONTENTTO A PANEL Custom Blocks Menus Views Widgets Views Panes Page Elements Miscellan eous Activity
  • 51. ADDING CONTENTTO A PANEL Custom Blocks Menus Views Widgets Views Panes Page Elements Miscellan eous Activity New Custom Content
  • 52. USINGVIEWS PANES Views Pane
  • 53. PANELS, PANELIZER, PANOPOLY, OH MY...
  • 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. PANELIZER
  • 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. PANOPOLY
  • 58. TRICKYTHINGS
  • 59. USABILITY FOR ADMINS Panels In-Place-Editor
  • 60. PANELS FOR LISTING PAGES Make sure you’re linking to Panels
  • 61. RESPONSIVE DESIGN Make custom layouts and use media queries
  • 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. THINGSTO AVOID
  • 64. TOO MANY LAYOUTS Stick to a few good ones
  • 65. DUPLICATE CONFIG Use mini-panels or context v
  • 66. FLEXIBLE LAYOUTS Instead, add custom layouts to your theme
  • 67. TRAINING PROGRAM training@evolvingweb.ca evolvingweb.ca/training
  • 68. Drupal Consulting, Development, andTraining evolvingweb.ca Suzanne Kennedy, Co-founder @suzanne_kennedy