Les 13

ViewField

ViewField is een module die ervoor zorgt dat je een veld kan aanmaken waarin je vervolgens een gemaakte view kan tonen. We werken dit praktisch uit met onze Bands and Members-site.

Installeer en activeer de module ViewField

Opnieuw hebben we materiaal nodig om mee te werken. Dit keer maken we een inhoudstype 'Albums' om een aantal albums van onze bands te kunnen presenteren:

De velden:

(Correctie: Het laatste veld in deze afbeelding is voor deze oefening NIET nodig)

Wanneer het inhoudstype gemaakt is gaan we wat inhoud toevoegen. Merk op dat je voorlopig geen rekening hoeft te houden met de weergave van het inhoudstype omdat de gewone bezoeker dit in de directe toekomst niet zal zien. We gieten de inhoud later in een mooi overzicht.

Klik hier voor de albumillustraties, de prijs mag je zelf bepalen

Wanneer de inhoud is toegevoegd maken van deze inhoud een view. Gebruik onderstaande afbeelding(en) om de view aan te maken:

  • De titel krijgt een H3-element
  • De Afbeelding zetten we op Medium

Deze view krijgt geen menulink, het is namelijk de bedoeling deze als een veld te tonen bij de nodes van de bands.

Maak bij het inhoudstype Band(s) een nieuw veld aan: Albums / Veldtype: Overzichten:

Bij de instellingen van het veld kies je nu de juiste View die je wil laten verschijnen:

De voorlopig laatste stap is het bewerken van de drie nodes: The Rolling Stones, The Beatles en Pink Floyd. Bij elke node dien je bij het veld Album het juiste overzicht te kiezen:

Maak nu een horizontale indeling met horizontale tabs bij de weergave van het inhoudstype bands. Dit zou je vervolgens moeten zien:

Om ook de Geschiedenis te zien zal je per node even de geschiedenis van de band moeten opzoeken en plakken in de body

Contextuele Filter (revisisted)

We zitten op dit moment met een probleem. Wanneer je kijkt naar de node van The Beatles en vervolgens bij Albums; dan zie je alle cd's van alle bands. Wij willen uiteraard enkel de cd's zien van de bands waar we op dat moment naar kijken. We zullen hiervoor een contextuele filter moeten toevoegen. Deze vinden we onder Uitgebreid:

Merk op dat we dit keer niet de volledige inhoud gaan filteren maar enkel de band. Dat is dan ook de reden waarom we het veld in het overzicht steken maar vervolgens uitsluiten van de weergave.

Stel de filter zodanig in dat wanneer de naam van de band in de URL verschijnt, deze vervolgens enkel de albums van die band toont:

CSS Albums

We bekijken de css van het overzicht bands. Klassikaal.

Om het gedraaide uiterlijk mee te geven aan het titelveld is dit een interessante website: www.enjoycss.com (Met dank aan Pascal)

Download de css code hier

Editable View

Stel: je hebt een winkel met een hele reeks producten met elk een prijs. Het aanpassen van die prijzen is uiteraard mogelijk maar op dit moment moet je dus elke node apart bewerken. Een handige module die dit oplost is Editable Views. We maken een overzicht waarvan we vervolgens bepaalde velden instellen als editable.

Activeer de module, deze zit in de distributie. Bij een naakte Drupal dien je deze uiteraard te installeren.

Maak een nieuw overzicht aan volgens onderstaande afbeeldingen:



Nieuw is nu het veld prijs. Kijk bij velden toevoegen en zoek op prijs.

Kies nu voor de 'editable' versie. Deze is beschikbaar omdat we voor editable hebben gekozen bij het aanmaken van het overzicht.

Het resultaat is nu dat je een nieuw veld hebt toegevoegd dat aanpasbaar is en 'opslaanbaar'. Dit laatste kan verwarren zijn. Klik niet op de oplaan-knop onderaan, die is onderdeel van de view. Sla op de normale manier op (bovenaan) en bekijk de view in zijn weergave op de site zelf.

Pas enkele prijzen aan. Wanneer je onderaan dan opslaat zal dit ook zichtbaar zijn in de node van de bands.

Uiteraard zitten we hier met een probleem. Wanneer een gewone bezoeker de site bekijkt enĀ  eventueel een CD zou willen kopen, dan kan hij eerst even de prijs aanpassen. We moeten dit aanpassen bij de rollen.

Dit doe je zo:

Klik bij de Pagina-Instellingen op Geen (bij Toegang)

Kies vervolgens Rol en sla op

Vervolgens selecteer je enkel de administrator

Wanneer je nu uitlogt zal de menulink naar het overzicht verborgen zijn. Inloggen als admin geeft je opnieuw toegang tot de view.

Tot slot kan je met een beetje CSS het prijsveld wat aantrekkelijker maken, verberg de originele prijs en het label prijs.

Oefening

Maak een nieuw overzicht met de volgende eigenschappen:

  1. Het overzicht toont inhoud van de Bands
  2. Formaat: Tabel
  3. Menu-link: Overzicht bands
  4. Enkel zichtbaar voor de admin
  5. Zorg voor een label zoals in het voorbeeld
  6. HTML van alle labels: H3
  7. Velden:
    1. Titel (HTML: H3)
    2. Foto (thumbnail)
    3. Body (ingekort: 550 tekens)

Bijlage in een View

Onder het overzicht willen we een voorstellingen van al onze albumillustraties. Hiervoor zullen we een bijlage toevoegen onder het overzicht.

Voeg een bijlage toe

Vanaf nu: Toepassen (Deze weergave)

Verander het formaat naar een Onopgemaakte lijst

De foto's van de albums zitten helaas niet in het inhoudstype van de bands. We zullen dus een relatie moeten leggen.

Voeg een relatie toe waarbij we het veld 'Band, referentie naar een entiteit' zullen gebruiken om te relateren.

Voeg nu het veld afbeelding toe waarbij je gebruikt maakt van de relatie.

De afbeelding zelf wordt een thumbnail.

Verwijder alle andere velden.

Koppel de bijlage aan de page

Zet de bijlage onderaan de page

Met wat CSS zorg je er ten slotte voor dat de afbeeldingen floaten naar links.