Drupal CCK + Views. Inhoudstypen. Paginaweergave via Views. Het maken van een medewerkersgalerij.

In de vorige les heb ik uitgelegd wat een node is in Drupal. Nodes zijn onze blogberichten, pagina’s (Page), verhalen (Story), enzovoort. In deze les maken we een nieuw inhoudstype (Content type) “Medewerker”. Dit type inhoud gebruiken we om een lijst met medewerkers te maken met een foto en een beschrijving van elk van hen.

Dus, welke modules hebben we hiervoor nodig:

Drupal CCK

1. CCK (Content Construction Kit) – deze module maakt het mogelijk nieuwe inhoudstypen aan te maken en er verschillende invoervelden aan toe te voegen.

De Drupal-module CCK is zo uitgebreid dat ze is opgesplitst in verschillende submodules. We hebben de volgende submodules nodig:

1. Content – voor het aanmaken van nieuwe inhoudstypen.
2. Content Permissions – voor het instellen van bewerkings- en weergaverechten van ons inhoudstype.
3. Number – maakt het mogelijk een numeriek veld toe te voegen, bijvoorbeeld voor een personeelsnummer.
4. Option Widgets – maakt het mogelijk keuzelijsten toe te voegen (checkbox, select, radio button).
5. Text – maakt het mogelijk tekstvelden toe te voegen voor gegevensinvoer.

De overige CCK-submodules voeren de volgende functies uit:

• Content copy – maakt het mogelijk bestaande inhoudstypen te kopiëren, inclusief hun velden.
• FieldGroup – groepeert invoervelden, maar aangezien wij er maar een paar hebben, is deze niet nodig.
• NodeReference – maakt het mogelijk een veld toe te voegen waarin een verwijzing naar een andere node kan worden opgeslagen. Bijvoorbeeld: als we een nieuwe “medewerker” hebben aangemaakt en deze medewerker heeft een eigen pagina op de site, kunnen we naar die pagina verwijzen.
• UserReference – maakt het mogelijk een veld toe te voegen dat verwijst naar een gebruiker. Als medewerkers op de site geregistreerd waren, konden we ze aan een gebruiker koppelen.

Sla de moduleconfiguratie op. Daarna verschijnt er in het beheermenu onder Inhoud een link Inhoudstypen:

We voegen het inhoudstype later toe, maar eerst installeren we de volgende twee modules.

FileField en ImageField voor Drupal

2. FileField en ImageField. FileField voegt een bestandsuploadveld toe dat aan een node wordt gekoppeld. ImageField doet hetzelfde, maar vereist dat het bestand een afbeelding is (jpg, gif, png). We installeren deze twee modules, die nodig zijn om foto’s van medewerkers te uploaden.

Sla de configuratie op en ga verder met het installeren van de volgende modules.

ImageCache voor Drupal

3. ImageCache en ImageAPI. ImageAPI is een API die wordt gebruikt in plaats van de standaard image.inc. ImageCache stelt ons in staat een preset (voorinstelling) te maken voor medewerkersfoto’s, zodat alle afbeeldingen in dezelfde afmetingen worden weergegeven, ongeacht hun oorspronkelijke grootte.

Je kunt ook de module lightbox2 gebruiken om foto’s te vergroten bij een klik. Dit is handig bij kleine presets of veel medewerkers. Na installatie voegt lightbox2 automatisch een lightbox-optie toe aan alle presets.

4. De module Views. De Views-module is een querybouwer voor de database, waarmee je zonder SQL-kennis lijsten met gegevens kunt weergeven. Installeer deze module.

Sla de configuratie op. De benodigde modules om een medewerkerslijst met foto’s te maken zijn nu klaar. Laten we die lijst maken.

Een medewerkerslijst maken in Drupal

Eerst maken we het inhoudstype “Medewerker”. Ga via het beheermenu naar Inhoud – Inhoudstypen – Nieuw inhoudstype toevoegen.

Let erop dat de veldnaam “Naam” in het beheermenu verschijnt en daarom in het Nederlands ingevuld kan worden, maar het veld “Type” door Drupal intern wordt gebruikt, dus gebruik alleen Latijnse letters, zonder spaties of speciale tekens (underscores zijn toegestaan).

Nu hebben we een nieuw inhoudstype “Medewerker”. Laten we invoervelden toevoegen. Klik op “Manage fields”.

