Les 15

Drupalversie: 
Drupal 8 / 7

Opdrachten (Drupal 8)

  1. Het bestaande Hoovereffect I-blok verschijnt enkel op de frontpage in de linker zijbalk.
  2. Er is een background image aanwezig op de frontpage. Dit is een patroon naar keuze of gebruik onderstaande. Hiervoor zal je een nieuwe bloksoort moeten aanmaken.

  1. Voeg ons logo toe. Dit kan je opnieuw downloaden onder les 12
  2. De titels bij het blok op de front zijn wit en niet zo goed leesbaar. Pas de kleur aan in de bestaande CSS-regel.
  3. Wanneer je met de titels bezig bent in de CSS. Pas meteen ook het lettertype aan:

  1. Om de menubalk wat aantrekkelijker te maken kan je onderstaande code gebruiken. Het lettertype in deze code dien je aan te passen naar iets dat is ingeschakeld. Pas ook de kleuren aan indien niet tevreden.

.bg-faded
{
  background-color:#45512999;
}
.navbar-light .navbar-nav .nav-link
{
  color:rgba(113, 15, 25, 0.5);
  font-size:1.3em;
  font-family: 'Advent Pro';
}

  1. Plaats het blok sitebranding in de kop
  2. Gebruik onderstaande CSS om de sitenaam wat aan te passen. Opnieuw opletten met het lettertype

.navbar-brand
{
    display: inline-block;
    padding-top: 0rem;
    margin-right: 1rem;
    font-size: 4rem;
    line-height: inherit;
    white-space: nowrap;
    color: black;
    font-family: 'Advent Pro';
}

  1. Plaats het eerder gemaakte blok cirkel terug. Deze komt ook in de kop boven het blok site branding
  2. Zorg dat er geen logo wordt getoond.
  3. Voeg het logo toe als apart blok, plaats dit in de kop net onder het blok Cirkel
  4. Plaats het logo in het midden.
  5. Plaats ook de cirkel in het midden door de broncode aan te passen. Tip: 35%

Views, de finesse (Drupal 7)

Views, ondertussen zou je denken dat je alles hiervan al kent. Opnieuw besteed ik hier een hoofdstuk aan. Benieuwd wat er nog te leren valt...

Vanwege modules die enkel werken in Drupal 7 heb ik besloten dit onderdeel op onze Drupal 7 site te maken.

Voorbereiding

  1. Ga naar de statusrapportage en controleer eerst op updates
  2. Installeer en activeer volgende modules:
    1. Automatic Nodetitles
    2. Views Conditional
    3. Better Exposed Filters
    4. Views Table Filter

Inhoudstypes

Inhoudstype I:

  • Naam: Cursisten
  • Weergave auteur en datum uit
  • Reactie instellingen gesloten
  • Bestand veld Afbeelding toevoegen
  • Weergave afbeeldingsveld: thumbnail

Inhoudstype II

  • Naam: puntenboekje
  • Weergave auteur en datum uit
  • Reactie instellingen gesloten
  • Voeg drie velden toe, gebruik de afbeelding en volgende kenmerken:
  • Cursisten --> referentie naar het inhoudstype cursisten
  • Cursus --> een lijst met de verschillende cursussen

  • Punten --> gebruik als achtervoegsel %

Inhoud toevoegen

  1. Gebruik deze bestanden om drie keer inhoud toe te voegen van het type cursisten

Ook van het type Puntenboekje willen we wat inhoud. Hier komen nu twee extra zaken bij:

