Les 2

Printvriendelijke versie

Drupal 8 Custom Theme

Een eerste thema dat ik ga bespreken is het Drupal 8 Custom Theme. Een leuk ding, misschien wel wat bombastisch.

  1. Download en installeer het thema Drupal 8 Custom Theme
  2. Vervang meteen de foto's van, de slideshow op de frontpage. Doe dit met FTP want er zit een bug in:

Zoals je ziet heb ik de originele foto's niet verwijderd maar aangepast zodat deze niet meer werken:

  1. Ook de gebruikte achtergrondfoto heb ik aangepast. Ook deze moet met FTP gebeuren. Bepaal zelf hoe de foto moet noemen en waar je deze plaatst. Download hier de foto
  2. Zorg er vervolgens voor dat:
    1. Er geen iconen naar sociale media worden getoond
    2. Er geen copyright tekst te zien is
    3. Er geen zoekveld te bespeuren valt
    4. De Page Title is ingeschakeld
    5. De breadcrumbs niet zichtbaar zijn
    6. De link naar het contactformulier verdwijnt
  3. Pas ook het logo aan, gebruik eventueel onderstaand, of voel je zo vrij om er zelf eentje te zoeken:

  1. Pas de tekst van de eerste slide aan en zorg ervoor dat je naar het overzicht van de tuinvogels wordt doorverwezen na een klik op Read more

Views, een herhaling

We werken verder met ons thema 'natuur'. Dit keer bespreken we twee beroemde natuurfotografen. Deze gieten we in een overzicht om dat onderdeel opnieuw te behandelen. Relaties, groeperen, herschrijven, linken…alles komt aan bod.

De inhoud

  1. Maak twee inhoudstypes aan. Gebruik hiervoor onderstaande afbeeldingen:

Inhoudstype I: Fotografen

Inhoudstype II: Foto

(Het laatste veld 'Fotograaf' is dus een referentie naar de nodes van het inhoudstype Fotografen)

  1. Download hier de nodige bestanden voor het toevoegen van de inhoud. In totaal maak je zes nodes:
    1. Twee fotografen
    2. Twee foto's van Ansel
    3. Twee foto's van Lanting
  2. Refereer bij de foto's uiteraard naar de correcte fotograaf

Het overzicht

  1. Maak een nieuw overzicht aan op basis van onderstaande info:

  1. Voeg de relatie toe. Deze is enkel mogelijk omdat we bij de nodes refereerden naar andere nodes. Dat is dan weer mogelijk door het gebruik van het nodige veld in het inhoudstype.

  1. Voeg de nodige velden toe, let hierbij goed op, bij sommige velden is de relatie nodig, bij anderen dan weer niet:

(alle afbeeldingsvelden geef je de stijl gemiddeld mee)

  1. We werken hier met een raster. Zet dat raster even in 2 kolommen in plaats van 4

  1. Verberg het veld Titel

Groeperen van velden

Zoals de situatie nu is, zien we twee keer de foto van de fotograaf. Enkele de foto's en één keer de fotograaf is meer dan genoeg. Dan kan je oplossen door juist te gaan groeperen.

  1. Kijk bij de instellingen van het raster.
  2. Kies als groepeerveld nr.1 voor de afbeelding van de fotograaf
  3. Kies als groepeerveld nr.2 voor de woonplaats

  1. Wanneer je hiervan het resultaat bekijkt dan heb je nu net het omgekeerde effect, te veel fotografen en woonplaatsen. Dit los je op door die twee velden te verbergen:

Resultaten herschrijven

  1. Bewerk het veld woonplaats
  2. Herschrijf de resultaten door de uitvoer van het veld aan te passen
  3. Neem onderstaande over, werk hiervoor met de vervangingspatronen

  1. Verborg tot slot het veld Fotograaf en het veld website. Op die laatste komen we straks terug.

Velden linken naar externe site

  1. Eerst en vooral wisselde ik de twee groepeervelden van plaats. Dat is net iets logischer
  2. Verder is het van belang dat het veld website boven het veld fotograaf staat
  3. Klik nu op het veld fotograaf en ga het resultaat herschrijven, kies dit keer om het veld als link weer te geven:

  1. Gebruik de vervangingspatronen voor het Linkpad in te vullen en bepaal hoe de website moet worden geopend:

Grafisch

Het oog wil ook wat. Om het geheel wat aantrekkelijker te maken voeren we onderstaande uit:

  1. Voeg een nieuwe fotograaf met zijn twee foto's toe KLIK HIER
  2. Zorg ervoor dat "fotograaf uit woonplaats" element H1 meekrijgt. Je kan met html werken bij het herschrijven van velden...
  3. Zorg voor even grote foto's:
    1. Afbeelding fotograaf --> 350 x 350
    2. Afbeelding foto's --> 260 x 210
  4. Aantal kolommen: 6 --> op die manier breng je de foto's dichter op elkaar
  5. Volgende CSS kan je vervolgens toepassen:
    1. Het eerste deel pas je toe op het gehele overzicht
    2. Het tweede deel gaat automatisch aangezien het een bestaande klasse is

.natuurfotograaf
{
  text-align:center;
  border:solid;
}
#page-title .block, #page-title h1
{
    margin: 0;
    text-transform: none;
    font-size:2em;
    color:#5e9ca0;
}

Uitsmijter: Views Photo Grid

Een leuke en doodeenvoudige manier om een hele reeks foto's weer te geven is de module Views Photo Grid. Maak er eentje met de tuinvogels.

  1. Je maakt een nieuwe view aan, deze mag vervolgens maar één afbeeldingsveld bevatten:

  1. Bij de instellingen kan je bepalen hoeveel ruimte er tussen de foto moet zitten:

  1. Test uit, deze view is volledig responsive