Flexibele paginastructuur met Drupal 8 + Paragraphs

Een klant vraagt je een informatierijke microsite voor haar te bouwen. Het is de bedoeling dat een redacteur zelf pagina's gaat aanmaken, dus ze heeft een CMS nodig. Als voorbeeld geeft ze een pagina met een kop, gevolgd door een tekst, een pull quote en nog meer tekst.

Je begint te bouwen in Drupal en voor de pagina maak je een nieuw content-type aan met drie velden: de body, een plattetekstveld voor de pull quote en een rijketekstveld voor de rest van de tekst.

Dat laat je inclusief wat lorem ipsum aan de klant zien, die tevreden is, maar zich na de livegang meldt met de opmerking dat het 'natuurlijk' de bedoeling is dat je meerdere pull quotes moet kunnen laten zien.

Dus je gaat opnieuw aan de slag en misschien doe je iets met de Field Collections-module, maar misschien kom je er ook niet uit en stel je aan de klant voor dat deze gewoon het bodyveld gebruikt om in de rijketeksteditor alle complexe opmaak door te voeren. Je stelt de klant voor dat zij blockquotes, waarvoor al een knopje in de rijketeksteditor zit, voor elke pullquote gaat gebruiken.

Je past vervolgens wat CSS-wijzigingen toe die ervoor zorgen dat een blockquote als een pullquote wordt weergegeven.

Dat werkt allemaal prima totdat de klant aangeeft middenin de tekst een slideshow of een advertentie te willen weergeven.

Op dat moment heb je misschien de behoefte Drupal bij het grofvuil te zetten en iets als Craft CMS te gaan gebruiken, waarvan je hebt gehoord dat het dit soort dingen out-of-the-box kan met behulp van zijn Matrixvelden.

Het probleem waar je op stuit, is dat het niet meer van deze tijd is dat de webredacteur alleen maar toegang heeft tot wat tekstvakjes waarin hij zijn ding kan doen. Een moderne webredacteur moet complexe webpagina's kunnen maken en beheren waarin hij een veelheid van bronnen samenbrengt die verschillende categorieën bezoekers optimaal aanspreken.

De module Paragraphs, ontwikkeld door het Rotterdams Drupalbureau VDMI voor Drupal 8, biedt hier gereedschap voor. Het werkt vergelijkbaar met het al genoemde Matrix-veld in Craft CMS.

Paragraphs laat een redacteur oneindig veel velden aan een pagina toevoegen en biedt daarbij de keuze uit verschillende soorten velden. Deze laatste moeten wel van tevoren door de developer zijn gedefinieerd en opgemaakt.

In plaats van deze opmaak:

Titel
Tekst

Kun je nu:

Titel
Tekst
Pull-quote
Tekst

of:

Titel
Tekst
Pull-quote
Tekst
Relevante artikelen

of:

Titel
Tekst
Advertentie
Tekst
Pull-quote
Tekst

enzovoort laten zien, zonder dat een programmeur moet worden ingehuurd om voor elk van die pagina's een eigen content-type te ontwikkelen.

Mocht je willen beperken of uitbreiden wat een redacteur binnen een content-type kan gebruiken, dan zet je velden aan of uit in de definitie van het paragraph-veld van je content-type.

Dit is hoe het werkt:

1. Download en installeer de modules Entity Reference Revisions en Paragraphs (en eventueel Diff).

2. Maak een content-type aan, noem het bijvoorbeeld Campaign Page of Story.

3. Verwijder eventueel het Body-veld en voeg een nieuw Paragraph-veld toe.

4. Onder Structuur / Paragraph Types kun je nu paragraph types aanmaken; hieraan voeg je velden toe. Je eindigt hierdoor met drie lagen containers: de paragraph-velden in je content-type, de paragraph-types in je paragraph-velden en velden in je paragraph-types.

5. In de paragraphvelddefinitie in je content-type stel je in welke paragraph-types gebruikt mogen worden.

6. Voeg inhoud toe van het nieuwe content-type. Op je Bewerken-scherm zie je een dropdownmenu waarmee je alle toegestane velden kunt toevoegen. Wil je een veld verwijderen, klik dan op de knop Verwijderen. Wil je een veld op een andere positie hebben, versleep het dan naar die positie. Wil je een veld toevoegen, kies dan een nieuw veld uit het uitklapmenu.

Dat klinkt even ingewikkeld, maar ik had het binnen een kwartiertje door. Als je er eenmaal mee aan de slag gaat, dan snap je zo hoe het werkt.

De schermafdruk hieronder laat het bewerkingsscherm zien van een node die een titel, een tekst, een pull-quote, het vervolg van de tekst en een afbeelding met bijschrift heeft.

Rechts van elk veld staat een knop met hetzij de tekst "Inklappen", hetzij de tekst "Bewerken". Van een ingeklapt veld wordt alleen het sleepkruis getoond, het paragraph-type en een automatisch aangemaakte samenvatting van de inhoud.

Met het sleepkruis verander je de volgorde van de paragraph-velden.

Het inklappen van velden is alleen van invloed op je bewerkingsscherm, maar het veranderen van de volgorde zie je ook terug op de weergave van je pagina.

Met de knoppen onderaan voeg je naar believen nieuwe velden toe. Standaard is dit een uitklapmenu, maar ik vind losse knoppen prettiger werken. Je hebt dan meteen feed-forward, het werkt op alle schermgroottes en selectie vereist een enkele handeling (klikken of aanraken). Gelukkig is dit instelbaar.

Voor het 'misbruik' van het rijketekstveld wil ik overigens graag nog even een lans breken. Rijketeksteditors hebben een slechte naam, omdat ze te vaak worden ingezet als een vormgevingswerktuig. Een goede rijketeksteditor laat vormgeving echter over aan de vormgever, maar staat de gebruiker toe om structurele mark-up te definiëren en toe te passen.

Voor bijvoorbeeld een pull-quote kun je binnen een dergelijke editor een eigen knop, een eigen HTML-structuur en eigen classnamen aanmaken. De redacteur wordt alleen aan de knop blootgesteld en hoeft de onderliggende techniek niet te kennen.

In Drupal 8 wordt standaard een rijketeksteditor meegeleverd, maar deze, zo schrijft Wim Leers, heeft alle vormgevingsfuncties standaard uitgeschakeld. Je kunt van een stuk tekst alleen nog maar aangeven wat het is – een kop, een link, een lijst, een citaat enzovoort –, niet hoe het eruit moet zien.

Het voordeel van het gedisciplineerd gebruik van een rijketeksteditor in plaats van losse velden, is dat je alle content die bij elkaar hoort, ook bij elkaar houdt. Dit kan in het onderhoud makkelijker zijn.

Wanneer gebruik je nou de rijketeksteditor en wanneer de Paragraphs-module? Ik heb een lichte voorkeur voor het correct gebruik van de eerstgenoemde, maar heel veel maakt het niet uit. Op het moment dat je elders gedefinieerde content wil invoegen (slideshows, advertenties, gerelateerde artikelen), kan Parapgraphs het gemakkelijkst in het gebruik zijn.