Panels: een EYE-opener

duurzame websitesEven voorstellen

• Baris Wanschers

• Oprichter/CEO van LimoenGroen

• Voorzitter van Stichting Drupal Nederland

@BarisW / www.bariswanschers.com / baris@limoengroen.nl

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

De wens van EYE

duurzame websitesNot your default Drupal site

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

Panels: wat is het?

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.

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

duurzame websitesPanels: Page Manager module

• Onderdeel van CTools

duurzame websitesPanels: Page Manager module

• Onderdeel van CTools

• Laat je bestaande systeempaden overriden (node/%node)

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.

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.

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.

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.

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.

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.

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.

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.

Panels in de praktijk

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).

duurzame websitesShow me the code!

• Custom page layout

• Custom pane style

• Custom pane type

Code bekend maken bij Panels dmv:

!

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

duurzame websiteseye_threecol_stacked.inc

• De include file

bevat enkel de

$plugin

variabele, geen

hook().

• CSS is optioneel

Zie: https://drupal.org/node/495654

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

duurzame websitesEen eigen pane style

Minimaal nodig is de .inc file:

duurzame websitesEen eigen pane style

Minimaal nodig is de .inc file:

duurzame websitesEen eigen pane style

Minimaal nodig is de .inc file:

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.

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.

duurzame websitesEen eigen pane

Aangezien het een entity is, kunnen we ook gebruik maken

van hook_entity_view() om bijvoorbeeld JS te attachen.

Demo!

Vragen / opmerkingen

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