Display Suite versus Panels, deel 2

Op Drupalin24dagen.nl kregen we onlangs de vraag wat nou eigenlijk het verschil is tussen de Display Suite en Panels, twee modules om de layout van een Drupal pagina te beheren. Een begrijpelijke vraag want qua functionaliteit vertonen deze modules erg veel overlap.

Om duidelijker te maken wat de onderlinge verschillen zijn laat ik in twee artikelen zien hoe je met beide een voorpagina zou kunnen maken. In het vorige artikel heb ik gekeken naar de werking van Display Suite en ditmaal is Panels aan de beurt.

Wil je weten waar Panels en Display Suite überhaupt voor dienen? Lees dan eerst deel 1

Het dashboard

Eigenlijk is een voorpagina maken met Panels doodsimpel, misschien wel makkelijker als met Display Suite. Toch heb ik de vorige keer vertelt dat Display Suite juist makkelijker in gebruik is en daar sta ik nog steeds achter. Het verschil is namelijk dat Panels een hoop extra mogelijkheden die het beginners onnodig complex maken, zoals je zult zien.

Download, installeer en activeer allereerst de Panels module en eventuele dependicies. Het activeren van Panels is voldoende, eventuele submodules zijn optioneel.

Ga vervolgens naar "Structuur > Panels". Je ziet nu het dashboard voor je.

Vanaf hier kun je drie zaken beheren: Pagina's, Layouts en Styles. Laten we ze even kort langslopen.

Pagina's

Net als met Views kun je met Panels een op zichzelf staande pagina maken met een unieke URL en eventueel een menu link. Alle aangemaakte pagina's vind je terug onder "Pagina's beheren".

Je ziet dat er standaard al wat pagina's zijn klaargezet die je alleen nog maar hoeft in te schakelen. Dit zijn pagina's met een dynamische URL waarmee je de huidige indeling van een standaard node, user of taxonomie pagina kunt overschrijven. Waarover later meer.