I.  De titel van de node zal automatisch aangemaakt worden
II. Bij de keuze van de cursist zal ook de foto zichtbaar zijn.

  1. Open de instellingen van het inhoudstype Puntenboekje en kijk onderaan.
  2. We passen het vervanginspatronen voor onze titel aan:

  1. Maak een nieuw overzicht aan met volgende kenmerken:
    1. Naam: cursisten
    2. Inhoud van het type cursisten
    3. Onopgemaakte lijst van velden
    4. Voeg het veld afbeelding toe, afbeeldingsstijl: thumbnail

  1. Bij de Page van ons overzicht voegen we nu een referentie toe:

  1. De instellingen van de page worden overgenomen, het veld afbeelding is dus in orde.
  2. Open de instellingen van de Entity Reference-lijst en pas aan:

  1. Sla alles op. Nu moeten we het inhoudstype Puntenboekje aanpassen en dan specifiek het veld Cursist:

  1. We passen de Modus aan naar Overzichten en vervolgens kiezen we ook welk overzicht:

  1. Wanneer je nu inhoud gaat toevoegen kan je ook de foto van de cursist zien.

  1. Voeg nu vier keer inhoud toe van het type Puntenboekje. Gebruik elke cursus minstens 1 keer. Merk op dat de titel automatisch aangemaakt wordt.

  1. Pas even de weergave aan zodat je ook de foto ziet:

Overzicht

Met de data die we nu hebben kunnen we een overzicht maken met daarin een aantal nieuwe tools.

  1. Maak een overzicht met volgende kenmerken:
    1. Naam: Punten
    2. Inhoud van het type puntenboekje
    3. Tabel van velden
    4. Menulink in het hoofdmenu
    5. De nodige velden:
      1. Titel: enkel de naam (gebruik de relatie)
      2. Afbeelding Cursist: een relatie zal hier nodig zijn
      3. Cursus
      4. Punten

  1. We willen een nieuwe kolom waar er op basis van de gegevens in het veld Punten automatisch verschijnt: Geslaagd, Niet geslaagd
  2. Voeg bij de velden het veld Views Conditional toe (onderaan de lijst)

  1. De wizard die vervolgens verschijnt spreekt voor zich. Let wel dat je bij de waar 49 zet, anders is 50 % ook niet geslaagd.

  1. We zorgen vervolgens voor een mooier geheel. Dit is om didactische redenen op verschillende manier gemaakt. Hieronder overloop ik even het resultaat:
    1. Cursusnaam staat iets groter
    2. Punten staan vetgedrukt
    3. Wanneer de status 'niet geslaagd' is dan verschijnt er een rode achtergrond
    4. Afhankelijk van de cursus krijg je een andere achtergrond

  1. Maak om te beginnen een nieuwe CSS-regel en plaats er volgende code in:

.Drupal.Basis
{
    background:#f6f6ee;
}
.Drupal.Gevorderd
{
    background:#e5e5cc;
}
.Drupal.Expert
{
    background:#d4d4aa;
}
td
{
    background:none;
}
.cursusgroter
{
    font-size:1.5em;
}
.shadow img
{
    box-shadow: 5px 5px 15px 1px #666;
    border-radius: 15px 40px 20px;
}

  1. We beginnen eenvoudig. Via de ingebouwde HTML maak je de percentages dik:

  1. Op een reeds gekende manier maken we de font van de cursusnaam groter:

  1. Het veld afbeelding geven we de klasse mee die eerder werd opgesteld in de CSS-regel:

  1. We willen een rode achtergrond op de status 'niet geslaagd'. Dit regelen we bij View Conditional.

  1. Afhankelijk van de cursus krijgt de rij een andere tint groen als achtergrond. Als je goed kijkt hebben we dit reeds gecodeerd in de CSS. De moeilijkheid is nu om deze te gaan toepassen op de view. De truc hier is het gebruik van een token. Je neemt het token van de cursusnaam, vervolgens wordt er gekeken inde CSS en de juiste tint groen komt op de juiste rij. Met dank aan Dirk Bernaert

Better exposed filters

  1. Filteren kunnen we reeks maar met deze module kan je de filter duidelijker en grafisch aantrekkelijker maken.

    

  1. Bij de stijl van het zichtbaar formulier schakelen we module eerst in:

  1. Stel deze nu even in:

  1. Zorg ervoor dat er kan gefilterd worden op de cursus. Gebruik volgende instellingen:

Afwerking

De details:

  1. De afbeelding krijgt een afbeeldingsstijl 'Schalen en bijsnijden 150 x 150'
  2. De HTML van de titel is aangepast naar H2
  3. Zorg voor een achtergrond naar keuze bij de view. Opgelet! Dit werkt, maar net iets anders dan in Drupal 8