Voor een recent project (EYE) hebben we Panels ingezet. Alhoewel we erg sceptisch waren over Panels waren onze ervaringen erg positief. In deze sessie maken we jou hopelijk ook enthousiast over Panels. Je leert hoe je Panels kan inzetten: wat is de business case? Hoe implementeer je het in je website en hoe schrijf je je eigen panes, layouts and styles?

1. Panels: een EYE-opener

2. duurzame websites
Even voorstellen
• Baris Wanschers
• Oprichter/CEO van LimoenGroen
• Voorzitter van Stichting Drupal Nederland
@BarisW / www.bariswanschers.com / baris@limoengroen.nl

3. duurzame websites
EYE Amsterdam
• Het nieuwe filmmuseum in Amsterdam
• Tentoonstellingen, films, evenementen, festivals, bar,
restaurant
• 37.000 films, 20.000 boeken,
500.000 foto’s, 60.000 posters
• 750.000 bezoekers per jaar

4. De wens van EYE

5. duurzame websites
Not your default Drupal site

6. duurzame websites
Panels to the rescue?
• Veel verschillende landingpagina’s
• Pagina’s bestaan uit een aantal standaard elementen
(fotocaroussel in 2 typen, fotogrid, uitklapper (FAQ), tabel)
• Wens om bepaalde contentblokken te hergebruiken
• Wens om zelf landingpagina’s te kunnen aanmaken
• Risico: website wordt snel onoverzichtelijk
• Sommige elementen vastzetten op de pagina
• Kleine contentredactie en goede afspraken

7. Panels: wat is het?

8. duurzame websites
Panels: Wat is het?
The Panels module allows a site
administrator to create customized
layouts for multiple uses.
!
At its core it is a drag and drop
content manager that lets you visually
design a layout and place content
within that layout.

9. duurzame websites
Panels: Wat is het?
• Drag & drop content manager
• Maak eigen page layouts met regions
• 180.000+ installaties, in top 25 van meest geïnstalleerd
• Van de maker van Views & Ctools (merlinofchaos)
• Ctools pluggable
• It’s a beast
Zie: http://www.codeenigma.com/en/blog/performance-panels

10. duurzame websites
Panels: Page Manager module
• Onderdeel van CTools

11. duurzame websites
Panels: Page Manager module
• Onderdeel van CTools
• Laat je bestaande systeempaden overriden (node/%node)

12. duurzame websites
Panels: Page Manager module
• Onderdeel van CTools
• Laat je bestaande systeempaden overriden (node/%node)
• Werkt met Varianten waarbinnen gebruik wordt gemaakt
van Selection Rules en Contexts (relaties).
• Voorbeeld: wanneer je op een node komt van type
Answer, redirect naar de referenced Question node.

13. duurzame websites
Panels: Page Manager module
• Onderdeel van CTools
• Laat je bestaande systeempaden overriden (node/%node)
• Werkt met Varianten waarbinnen gebruik wordt gemaakt
van Selection Rules en Contexts (relaties).
• Voorbeeld: wanneer je op een node komt van type
Answer, redirect naar de referenced Question node.

14. duurzame websites
Panels: Panels module
• Voegt “Layouts” and “Content” opties to aan Page
Manager variants.
• Plaats bijvoorbeeld het comment form tussen de titel en
de body, of ernaast.
• Panels komt met een aantal Layouts out-of-the-box. Extra
layouts zijn eenvoudig toe te voegen via code.

15. duurzame websites
Panels: Panels module
• Voegt “Layouts” and “Content” opties to aan Page
Manager variants.
• Plaats bijvoorbeeld het comment form tussen de titel en
de body, of ernaast.
• Panels komt met een aantal Layouts out-of-the-box. Extra
layouts zijn eenvoudig toe te voegen via code.

16. duurzame websites
Panels: Panels in Place
• Vervangt de standaard Panels editor door een mooie in-
place editor.
• Met de juiste rechten kan een redacteur blokken
verslepen, een andere layout kiezen en content
toevoegen.

17. duurzame websites
Panels: Panels in Place
• Vervangt de standaard Panels editor door een mooie in-
place editor.
• Met de juiste rechten kan een redacteur blokken
verslepen, een andere layout kiezen en content
toevoegen.

18. duurzame websites
Panels: Panelizer
• Maak view modes (bijvoorbeeld “full content”) van een
node type ‘panelizable’. Zorgt ervoor dat een nieuwe
node panels-in-place ondersteuning heeft.
• Vanaf dan kan je elke node voorzien van custom blocks/
content.
• Op node-level kan je afwijken van de default settings.

19. duurzame websites
Panels: Panelizer
• Maak view modes (bijvoorbeeld “full content”) van een
node type ‘panelizable’. Zorgt ervoor dat een nieuwe
node panels-in-place ondersteuning heeft.
• Vanaf dan kan je elke node voorzien van custom blocks/
content.
• Op node-level kan je afwijken van de default settings.

20. Panels in de praktijk

21. duurzame websites
Panels in de praktijk
• Meeste node-types zijn panelizable
• Custom page layout voor EYE (eye_threecol_stacked)
• Custom panes voor EYE (images_slideshow_pane,
accordion_pane, image_collection_pane, etc).
• Settings in features (Panels zijn exportable).

22. duurzame websites
Show me the code!
• Custom page layout
• Custom pane style
• Custom pane type
Code bekend maken bij Panels dmv:
!

23. duurzame websites
Een eigen page layout
Kan zowel in het theme of in een module
Bij een theme:
plugins[panels][layouts] = layouts in THEME.info
vervolgens de folder in de ‘layouts’ folder plaatsen.
Zie: https://drupal.org/node/495654

24. duurzame websites
eye_threecol_stacked.inc
• De include file
bevat enkel de
$plugin
variabele, geen
hook().
• CSS is optioneel
Zie: https://drupal.org/node/495654

25. duurzame websites
eye-threecol-stacked.tpl.php
• De template file
bevat dashes in
de filenaam ipv
underscores.
• Beschikbaar:
$content en $id.
Zie: https://drupal.org/node/495654

26. duurzame websites
Een eigen pane style
Minimaal nodig is de .inc file:

27. duurzame websites
Een eigen pane style
Minimaal nodig is de .inc file:

28. duurzame websites
Een eigen pane style
Minimaal nodig is de .inc file:

29. duurzame websites
Een eigen pane type
Een handige module is Fieldable Panels Panes: voegt een
fieldable entity toe. Die kan je zelf ook maken, via code.

30. duurzame websites
Een eigen pane
Voeg een eigen Fieldable Panels Pane bundle toe met
hook_entity_info_alter();
!
!
!
!
Deze is vervolgens te voorzien van extra velden via de
interface en te exporteren met Features.

31. duurzame websites
Een eigen pane
Aangezien het een entity is, kunnen we ook gebruik maken
van hook_entity_view() om bijvoorbeeld JS te attachen.

32. Demo!

33. Vragen / opmerkingen
baris@limoengroen.nl | @BarisW | www.limoengroen.nl | +31 (0)20 - 737 1880