panels in drupal: een eye-opener
DESCRIPTION
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?TRANSCRIPT
![Page 1: Panels in Drupal: een EYE-opener](https://reader034.vdocument.in/reader034/viewer/2022051817/548288ddb4af9f910d8b47c7/html5/thumbnails/1.jpg)
Panels: een EYE-opener
![Page 2: Panels in Drupal: een EYE-opener](https://reader034.vdocument.in/reader034/viewer/2022051817/548288ddb4af9f910d8b47c7/html5/thumbnails/2.jpg)
duurzame websitesEven voorstellen
• Baris Wanschers
• Oprichter/CEO van LimoenGroen
• Voorzitter van Stichting Drupal Nederland
@BarisW / www.bariswanschers.com / [email protected]
![Page 3: Panels in Drupal: een EYE-opener](https://reader034.vdocument.in/reader034/viewer/2022051817/548288ddb4af9f910d8b47c7/html5/thumbnails/3.jpg)
duurzame websitesEYE 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
![Page 4: Panels in Drupal: een EYE-opener](https://reader034.vdocument.in/reader034/viewer/2022051817/548288ddb4af9f910d8b47c7/html5/thumbnails/4.jpg)
De wens van EYE
![Page 6: Panels in Drupal: een EYE-opener](https://reader034.vdocument.in/reader034/viewer/2022051817/548288ddb4af9f910d8b47c7/html5/thumbnails/6.jpg)
duurzame websitesPanels 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
![Page 7: Panels in Drupal: een EYE-opener](https://reader034.vdocument.in/reader034/viewer/2022051817/548288ddb4af9f910d8b47c7/html5/thumbnails/7.jpg)
Panels: wat is het?
![Page 8: Panels in Drupal: een EYE-opener](https://reader034.vdocument.in/reader034/viewer/2022051817/548288ddb4af9f910d8b47c7/html5/thumbnails/8.jpg)
duurzame websitesPanels: 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.
![Page 9: Panels in Drupal: een EYE-opener](https://reader034.vdocument.in/reader034/viewer/2022051817/548288ddb4af9f910d8b47c7/html5/thumbnails/9.jpg)
duurzame websitesPanels: 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
![Page 10: Panels in Drupal: een EYE-opener](https://reader034.vdocument.in/reader034/viewer/2022051817/548288ddb4af9f910d8b47c7/html5/thumbnails/10.jpg)
duurzame websitesPanels: Page Manager module
• Onderdeel van CTools
![Page 11: Panels in Drupal: een EYE-opener](https://reader034.vdocument.in/reader034/viewer/2022051817/548288ddb4af9f910d8b47c7/html5/thumbnails/11.jpg)
duurzame websitesPanels: Page Manager module
• Onderdeel van CTools
• Laat je bestaande systeempaden overriden (node/%node)
![Page 12: Panels in Drupal: een EYE-opener](https://reader034.vdocument.in/reader034/viewer/2022051817/548288ddb4af9f910d8b47c7/html5/thumbnails/12.jpg)
duurzame websitesPanels: 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.
![Page 13: Panels in Drupal: een EYE-opener](https://reader034.vdocument.in/reader034/viewer/2022051817/548288ddb4af9f910d8b47c7/html5/thumbnails/13.jpg)
duurzame websitesPanels: 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.
![Page 14: Panels in Drupal: een EYE-opener](https://reader034.vdocument.in/reader034/viewer/2022051817/548288ddb4af9f910d8b47c7/html5/thumbnails/14.jpg)
duurzame websitesPanels: 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.
![Page 15: Panels in Drupal: een EYE-opener](https://reader034.vdocument.in/reader034/viewer/2022051817/548288ddb4af9f910d8b47c7/html5/thumbnails/15.jpg)
duurzame websitesPanels: 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.
![Page 16: Panels in Drupal: een EYE-opener](https://reader034.vdocument.in/reader034/viewer/2022051817/548288ddb4af9f910d8b47c7/html5/thumbnails/16.jpg)
duurzame websitesPanels: 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.
![Page 17: Panels in Drupal: een EYE-opener](https://reader034.vdocument.in/reader034/viewer/2022051817/548288ddb4af9f910d8b47c7/html5/thumbnails/17.jpg)
duurzame websitesPanels: 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.
![Page 18: Panels in Drupal: een EYE-opener](https://reader034.vdocument.in/reader034/viewer/2022051817/548288ddb4af9f910d8b47c7/html5/thumbnails/18.jpg)
duurzame websitesPanels: 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.
![Page 19: Panels in Drupal: een EYE-opener](https://reader034.vdocument.in/reader034/viewer/2022051817/548288ddb4af9f910d8b47c7/html5/thumbnails/19.jpg)
duurzame websitesPanels: 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.
![Page 20: Panels in Drupal: een EYE-opener](https://reader034.vdocument.in/reader034/viewer/2022051817/548288ddb4af9f910d8b47c7/html5/thumbnails/20.jpg)
Panels in de praktijk
![Page 21: Panels in Drupal: een EYE-opener](https://reader034.vdocument.in/reader034/viewer/2022051817/548288ddb4af9f910d8b47c7/html5/thumbnails/21.jpg)
duurzame websitesPanels 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).
![Page 22: Panels in Drupal: een EYE-opener](https://reader034.vdocument.in/reader034/viewer/2022051817/548288ddb4af9f910d8b47c7/html5/thumbnails/22.jpg)
duurzame websitesShow me the code!
• Custom page layout
• Custom pane style
• Custom pane type
Code bekend maken bij Panels dmv:
!
![Page 23: Panels in Drupal: een EYE-opener](https://reader034.vdocument.in/reader034/viewer/2022051817/548288ddb4af9f910d8b47c7/html5/thumbnails/23.jpg)
duurzame websitesEen 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
![Page 24: Panels in Drupal: een EYE-opener](https://reader034.vdocument.in/reader034/viewer/2022051817/548288ddb4af9f910d8b47c7/html5/thumbnails/24.jpg)
duurzame websiteseye_threecol_stacked.inc
• De include file
bevat enkel de
$plugin
variabele, geen
hook().
• CSS is optioneel
Zie: https://drupal.org/node/495654
![Page 25: Panels in Drupal: een EYE-opener](https://reader034.vdocument.in/reader034/viewer/2022051817/548288ddb4af9f910d8b47c7/html5/thumbnails/25.jpg)
duurzame websiteseye-threecol-stacked.tpl.php
• De template file
bevat dashes in
de filenaam ipv
underscores.
• Beschikbaar:
$content en $id.
Zie: https://drupal.org/node/495654
![Page 26: Panels in Drupal: een EYE-opener](https://reader034.vdocument.in/reader034/viewer/2022051817/548288ddb4af9f910d8b47c7/html5/thumbnails/26.jpg)
duurzame websitesEen eigen pane style
Minimaal nodig is de .inc file:
![Page 27: Panels in Drupal: een EYE-opener](https://reader034.vdocument.in/reader034/viewer/2022051817/548288ddb4af9f910d8b47c7/html5/thumbnails/27.jpg)
duurzame websitesEen eigen pane style
Minimaal nodig is de .inc file:
![Page 28: Panels in Drupal: een EYE-opener](https://reader034.vdocument.in/reader034/viewer/2022051817/548288ddb4af9f910d8b47c7/html5/thumbnails/28.jpg)
duurzame websitesEen eigen pane style
Minimaal nodig is de .inc file:
![Page 29: Panels in Drupal: een EYE-opener](https://reader034.vdocument.in/reader034/viewer/2022051817/548288ddb4af9f910d8b47c7/html5/thumbnails/29.jpg)
duurzame websitesEen eigen pane type
Een handige module is Fieldable Panels Panes: voegt een
fieldable entity toe. Die kan je zelf ook maken, via code.
![Page 30: Panels in Drupal: een EYE-opener](https://reader034.vdocument.in/reader034/viewer/2022051817/548288ddb4af9f910d8b47c7/html5/thumbnails/30.jpg)
duurzame websitesEen 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.
![Page 31: Panels in Drupal: een EYE-opener](https://reader034.vdocument.in/reader034/viewer/2022051817/548288ddb4af9f910d8b47c7/html5/thumbnails/31.jpg)
duurzame websitesEen eigen pane
Aangezien het een entity is, kunnen we ook gebruik maken
van hook_entity_view() om bijvoorbeeld JS te attachen.
![Page 32: Panels in Drupal: een EYE-opener](https://reader034.vdocument.in/reader034/viewer/2022051817/548288ddb4af9f910d8b47c7/html5/thumbnails/32.jpg)
Demo!