Les 2

Drupalversie: 
Drupal 7

Opwarmer

Een Drupalsite gebruikt eigenlijk twee thema's:

  • Het thema waarin de site getoond wordt aan de bezoeker
  • Het thema waarin de admin achter de schermen werkt.

Dat laatste is standaard 'Seven'. Aangezien het oog ook wat wil installeren we een nieuw administration thema:

Download en installeer het thema adminimal, zorg ervoor dat dit ingesteld staat als administratie-thema.

Setup Drupal 7 site

Zorg voor het volgende:

  • Installeer en stel in als standaard, het thema Lexus Zymphonies Theme
  • Alle blokken verborgen, behalve de primaire inhoud
  • Alle menulinken weg, behalve 'Home'
  • Pas de inhoud van de homepage aan naar iets algemener (bijvoorbeeld: Drupal 7 oefensite...)

Nivo Slider

Nivo Slider is een alternatief voor Views Slideshow. Ook kan dit ter vervanging zijn van eventueel geïntegreerde slideshows in een thema.

  • Installeer en activeer de module Nivo Slider
  • Zorg dat de plugin op de juiste plaats komt te staan op de server.
  • Gebruik de uitleg op de download-pagina om dit tot een goed einde te brengen:

Nivo Slider wordt gebruikt voor het weergeven van foto's in een slideshow we hebben foto's nodig.

  • Zoek minstens drie foto's rond een thema naar keuze (gebruik <trefwoord> wallpaper als zoekterm)
  • Zorg ervoor dat de foto's gelijke afmetingen hebben. Ik koos voor 1920 x 500
  • Heb je geen inspiratie gebruik dan deze foto's

Ga naar de instellingen van de module Nivo Slider

  • Via de knop Bladeren... navigeer je naar jouw foto's, doe dit.
  • Wanneer de foto is gekozen sla je de instellingen op
  • Upload op deze manier drie foto's

Bij elke foto kan je optioneel:

  • Een titel aanvullen
  • Een beschrijving ingeven
  • Een link leggen naar een bepaalde pagina of website
  • Een specifieke overgang instellen

Bekijk nu even het resultaat. Je zal zien dat we een probleem hebben. we zien geen slideshow...

  • Nivo-slider wordt als blok ingesteld. We moeten dus bij de blokken dat gemaakte blok een plaats geven, ik stel 'Diavoorstelling voor'

  • Sla op en bekijk het resultaat

We merken dat er nog een probleem is, de volledige site schuift precies op in het ledige.

  • Klik op het tandwiel
  • Kies voor 'Configure slider options'

Merk op dat je bovenaan een tweede tabblad kan vinden: Opties

We overlopen de meeste instelling klassikaal. Het onderstaande is het belangrijkste:

Bij navigatie dien je de drie vinken uit te schakelen. Op die manier is het probleem verholpen.

CSS

De blauwe menubalk zal waarschijnlijk vloeken met de foto's uit de nivo slider. Pas dit even aan door een nieuwe css regel aan te maken.

CSS in Drupal 8

CSS en Drupal 7. Dat is een combinatie die je ondertussen wel onder de knie zal hebben. We bekijken in onderstaand deel hetzelfde verhaal in Drupal 8.

  • Surf naar jouw Drupal 8 website en log in
  • Installeer en activeer de volgende module: Asset Injector
  • Nu kan je via Instellingen - Ontwikkelingen - Asset Injector - CSS Injector css regels toevoegen
  • Merk op dat je meteen ook Java Script kan toevoegen. Dit is iets wat later aan bod komt.

Views: relaties, groeperen, contextuele filter

Inleiding

In dit deel werken we een overzicht uit rond 'fotografen'. Het eerste deel zal herhaling zijn. We hebben namelijk een Inhoudstype nodig met inhoud. Nadien kunnen we starten met nieuwe leerstof. We bespreken onder andere:

  • Relaties
  • Contextuele filters
  • Groeperen
  • Herschrijven van resultaten

Inhoudstypes