De lijst onder "Pagina's beheren" komt rechtsstreeks van de Page Manager module (Structuur > Pagina's), waarmee Panels integreert.

Linksboven, onder "Nieuwe aanmaken...", kun je via de "Panel-Pagina" link een nieuwe pagina aanmaken. Doe je dit via de "Page Wizard" rechts bovenin dan kun je geavanceerde opties eventueel naderhand instellen.

Layouts

De layout bepaalt in hoeveel rijen en kollommen een pagina wordt opgedeeld. Standaard zijn er een aantal layouts beschikbaar. In vergelijking met Display Suite zijn dit er wat minder maar Panels heeft daarentegen de mogelijkheid om direct vanuit Drupal een nieuwe layout aan te maken (die je overigens ook weer voor Display Suite kunt gebruiken). Dit kan door rechts bovenin naar het tabblad "Layouts" en dan bovenaan te klikken op "Add flexible layout". Hier kun je naar hartenlust een eigen layout samenstellen.

Styles

Klik je linksonder, onder "Styles" op "ga naar lijst" dan kun je een nieuwe opmaakstijl aanmaken. Je kunt hierbij het lettertype kiezen, de kleuren en eventueel eigen CSS toevoegen. Wanneer de stijl is opgeslagen kun je deze aan een bepaald gebied of paneel van een layout toewijzen. Dit kan handig zijn voor content beheerders die geen CSS kennis hebben en/of direct vanuit Drupal de opmaak willen aanpassen. Normaal gesproken bepaald je de opmaak echter via je stylesheet, eventueel door gebruik te maken van de mogelijkheid om aan elk paneel of panels pagina een CSS klasse of ID toe te voegen.

Een homepage maken met Panels

Goed, op naar onze homepage. Klik in het dashboard op de "Panel-pagina" link. Kies een titel, bijv. "home", en een URL, bijv. home".

Vervolgens vink je het volgende aan: "Dit pad als home-pagina voor uw website instellen."

Aan optionele features hebben we in dit geval niks nodig, of het moet een menu item zijn. Wanneer je "Zichtbaar menu-item" selecteert zal er in de volgende stap de mogelijkheid zijn om ergens een menu link naar de nieuwe voorpagina toe te voegen, bijvoorbeeld aan het hoofdmenu.

Vervolgens kun je een gewenste layout kiezen voor de voorpagina. Als je onder categorie "builder" selecteert kun je bij de volgende stap zelf een layout in elkaar klikken, of je kiest een van de voorgemaakte layouts.

Ten slotte kun je inhoud toevoegen op de door jouw gewenste positie. Klik hiervoor op het "radartje" aan de linkerkant van het gebied waaraan je iets wilt toevoegen.

Het pop-up venster dat naar voren komt wordt geladen vanuit de Ctools module en is exact hetzelfde als het venster dat Display Suite gebruikt om inhoud toe te voegen. Voor meer informatie over het toevoegen van een View verwijs ik je naar het vorige artikel.

Goed, wanneer je klaar bent met het toevoegen van je blokken, views, nodes, of wat dan ook, wil je waarschijnlijk bovenaan de "Titel-type" nog even op "geen titel" zetten.

Klik je nu op "Doorgaan" dan krijg je een overzicht te zien van je Panels pagina. Deze pagina krijg je ook te zien als je een al aangemaakte pagina gaat bewerken via het dashboard.

Je kunt nu alsnog zaken veranderen of geavanceerd opties inschakelen zoals een contextueel filter of selectieregels, zie verderop.

Let op: er is nu nog niks opgeslagen. De nieuwe voorpagina bestaat nu dus officieel nog niet. Klik hiervoor eerst op opslaan, helemaal onderaan.

Ook zodra je iets veranderd en klikt op bijwerken wordt alleen maar de voorbeeldweergave bijgewerkt. Pas als je op "opslaan" of "bijwerken en opslaan" klikt blijven je wijzigingen behouden.

Selectieregels, contexten en varianten

In tegenstelling tot Display Suite heeft Panels de mogelijkheid tot selectieregels, varianten en contexten. Ik zal deze drie termen weer kort toelichten.

Selectieregels

We hebben zojuist een voorpagina gemaakt, maar misschien wil je dat deze er voor gebruikers met een bepaalde rol er heel anders uit ziet. Met selectieregels kun je heel makkelijk instellen dat als aan een bepaalde voorwaarde is voldaan een bepaalde layout moet worden getoont. Als er niet aan deze voorwaarde is voldaan krijgt de gebruiker de standaard Drupal pagina te zien, of als die er niet is, een "u heeft niet genoeg rechten" melding.

Varianten

Je kan natuurlijk ook voor dezelfde URL een andere layout laten zien per gebruikersrol. Wanneer je een bestaande pagina bewerkt heb je in het menu rechts bovenin de mogelijkheid om een "variant" toe te voegen. Voor deze variant kun je een hele andere layout en inhoud selecteren en een andere selectieregels gebruiken om bijvoorbeeld alle gebruikers op te vangen die de rol van de eerste variant niet bezitten.

Contexten

Een laatste Panels feature zijn contexten. Dit laat zich het beste uitleggen door via het dashboard de "Node template" te bewerken. Deze al aangemaakte pagina heeft een dynamische URL, te weten: /node/%node (zie "instellingen > basis" aan de linkerzijde). Dit is de standaard Drupal url voor nodes, waarbij %node een placeholder is voor de Node-ID.

Wanneer je nu aan de linkerkant naar "contexten" gaat zie je dat de actuele waarde van %node wordt opgevraagd. Zo weet Panels altijd welke node bekeken wordt en kun je, wanneer je naar inhoud gaat, inhoud toevoegen als "de titel van de huidige node". Die titel zal zich telkens aanpassen op basis van de URL.

Door gebruikt te maken van deze context heb je ook meer optie voor selectieregels. Je kunt nu een variant maken die alleen actief is wanneer de node die bezocht wordt onder een bepaald content-type valt, of gekoppeld is aan een bepaalde taxonomie term, enzovoort.

Slot

Voor wie met Views heeft gewerkt zal Panels op veel vlakken bekend voorkomen. Dat is niet geheel toevallig want zowel Panels als Views (en Ctools) zijn voor een belangrijk deel het werk van Earl Miles (aka merlinofchaos). Ook wanneer je bekend bent met Views komt er qua mogelijkheden best wat op je af en zul je niet altijd direct weten waar je het zoeken moet. Aan de andere kant heeft Panels door de extra functionaliteiten weer net iets meer te bieden dan Display Suite als het aankomt op landingspagina's.

Daar staat tegenover dat Display Suite de mogelijkheid heeft om meerdere weergaves aan te maken waardoor je gemakkelijk de layout van afzonderlijke nodes kunt bepalen wanneer deze in een lijst worden weergegeven, denk aan een lijst met blog teasers of zoekresultaten. Om die reden is het in veel gevallen aan te raden om Panels en Display Suite naast elkaar gebruiken.

Wanneer je goed met beide modules overweg kunt heb je straks een voordeel op het moment dat Drupal 8 ten tonele komt. Drupal 8 zal namelijk out-of-the-box veel meer gaan doen met pagina layouts en bijbehorende functionaliteiten.

Hopelijk zijn de verschillen tussen Display Suite en Panels wat duidelijker voor je geworden. Heb je na deze vluchtige uitleg nog vragen stel ze dan gerust hieronder.