D2 les 05

Panels

In dit gedeelte gaan we Panels (=panelen)  bespreken. Het is een veel gebruikte module met zo  veel mogelijkheden dat je er een paar lessen zou kunnen aan besteden. Deze inleiding heeft dus niet de pretentie om volledig te zijn.

Met Panels  kan er het uitzicht van je webpagina mee ordenen en een eigen opmaak geven, binnen je thema (=theme). Tot hiertoe werd de look van je pagina bepaald door het inhoudsgedeelte met daarrond de blokken die je een bepaalde plaats geeft, dit alles binnen de opmaak van je thema. In het inhoudsgedeelte kan je niet zo maar je gegevens (inhoud) opdelen. In Joomla bvb kan je een overzichtspagina instellen en het aantal kolommen bepalen. Drupal kan dit ook, maar dan via Panels. En .. je raadt het al, stukken beter … maar  complexer. Er is meer. Panels kan het volledige uitzicht van je webpagina overnemen. Panels werkt ook met views.

We beginnen met de installatie.

We maken Panels actief. Ook Panel nodes, anders kunnen we Panels maken maar hebben we geen URL die er naar verwijst. Mini-panels zijn panels die als blok kunnen gebruikt worden of als onderdeel in een groter paneel. De in-place editor is handig om via bvb via slepen de inhoud van plaats te veranderen.

Ook bij Ctools zijn er een aantal items die betrekking hebben met Panels. Vink die aan. Maak ook dat PAGE Manager aan staat in Ctools. Pages en Panels werken met elkaar samen.

Stylizer zorgt er voor dat we Panels kunnen een opmaak geven met een makkelijke interface. De laatste module maakt dat Views ook beschikbaar worden om in panelen te gebruiken. In de structuur menu zijn volgen items er bij gekomen: Custom content panes, mini panels, panels en stylizer.

Verwar panes (=venster) niet met panels (=paneel). Een panel heeft regions (=gebieden), waar er inhoud aan toegevoegd wordt. Deze inhoudstukjes worden content panes of kortweg panes genoemd. Ik geef hier een voorbeeldje:

Het Panel (overzicht paneel) is onderverdeeld in 4 regions( gebieden) die opgevuld gaan worden met content panes (inhoud vensters). Zo kan er in een region verschillende panes onder elkaar worden geplaatst. Vergelijk dit met een blok waar je verschillende items kunt in brengen. Deze inhoud kan van alles zijn: zelf gemaakte artikels, views, menu’s, zoekvensters… Je kunt zelfs in een panel een ander panel als inhoud steken. Het uiteindelijk grote paneel noemt men dan een ‘ landing panel’. Het uiteindelijke panel dus.

Laat ons eerst een inhoudstype maken om mee te kunnen werken.  We nemen de 4 vestigingen van onze school waar er informatica wordt gegeven.

Full versie weergave:

In teaser vorm:

Doe dit voor de 4 vestigingen. (haal de info van de site van school)

Panels gekoppeld aan een inhoudstype

Een mogelijkheid van panels is de samenwerking met ‘pages’ (=pagina’s).  Hiermee kan je de normale weergave van de inhoud ordenen in een paneel. Als je bij Drupal inhoud hebt gemaakt bvb persoonlijke gegevens, dan komen die allemaal onder elkaar tevoorschijn. Je kunt via de weergave van het inhoudstype wel de volgorden en het tonen van een label instellen, maar meer niet. Laat ons nog eens de gegevens van een vestiging bekijken in onze normale weergave (geen paneel):

Kunnen we niet het adres, tel,… enz naast de foto tonen? Een paneel op veld niveau…Jawel. Volg mij.

Schakel node template in en bewerk. Merk op dat je op Pagina’s bent terecht gekomen.

In de structuur kan je er ook rechtstreeks naar toe.

We maken een nieuwe variant, die enkel van toepassing zal zijn op het inhoudstype ‘vestigingen’.

We vinken selection rules aan om te kunnen filteren op het inhoudstype.

We kiezen ook een layout met gebieden:

 

Nu kunnen we de velden toevoegen. We zien dat we nu de velden van ons geselecteerd  inhoudstype kunnen invoegen. Voor de titel kies je node title. Dit wordt niet als veld aanzien omdat het standaard aanwezig is. De rest hebben se zelf gemaakt bij het instellen van het inhoudstype.

Zo ziet de structuur er nu uit:

Ga je nu naar één van de vestigingen, dan neemt panels over en modifieert naar deze pagina variant. Als er geen variant is dan wordt de standaard weergave gebruikt.

Hier heb ik de labels verborgen en een beetje opmaak gebruikt. De foto kan je gewoon centreren door bij tekst gecentreerd te kiezen.

Landingspagina's

Deze pagina's kunneneen menulink hebben. Klik nu op panels in de structuur menu.

