Display Suite versus Panels

Op Drupalin24dagen.nl kregen we onlangs de vraag wat nou eigenlijk het verschil is tussen de Display Suite en de Panels module. Een begrijpelijke vraag want qua functionaliteit vertonen de modules erg veel overlap.

Om duidelijker te maken waar deze modules überhaupt voor dienen en wat het verschil is in mogelijkheden / benadering laat ik in twee artikelen zien hoe je met beide modules een vervanging voor de standaard Drupal voorpagina zou kunnen maken. De werking van Display Suite is waarschijnlijk het gemakkelijkste te begrijpen dus daar begin ik mee. Maar eerst een korte introductie.

Waarvoor gebruik je Display Suite en Panels?

Als het op de layout aankomt zijn de standaard mogelijkheden in Drupal niet altijd afdoende. Je kunt, afhankelijk van de geïnstalleerde modules, een riks velden toevoegen onder "velden beheren" en vervolgens de zichtbaarheid en volgorde van deze velden instellen onder "weergave beheren". Iets meer controle krijg je nog wel door de "teaser" weergave.

Maar wat nu als de voorpagina die je wilt maken uit meer moet bestaan dan alleen een aantal netjes onder elkaar gezette velden met daarnaast misschien een paar blokken.

Stel bijvoorbeeld dat ik een Views slideshow over de hele breedte wil met daaronder een stuk tekst en dan daar weer onder drie blokken die netjes naast elkaar staan.

Dat wordt al heel snel lastig als het template dat in gebruik is niet de benodigde blok gebieden bevat. Was dat wel het geval dan betekende het alsnog dat ik blokken moet gaan dupliceren als ik op andere pagina's dan de voorpagina dezelfde blokken wil hergebruiken, maar dan op een andere positie. Een heel gedoe.

Om zoiets voor elkaar te botsen zou je voorheen met CSS in de weer gaan en de voorpagina moeten voorzien van een eigen *.tpl.php met daarin de nieuwe blok regio's opgenomen. Dat is het punt dat Panels en Display Suite om de hoek komen kijken. Het geeft je diezelfde controle om te bepalen waar je wat wilt hebben maar dan direct vanuit de back-end. Ineens wordt iets naast elkaar zetten (in plaats van onder elkaar) net zo simpel als het klinkt.

Een Drupal 7 voorpagina maken met Display Suite

Installeer Display Suite en activeer dan "Display Suite", "Display Suite UI". Ik ga ervan uit dat Chaos Tools en Views al zijn geïnstalleerd en geactiveerd.

Begin met het maken van een nieuw content type voor onze voorpagina, in dit voorbeeld noem ik dit content type "Home".

Wanneer je nu naar de "weergave beheren" pagina valt je misschien al op dat er in het tab menu onderaan een optie is bijgekomen genaamd "Layout voor Home in default". Hieronder kunnen we bepalen hoe de standaard weergave opgedeeld moet worden, bijvoorbeeld in twee kolommen van vaste breedte, of drie "fluid" kolommen die zich aanpassen aan de breedte van het scherm.

Indien je de Panels module ook hebt geïnstalleerd zorgt Display Suite ervoor dat je ook uit de aanwezige Panels layouts kunt kiezen. Je eigen layouts maken is ook mogelijk. Ik kies nu voor "Three column stacked - equal width".

Zodra ik een layout heb gekozen veranderen er drie dingen:

1. Er zijn nieuwe kopjes bijgekomen zoals "kop", "links", "midden", "rechts" en "voet" waaronder we velden kunnen plaatsen. Deze kopjes corresponderen met de regionen waaruit onze nieuwe pagina-layout is opgemaakt.

2. Er zijn nieuwe velden zichtbaar voor standaard zaken als "titel", "lees verder", "auteur" wat betekent dat we nu zelf kunnen bepalen waar we deze zaken willen hebben.

3. Tot slot zijn er een aantal menu opties bijgekomen in het tab menu met als belangrijkste "Aangepaste velden", helemaal onderaan.

Onder "Aangepaste velden" heb je de mogelijkheid om extra velden toe te voegen, waaronder "Block" - of "Dynamic" velden. De inhoud hiervan kan zijn een blok, een view, een formulier, een bepaalde node, noem maar op. Het "preprocess" veld stelt je in staat om nieuwe velden te laden via de Drupal "preprocess hook" terwijl je met het "Code" veld direct code kunt invoegen.