In de rij “New field” vul je de volgende velden in:

Titel – in te vullen in het Nederlands
Field name – alleen Latijnse letters, zonder spaties (underscores toegestaan)
Type of data store – kies “file”, vervolgens verschijnt een lijst met widgets; kies daarin “image”.

Klik op “Opslaan” en bewaar de instellingen.

Ons inhoudstype “Medewerker” heeft nu een uploadveld voor de foto. Voeg nog twee velden toe: “Volledige naam” en “Over de medewerker”. Voor “Volledige naam” kies je het gegevenstype “Text” en daarna “Text field”. Verhoog de veldlengte naar minstens 80 tekens (bijv. 100).

Voor het veld “Over de medewerker” kies je ook “Text” als gegevenstype, maar daarna “Textarea (multiple rows)”. Onder “Tekstverwerking” selecteer je “Gefilterde tekst (gebruiker kiest invoerformaat)”.

Meer over invoerformaten bespreek ik in een volgende les.

Je zou nu de volgende velden moeten hebben:

Ons inhoudstype is klaar. Ga in het beheermenu naar Inhoud – Inhoud aanmaken – Medewerker.

Vul nu de medewerkergegevens in, net zoals bij een blogbericht of pagina, maar met de extra velden: foto, volledige naam en beschrijving.

Misschien vraag je je af wat je in “Titel” en “Inhoud” moet zetten. In feite kan “Volledige naam” de titel dupliceren en “Over de medewerker” de inhoud. Ik heb deze velden toegevoegd om te laten zien hoe CCK werkt. Je zou het inhoudstype verder kunnen uitbreiden met velden als functie, werktijden, kantoorruimte, enz.

Sla de aangemaakte medewerker op. Zoals eerder vermeld, zijn alle medewerkers nodes. Het adres van mijn medewerker Vasja is bijvoorbeeld node/9. Via het Pathauto-module wordt de URL automatisch gegenereerd, maar als je op “Bewerken” klikt, zie je dat de URL verandert naar node/nummer/edit.

We weten nu hoe we medewerkers kunnen toevoegen. Laten we de weergave verbeteren. We beginnen met het maken van een preset via ImageCache: ga naar Siteconstructie – ImageCache – Add new preset.

Voer een presetnaam in (bijv. breedteXhoogte in pixels). De beschikbare acties zijn:

• Add Crop – uitsnijden van een rechthoekig gedeelte.
• Add Desaturate – afbeelding omzetten naar grijstinten.
• Add Resize – schalen naar vaste afmetingen (zonder behoud van verhoudingen).
• Add Rotate – afbeelding draaien.
• Add Scale – schalen met behoud van verhoudingen.
• Add Scale And Crop – schalen met behoud van verhoudingen, daarna bijsnijden.
• Add Sharpen – verscherpen met unsharp mask.

We gebruiken “Add Scale and Crop” en stellen de afmeting in op 100x100 pixels. Klik op Opslaan.

Nu is het tijd voor de Views-module, waarmee we een query maken die alle medewerkers uit de database ophaalt en de foto’s toont volgens de preset van 100x100 pixels. Installeer Views en de submodule Views UI voor de interface.

Drupal Views

Ga via het beheermenu naar Siteconstructie – Views. Standaard zijn er enkele uitgeschakelde weergaven aanwezig (Archief, Recente reacties, enz.).

Klik op “Toevoegen” om een nieuwe view te maken voor de medewerkersgalerij. Geef een naam, bijvoorbeeld view_medewerkers.

Bij “View type” kies je “Node”, omdat “Medewerker” een node is.

Na het klikken op “Next” kom je in de Views-interface.

De belangrijkste secties zijn: Arguments, Sort criteria, Filters en Fields.

• Arguments – filteren op basis van URL-waarden (bijv. node/17 → argument = 17).
• Fields – de velden die we uit de database willen weergeven.
• Sort criteria – sorteervolgorde van de resultaten.
• Filters – criteria om resultaten te beperken.

We voegen nu velden toe:

Kies de velden: Inhoud: Volledige naam, Inhoud: Over de medewerker, Inhoud: Medewerkersfoto.

In het venster “Configure field Inhoud: Over de medewerker” hoef je niets te wijzigen. In “Inhoud: Volledige naam” verwijder je de titel.

In “Inhoud: Medewerkersfoto” verwijder je de titel en kies je de eerder gemaakte