Les 11

Herhalingsoefening (Deel 2)

We werken verder aan onze site rond het thema muziek. Aan de hand van concrete opdrachten herhalen we geziene leerstof. Hierna bouwen we met nieuwe kennis verder aan de site.

  1. Maak een nieuw inhoudstype aan: bandleden
  2. Voeg volgende velden toe:
    1. Afbeelding: bestaand veld, geen speciale instellingen
    2. Band: referentie naar inhoud, refereer naar het inhoudstype 'Band'

  1. Uiteindelijk resultaat:

  1. Stel ook de weergave correct in. Hiervoor zal je een nieuwe afbeeldingsstijl moeten maken:

  1. Nu komt er een beetje bandwerk aan te pas. Je zal nu alle bandleden moeten toevoegen. Gebruik hiervoor de bestanden van vorige les. Let hier telkens op het volgende:
    1. Focal Point goed leggen
    2. Alt-tekst niet vergeten
    3. Aanduiden bij welke band de muzikant speelt
    4. Een Menu-link leggen
  2. Voorbeeld:

     

  1. Zorg er nu voor dat de menu-linken kloppen. Wanneer je met de muis over een band schuift, verschijnen de verschillende leden in een dropdown-menu:

  1. Met PathAuto Bulk Generate zorg je ervoor dat er URL-aliassen worden aangemaakt voor de bandleden.
  2. Voor de volgende oefening maak je eerst nog even twee afbeeldingsstijlen aan:

  1. We maken een overzicht aan die de bands met hun leden weergeven. Een relatie zal hier nodig zijn. Gebruik onderstaande afbeelding voor de basisinstellingen:

  1. Leg eerst de relatie: (te vinden onder Uitgebreid)

  1. We voegen nu het veld afbeelding toe en we leggen de relatie, gebruik de correcte afbeeldingsstijl:

  1. Voeg opnieuw het veld afbeelding toe, dit keer gebruik je de relatie niet, let op de afbeeldingsstijl:

  1. Je merkt nu dat de foto van de band zelf te veel getoond wordt, we gaan hier nu groeperen, dit zal ervoor gaan zorgen dat je één keer de foto van de band te zien krijgt met daaronder de verschillende leden. Klik naast onopgemaakte lijst op instellingen

  1. Kies nu bij groepeerveld nr.1 voor de afbeelding met de relatie (onderstaande foto toont het een beetje anders, niet op letten):

  1. Tot slot gaan we bij de velden het afbeeldingsveld met relatie uitsluiten van weergave, het wordt namelijk gebruikt om te groeperen. En als dan toch bezig ben, sluit ook de titel uit van weergave:

  1. De fotootjes van de leden zouden best wel naast elkaar mogen staan. Hiervoor moeten we wat CSS toepassen. Stel het veld eerst in zodanig dat deze een CSS klasse krijgt:

  1. Deze klasse 'links' is natuurlijk nog niet gemaakt. Via de Asset Injector maak je een nieuwe regel aan (label: CSS overzicht bands) en je plakt onderstaande code erin:

.links
{
  float:left;
  margin-bottom:35px;
}

  1. Het overzicht is af, we werken even het menu af zodat 'Overzicht Bands' de enige links naast Home wordt. De rest klapt uit.

  1. Ons blok op de frontpage die een slideshow toont van de verschillende bands doet wat lastig. We lossen dit op door het blok te degraderen naar de Footer Second Widget:

Navigatie Menu

Een beeld dat je op vele website tegenkomt is een navigatie menu aan de linker of rechterkant van het scherm. Wij willen dat ook weergeven op ons overzicht van de bands.

  1. Eerst maken we een nieuw menu aan:

  1. We geven het menu een naam:

  1. Een menu zal altijd als blok worden aangemaakt. Bij de block - Layout kan je bij Right sidebar klikken op Blok plaatsen

  1. In de lijst ga je op zoek naar het vers gemaakte navigatie menu
  2. Bij de instellingen bepaal je nog even dat dit enkel op de pagina van het overzicht mag verschijnen:

  1. Sla alles even op en bekijk het overzicht van de bands: niets te zien. Dit is logisch want we hebben in ons navigatiemenu nog geen linken geplaatst.
  2. Kies Structuur - Menu's
  3. In de lijst kies je voor Menu bewerken bij Navigatie menu
  4. Vervolgens kies je voor +link toevoegen

  1. In het volgende venster bouw je nu de eerste link. Dit is natuurlijk een beetje werk om alle linken toe te voegen, maar je zal merken dat het venster je hier wel helpt:
    1. De titel moet je zelf intikken. Bijvoorbeeld The Beatles
    2. De link is gemakkelijk: tik de eerste tekens en Drupal doet een voorstel

  1. Controleer of de link goed gelegd wordt:

  1. Probeer op deze manier volgend menu te bekomen:

  1. Het uiterlijk van dit gegeven is een zorg voor volgende les.