We maken twee inhoudstypes:

Inhoudstype 1: Fotograaf

  • Voeg drie velden toe:
    • Afbeelding fotograaf
    • Woonplaats
    • Website
  • Gebruik de foto voor de juiste naamgeving, veldtype en widget
  • Bij de instelling van de velden hoef je niets te veranderen.

Inhoudstype 2: Foto

  • Voeg twee velden toe:
    • Afbeelding
      • Multiupload
      • Waardes onbeperkt
    • Fotograaf
      • Referentie naar een entiteit: Fotograaf

Inhoud toevoegen

Download hier de nodige bestanden

  • Voeg twee nodes van het type fotografen toe:
    • Frederik Bogaert en Jeffrey Van Daele
  • Gebruik de bestanden voor de inhoud.

  

  • Voeg per fotograaf twee foto's toe. Geef deze de titels Frederik1 en Frederik2 / Jeffery1 en Jeffrey2
  • Refereer uiteraard naar de juiste node

View

Maak een nieuw overzicht met de volgende kenmerken:

  • Naam: Foto overzicht
  • Inhoud van het type Foto
  • Raster van Velden
  • Menulink in het hoofdmenu

We voegen eerst een relatie toe. Deze is mogelijk door onze entity reference in het inhoudstype.

  • Kies voor Referentie naar een entiteit: Gerefereerde entiteit:

  • Na toevoegen en opslaan zie je dit nu staan bij de relaties:

  • Voeg de nodige velden toe:

  • Bij het veld Afbeelding gebruiken we Colorbox:

  • De velden woonplaats, website en afbeelding fotograaf zitten niet in het inhoudstype Foto, wel in Fotograaf, hier moeten we dus gebruikmaken van onze eerder gemaakte relatie

  • Voeg volgende wijzigingen door:
    • Geen 4 kolommen maar 2 bij de instellingen van het raster
    • Het veld titel verbergen
    • Geen label bij het veld afbeelding
    • Geen label bij het veld woonplaats
    • Geen label bij het veld Afbeelding Fotograaf

Groeperen van velden

  • Klik bij de instellingen van het raster
  • We willen groeperen op basis van de fotograaf, zet de instellingen dus als volgt:

  • Je merkt nu twee keer de foto van de fotograaf, verberg daar om het veld Afbeelding fotograaf door dit uit te sluiten van weergave
  • Voeg een tweede groepeerveld toe, dit keer kiezen we voor de woonplaats

  • Verwijder door uit te sluiten van weergave nu ook het overbodige veld Woonplaats

Resultaten herschrijven

  • Open de instellingen van het veld woonplaats
  • Klik bij resultaten herschrijven en neem onderstaande oplossing over:

  • Gebruik de vervangingspatronen of typ dit gewoon over
  • Verberg ook het veld fotograaf en het veld website
  • De afbeelding van de fotograaf is wat groot, zet deze even op Thumbnail

Groeperen en tabs aanmaken

  • Voeg een pagina toe aan het overzicht:

  • Pas de naam van deze pagina aan, dit is puur voor ons eigen:

  • We geven deze pagina een menu, dit keer een menu-tab:
  • Let wel dat je deze in het hoofdmenu plaatst

  • Deze pagina zal niet werken zonder een opgegeven pad:
  • Let hierbij op dat we een subpagina maken van ons overzicht!

  • We voegen een filter toe. Wanneer we dit niet doen, dan zal alles worden getoond terwijl wij in dit geval enkel Frederik Bogaert willen zien: (DEZE WEERGAVE)
  • Klik bij de filtercriteria op toevoegen en kies de volgende:

  • In het volgende veld kan je filter gaan instellen. Merk op dat we ook hier de relatie nodig hebben.

  • De bovenstaande stappen herhaal je opnieuw, dit keer voor fotograaf Jeffrey Van Daele

 

  • Uiteindelijk zal je het resultaat bekijken en je merkt bovenaan twee nieuwe tabjes die je naar de betreffende fotograaf brengen.
  • We voegen vervolgens een laatste tab toe: 'Alle'
    • Dit doe je op net dezelfde wijze als hierboven:
      • Nieuwe pagina toevoegen
      • De naam veranderen
      • Een pas opgeven: .../foto-overzicht/alle
      • Een menu-tab in het hoofdmenu
    • Een filter is dit keer niet nodig daar we alles willen zien