Dynamische content toevoegen binnen een node

Klik maar eens op "Dynamic Field" en vul een naam voor het veld in zoals "View slideshow". Dit veld moet beschikbaar zijn voor nodes.

Na het opslaan kunnen we het veld op de gewenste plek slepen. Als dit is gebeurd zie je achteraan de tekst "Not configured yet" staan. Klik op het radertje helemaal rechts.

De content binnen de overlay die nu naar voren komt wordt geproduceerd door de Chaos tools (Ctools) module, hetzelfde venster wordt ook door de Panels module gebruikt. Je kunt hier kiezen uit allerlei verschillende content maar als voorbeeld nemen we de View slideshow waar ik het eerder over had. Om een View toe te voegen moeten nog wel twee dingen gebeuren.

Alleerst activeer je onder de Chaos Tools module de submodule "Views content panes". Vervolgens maak je de gewenste View aan met de gewenste inhoud.

Als je klaar bent hoef je alleen nog onder het kopje "Formaat", onder "Weergeven", te kiezen voor "Paneelvelden".

Wanneer je nu weer terug gaat naar de "Weergave beheren" pagina en nogmaals op de configureer knop klikt van het dynamische veld zie je dat de Views pagina beschikbaar is gekomen.

Op dezelfde manier kun je andere content toevoegen en deze naar de gewenste plek slepen in de door jouw gekozen layout.

Wanneer je helemaal klaar bent maak je een nieuwe node aan binnen dit content type. Tot slot ga je naar "Instellingen > Websitegevens" en verwijs je onder het kopje "Standaard voorpagina" naar de zojuiste aangemaakte node.

Extra weergaven (displays)

Dit alles had je ook met Panels kunnen doen. De meerwaarde van Display Suite is dat het integreert met de weergave beheer die voor veel mensen vertrouwd is.

Maar er is meer. Met Display Suite kun je ook extra weergaves aanmaken zodat je binnen Views en andere modules niet alleen meer de keuze hebt uit de "standaard" en "teaser" display.

Om een nieuwe weergave aan te maken ga je naar "Structuur > Display Suite > View modes". Je kunt overigens ook een bestaande of nieuwe view mode

Met de View Mode Page module kun je afzonderlijke weergaven een eigen URL toekennen. Handig, bijvoorbeeld als je een reeks van landingspagina's wilt maken voor een bepaald type content.

Verder voegt Display Suite een display mode toe aan Views die net even wat meer mogelijkheden geeft als de standaard "inhoud" mode. Zo kun je er displays mee toewijzen aan lijst items zodat bijvoorbeeld het eerst item in de lijst volledig wordt weergegeven en de rest als teaser.

Extra CSS Klassen

Onder "Structuur > Display Suite" vind je naast een overzicht van aanpasbare weergaven de mogelijkheid om CSS klassen aan te maken die je vervolgens binnen een weergave beheer pagina kunt koppelen aan een Display Suite veld of regio.

Zoekresultaten opmaken

Wanneer de submodule "Display Suite Search" is ingeschakeld kun je via "Structuur > Display Suite > Zoeken" (rechtsbovenin, net onder de tabbladen) de standaard zoek weergave van zoekresultaten overschrijven. Vergeet niet om daarna via "Instellingen > Zoeken en metadata" Display Suite in te stellen als actieve zoekmodule.

Slot

Display Suite is een zeer complete module met een logische interface en handige functionaliteiten die je eigenlijk het liefst standaard in Drupal zou willen zien. In tegenstelling tot Panels integreert de module met de Weergave beheer pagina en kun je er nieuwe weergaven mee aanmaken, die ook nog eens extra mogelijkheden geven voor Views en het overschrijven van de zoekresultaten. Dit maakt Display Suite ideaal om niet alleen de layout van een afzonderlijke pagina te overschrijven, maar ook de manier waarop artikelen worden weergegeven in een lijst.

In het volgende artikel laat ik zien hoe wat de Panels module uniek maakt en hoe je hiermee een voorpagina in elkaar zet. Wanneer je nog vragen hebt over Display Suite kun je die hieronder stellen.