Klik eens bij instellingen. Zo kan je zien weke gebieden je kunt kiezen. Je kunt zelfs bij layout een nieuwe flexibele structuur zelf ontwerpen.

 

We gaan het ons makkelijk maken. We gaan de landing page wizard gebruiken.

Kies een ander pad dan voor het overzicht van daarnet (vestigingen).Voor de regions kiezen we 2 kolommen met baksteen patroon. Hoeveel regions zijn er?

Ons paneel moet nu met inhoud worden opgevuld. Klik op het tandwieltje van elk gebied waar je iets wil inbrengen.

We kiezen existing node (bestaande knoop). Verken eens eerst de rest…

En voeg de vier vestigingen toe...

Het resultaat:

Wat er getoond wordt, luistert naar de instellingen van de teaser. Ze hebben we dit ingesteld. Merk op dat er een menu bijgekomen is om de pagina in te stellen. (customize en change layout.) Als je daarop klikt kom je op de in-place editor terecht die aangevinkt werd bij de modules. Van hieruit kan je nu verder de instelling doen.  Dit is een makkelijke manier.

 

Een andere manier om bij de configuratie te komen via structuur=>panels

Je kunt ook nog via deze weg naar dezelfde instellingen:

 

In de laatste 2 gevallen kom je op de volledige instellingspagina terecht:

 

We gaan nu (kies zelf een manier) de bovenkant en het middenstuk met een beetje tekst vervolledigen:

Dit wordt het (voorlopig):

Panel opmaak

Tijd voor wat opmaak.

Met dit venster kan je zelf een opmaak instellen, die je kunt toepassen op de gebieden of vensters. We geven een naam en stellen de waarden in.

Via de stylizer kan je dit altijd aanpassen.

Nu kan je per region de stijl kiezen. Zie je de stijl ‘grijs’ staan. Deze heb ik aangemaakt.

Het resultaat in 2 gebieden:

Dit kan je dan toepassen op het inhoudsvenster. Merk op dat ‘grijs’, mijn vorige stijl, niet zichtbaar is. Dit klopt omdat het een opmaak was voor een region of gebied.

Het wijzigen van een gemaakte en opgeslagen stijl kan, volgens mij, enkel nog gewijzigd worden door te exporteren en daarna te importeren.

Maak dus gebruik van de voorbeeldfunctie om een stijl te bepalen, anders moet je deze werkwijze volgen… Vergeet ook niet het vinkje aan te zetten bij overwrite existing record.

We kijken naar een mogelijk resultaat:

Als we de rechter pane van rechts naar links zetten, dan zien we dit:

Je ziet dat elke pane zijn opmaak behoudt. Hadden we gekozen voor een gebied stijl, dan zouden we geen onderscheid zien tussen de verschillende panes.

Onze opmaak komt nu niet bepaald meer overeen met de bestaande blokken van het Drupal thema. Zet dit vinkje aan en ze zijn weg. Je kunt natuurlijk ook bij de blokken zelf deze pagina gaan verbieden.

Je hebt nu wel geen navigatie men meer. Je kunt die wel integreren in je panels, maar dan moet je een kolom bij hebben. We hadden dan voor een 3-koloms opmaak moeten kiezen.

Mini Panels

Je kunt ook mini-paneeltjes maken. Deze kunnen in een ander paneel ingebed worden, maar ook als blokje bij de ‘normale’ weergave van het Drupal thema.

Geef het kind een naam en klik doorgaan. Bij onderstaande stap doe je gewoon niets; dit is voor later…

Daarna kan je gewoon weer inhoud toevoegen. Ik heb nu gekozen voor een simpele 2-koloms weergave.

Minipanels zijn als blok instelbaar; hier kies ik voor de voet locatie:

Het mini-paneeltje is ook integreerbaar  in een ander paneel:

Hier heb ik het in de linker plaats gezet van onze overzichtspagina. Met dit principe kan je dus binnen een structuur nog onderverdelingen maken. Ik verwijder het weer, omdat het hier niet past.

In ons hoofdpaneel hebben we nog een plaatsje onderaan… Ideaal om een custom content pane te gebruiken. Het is een stukje inhoud die je ter plaatse maakt om bij elk paneel te kunnen hergebruiken.

Standaard inhouds vensters

Je kunt het nu invoegen:

Voila. Een beetje info die ik telkens opnieuw kan integreren.

Panels (en pages) hebben nog veel mogelijkheden die voor de huis- en tuingebruiker niet relevant zijn. Ik denk met deze inleiding dat je 80 % van de mogelijkheden kunt benutten. Zoals reeds vermeld kan je ook Views indelen met panels. Via de module views content panes kan je dit beheren. Enkele voorbeelden:

Een raster view met panel opmaak.

Een andere indeling van je view met view content panes.