Views SlideShow verfijning

  • Maak een nieuw overzicht aan
    • Naam: Foto slideshow
    • Inhoud van het type foto
    • GEEN pagina aanmaken
    • Vink zetten bij blok aanmaken
    • Diavoorstelling van Velden
  • Voeg het veld Afbeelding toe
  • Sluit de titel uit van weergave
  • Open de instellingen van de Diavoorstelling
    • Scrol naar onder.
    • Zet een vink bij Paginering
    • Kies bij Pagineringsvelden voor inhoud: afbeelding

  • Resultaat:

  • Zorg ervoor dat het blok nu zichtbaar is in de 'tweede zijbalk'
  • Het mag enkel zichtbaar zijn op de pagina's waar de fotografen worden getoond

Afbeelding fotograaf linken naar externe site

Wanneer de gebruiker klikt op de foto van de fotograaf moet vervolgens de website van de fotograaf worden geopend.

  • Open opnieuw de instellingen van het de eerste view
  • Herschik de velden zodanig dat het veld 'Website' boven het veld 'Afbeelding Fotograaf' komt te staan
  • Klik op het veld Afbeelding Fotograaf (dit in de page)
  • Ga naar resultaten herschrijven
  • Zet een vink bij 'Dit veld als een link weergeven'

  • Om te weten wat je nu moet invullen bij linkpad kan je onderaan klikken bij de vervangingspatronen
  • Hier lees je een belangrijk zinnetje: "Merk op dat door de volgorde waarin velden worden verwerkt, u geen velden kunt gebruiken die ná dit veld komen." Vandaar dat we zonet het veld hebben verschoven

  • Tot slot kan je ook bepalen hoe die website dan moet worden geopend:

ViewField en contextuele filter

STEP 1

  • Start met het maken van een nieuw overzicht
    • Naam: Andere Werken
    • Inhoud van het type foto
    • Raster van Velden
  • Voeg het veld Afbeelding toe

  • De titel is overbodig --> uitsluiten van weergave

STEP 2

  • Voeg bij het inhoudstype een nieuw veld toe:

STEP 3

  • Open de view 'Andere werken'
  • Voeg een relatie toe:

  • Voeg nu het veld titel toe
  • En leg de relatie en sluit uit van weergave

  • Ga bij uitgebreid en voeg een contextuele filter toe

  • Leg in het volgende venster de relatie:

STEP 4

  • Open opnieuw het inhoudstype Foto
  • Bewerk het veld 'andere werken'
  • Bij de argumenten geef je nu met de hulp van de tokens volgende gegevens in:

  • De kans is groot dat je dit nu wel moet doen voor elke foto --> node bewerken, veld 'andere werken' correct invullen en opslaan.
  • Als resultaat zie je nu een nieuw veld bij de node die een view toont van de andere foto's, maar enkel die van de fotograaf waar je naar kijkt.

STEP 5

  • Probleem, wanneer je nu naar een foto van Jeffrey kijkt zie je onderaan bij andere werken de foto opnieuw.
  • Open opnieuw de view 'andere werken'
  • Voeg de contextuele filter inhoud:nid toe

  • Stel de standaardwaarde correct in:

  • Indien er wordt voldaan aan de voorwaarde dan moet deze worden uitgesloten van weergave:

  • Alles opslaan en het resultaat bekijken

Afwerking

  • Grafisch kan het uitzicht natuurlijk beter. Je zou dus thuis kunnen de CSS wat gaan aanpassen
  • Tot slot kan je in het menu wat meer linken leggen zodanig dat je eenvoudig al de oefeningen kunt oproepen