Les 3

pdf-versie

Bespreking oefeningen les 2

Algemene tip:

Wanneer je iets wil realiseren op een website is de gouden regel: eerst technisch dan opmaak. Ik vergelijk het graag met een tekst in Word. Daar is het ook zo dat je eerst de tekst schrijft, en dan pas begint aan de opmaak. Zorg er in Drupal voor dat je eerst de inhoud juist hebt ingevoerd en laat weergeven, daarna pas je CSS toe, schikking, blokken...Voor eender welke inhoud werk je zoveel mogelijk in verschillende velden. Meer velden gebruiken wil zeggen meer mogelijkheden.

Composer tip:

  1. Wanneer je de site met composer gaat updaten onderneem je best volgende stappen:
    1. Backup maken
    2. Via Terminal updaten (composer update)
  2. Die laatste stap geeft meestal een goed resultaat, echter krijg je vaak de foutmelding:

foutmelding composer

  1. Dat komt omdat de rechten van de map /default niet goed staan. Met onderstaand commando kan je dat oplossen (chmod staat voor Change Mode). Dat commando voer je uit voor je gaat updaten. Vergeten? Alsnog het commando geven en nog eens composer update

chmod 755 sites/default

 Bespreking Oefening 1

oefening 1

  1. Deze oefening verwijst u door naar een bestaande tutuorial voor het maken van een Filp-effect.
  2. Zoals elke tutorial die je online kan vinden moet je deze 'enten' op jouw context. Je zal er moeten op letten welke zaken je moet aanpassen.
  3. De JS-script die je hier krijgt, hoef je niet aan te passen. Ook het blok om de scripts te toen draaien hoeven niet aangepast te worden.
  4. Wat je wel moet aanpassen is de concrete verwerking, zoals bij het herschrijven van de velden. Ook de CSS is eventueel aanpasbaar om het geheel te laten 'kloppen' met uw onderwerp.
  5. Ik los deze oefening klassikaal op, ik gebruik daar voor de uitgeschreven tutorial: Flip-effect

 Bespreking Oefening 2

oefening 2

  1. Zoals eerder gesteld zorgen we eerst voor het toevoegen van de inhoud, pas daarna houden we ons bezig met het uiterlijk.
  2. Om de inhoud van deze oefening toe te voegen kijken we naar de gekregen gegevens. Ik zou hier gaan voor de volgende velden:
    1. Titel: naam van de schilder
    2. Afbeelding schilder: foto van de schilder
    3. Body: uitleg over de schilder
    4. Afbeelding schilderij: foto van het schilderij
    5. Tekst (lang opgemaakt): uitleg van het schilderij (in deze oefening wordt deze inhoud eigenlijk niet gebruikt, om tijd te winnen hoeft deze dus niet te worden toegevoegd)
  3. Zorg ervoor dat je via Pathauto een correct pad instelt, dit is straks belangrijk als we blokken en/of CSS willen laten draaien op de pagina's waar een schilder besproken wordt.
  4. Voeg nu al de schilders toe in het nieuwe inhoudstype, gebruik de module Add Another om dit vlot te laten verlopen, vergeet niet om voor elke schilder een menu-link te voorzien.
  5. We passen eerst het menu aan:
  6. Maak een nieuwe link aan in het hoofdmenu, achter deze link steken we 'niets'. Om dat te doen schrijf je in het veld link: <nolink>
  7. Sleep nu op de gekende manier de schilders onder het nieuwe menu-item. Zorg er uiteraard voor dat 'Schilders' op uitgeklapt weergeven staat.

schilder menu  -->  schilder menu

  1. Wanneer je nu kijkt naar de node van een schilder, dan staat alles onder elkaar. Je zou nu met modules of CSS deze inhoud wat aangenamer kunnen weergeven. Wat ook kan is werken met een blok. Handig hieraan is dat er geen CSS nodig is om dit op de juiste plaats te krijgen, bovendien hoef je, je ook niets aan te trekken van responsiviteit.
  2. Om dergelijk blok te maken, moeten we een overzicht maken:
    1. Inhoud van het type schilders
    2. Blok aanmaken
    3. Onopgemaakte lijst van velden
    4. Geen paginering
  3. Voeg enkel het veld afbeelding schilder toe en schakel het veld titel uit.
  4. Wanneer je het blok nu zou gaan plaatsen, dan zien we uiteraard alle schilder. We willen alleen de schilder zien waar we op dat moment naar kijken. Daarvoor maken we gebruik van de contextuele filer ID. Vervolgens stellen we in dat deze gaat kijken naar de URL, komt dat overeen met de foto in kwestie dan wordt die getoond, anders niet.

id  -->  id

  1. De laatste stap is het blok een plaats gaan geven. Doe dit via Structuur - Blokindeling
  2. Ga op zoek naar het blokgebied waar je deze wilt plaatsen (in dit geval: Eerste zijbalk) en kies Blok plaatsen
  3. Zoek in de verschenen lijst naar het net aangemaakte blok via overzichten en kies plaatsen
  4. Stel nu nog even in dat er geen titel wordt weergegeven en dat dit blok enkel zichtbaar is op de pagina's van de schilders

block

 Bespreking Oefening 3

oefening 3

Elke keer als je een nieuwe installatie van Drupal gaat doen, dan krijg je de foutmelding betreffende de Trusted Host Settings. Deze ga je best oplossen. Dat wordt gedaan in settings.php.

trusted

  1. Je kan dit bestand via composer aanpassen, echter vind ik dit overzichtelijker via het bestandsbeheer in Cpanel.
  2. Open via het Cpanel het bestandsbeheer en navigeer naar de map /default
  3. Opgelet hier staan de rechten nog niet goed om straks aanpassingen te doen. Pas dus deze rechten aan naar 755
  4. Open /default
  5. Pas de rechten aan van settings.php naar 755
  6. Kies in de toolbak boveaan voor edit/bewerken
  7. ! Groen: niet actief // Kleurtjes: actief !
  8. Ga op zoek naar de regel over de trusted host settings:

trusted

  1. Vervolgens pas je dit stukje aan. Kijk uiteraard naar jouw domein-naam. Let hier goed op, elk teken en haakje is belangrijk.

trusted

  1. Sla de settings op, maar sluit de pagina niet.
  2. Controleer de website. Is de fout weg, dan kan je het bestandsbeheer sluiten.
  3. Krijg je een whitescreen, dan keer je terug naar settings.php en zoek je naar de fout.

trusted

 Bespreking Oefening 4

oefening 4

  1. Flexslider is een module die niet werk zonder zijn Plugin. Deze moeten we correct en in de juiste map een plaats geven. Standaard is die 'plaats' niet aanwezig in Drupal. We moeten een map maken:

libraries

  1. De volgende stap is LEZEN. Bekijk de informatie die wordt verteld op de downloadpagina van de module: https://www.drupal.org/project/flexslider

flexslider

  1. Ik heb deze module draaiende gekregen zonder de module Libraries API
  2. De eerste stap is het downloaden van de library, deze staat op github:

library

  1. Eens gedownload kijk je opnieuw naar de uitleg over de installatie. Daar les je duidelijk dat je een map moet maken flexslider met daarin drie bestanden. Dit gegeven zet je eerst klaar op uw computer:

flexslider

  1. De laatste stap is het uploaden van deze map naar de map /libraries van uw site. Dit kan bijvoorbeeld via FileZilla, maar ook gewoon via bestandsbeheer. Bij dat laatste heb je het probleem dat je geen map met inhoud kan uploaden. Werk je via Cpanel dan maak je op de juiste plaats een nieuwe map /flexslider om vervolgens de drie bestanden handmatig up te loaden

ftp

  1. De module is nu klaar voor gebruikt. Flexslider is een fijne module om afbeeldingen in een slideshow weer te geven. De concrete instellingen van deze module kan je instellen via Instellingen - Media. Bepaal hier de snelheden en de eventuele paginering.
  2. Maak een nieuw overzicht aan in blok-vorm, kies voor flexslider.

overzicht flex

  1. Stel dit overzicht nu in, enkele de afbeelding van de schilderijen worden getoond.
  2. Geef het blok een plaats in het blokgebied 'geaccentueerd', eventueel enkel op de pagina's waar schilders worden getoond.
  3. Via de instellingen van uw thema kan je het blokgebied 'geaccentueerd' (=highlighted) instellen qua breedte:
  4. Ga daarvoor naar de categorie Layouts binnen de instellingen van uw thema.
  5. Pas vervolgens de breedte aan:

breedte

 Bespreking Oefening 5

oefening 5

  1. Deze is eenvoudig. Ook hier is de algemene tip: lees de uitleg op de downloadpagina van de module.
  2. Installeer de module via composer
  3. De menu is een blok, geef dit eerst een plaats via de blokindeling. Ik heb deze in Main content geplaatst
  4. Via de instellingen van dit blok bouw je de menu op. Je gaat een icoon kiezen en je vult de link in, een beschrijving geef je best ook op. Belangrijk: de link moet de volledige link zijn, beginnend met https://
  5. Tot slot kan je dit blok eventueel ook beperken tot een bepaald aantal pagina's, maar dat hoeft hier niet per se.

floating menu

 Bespreking Oefening 6

oefening 6

  1. Maak eerst een inhoudstype aan voor deze inhoud:
  2. Straks ga je de formulierweergave van dit inhoudstype openzetten voor de anonieme gebruiker. Dit moet dus correct ingesteld zijn. Zet bij het begin al zoveel mogelijk uit:

fotowedstrijd

  1. Titel: pas het label aan naar Titel van de foto
  2. Image: ook hier pas je het label aan naar iets gebruiksvriendelijk, bij de instelling stel je hier een standaardafbeelding in.
  3. Tekst (plat): gebruik dit voor de naam van de inzender + maak dit een verplicht veld
  4. Bekijk de formulierweergave van dit inhoudstype en schakel ook hier al het overbodige uit:

formulier

  1. Voeg nu inhoud toe van dit inhoudstype, voeg niet echt iets toe, kopieer de url
  2. Maak van deze URL een nieuwe link in het hoofdmenu:

wedstrijd menu

  1. Nu zetten we de toegangsrechten goed om mensen toegang te geven. Terug te vinden onder People - Toegangsrechten
  2. Gebruik Ctrl + F om te gaan zoeken op die pagina naar Fotowedstrijd: Nieuwe inhoud aanmaken en vink de anonieme gebruiker aan:

anoniem

  1. Bekijk jouw site nu uitgelogd en controleer of je inhoud kan toevoegen
  2. Merk op dat er rechts nog iets vervelend wordt weergegeven. We lossen dat op met wat CSS:

css form

  1. Voeg nu eerst een drietal keer inhoud toe. Maak er ook eentje waar je de afbeelding 'vergeet'.
  2. Maak nu een overzicht aan die de resultaten weergeeft. Dit keer maak je een pagina aan. Kies inhoud van het type Fotowedstrijd. Maak een menu-link aan. Geef de drie velden weer. Zorg dat alles naast elkaar staat met wat CSS. Tot slot test je het formulier uit.

css results game

 Bespreking Oefening 7

oefening 7

  1. Maak in het correcte inhoudstype eerst een nieuw afbeeldingsveld aan.
  2. Voeg nu twee keer het nodige logo toe.
  3. Bewerk het overzicht en voeg het logo toe (verborgen)
  4. Herschrijf het veld:

logo

 Bespreking Oefening 8

oefening 8

Voor de duidelijkheid: je kan deze oefening ook maken door een overzicht te creëren. Hier gebruik ik bewust het standaard-systeem van Drupal om u ook daar vertrouwd mee te maken.

  1. Wanneer je niets onderneemt, dus geen voorpagina instelt, dan zie je bij de standaardvoorpagina de URL /node staan. Dat wil zeggen dat er automatisch van iedere node een teaser wordt getoond op de voorpagina.
  2. Bij het maken van een inhoudstype of bij het toevoegen van een node kan je bepalen of deze al dan niet op de voorpagina moet verschijnen:
inhdoudstype
Binnen het indhoudstype

OF

binnen een node
In de node zelf
  1. Concreet zorg je er nu voor dat alleen de schilders op de voorpagina mogen gepromoot worden. Hier zal je dus alle andere nodes en/of inhoudstypes moeten aanpassen.
  2. Controleer na deze actie of het verhaal klopt. Pas, moest dat nog niet gebeurd zijn, uiteraard de standaardvoorpagina aan.

voorpagina

  1. Via de weergave van het inhoudstype schilders kan je nu bepalen wat er moet worden weergegeven in die teaser:

weergave teaser

  1. Met een beetje CSS zorg je voor een fijn resultaat. De achtergrond aanpassen lukt eigenlijk niet binnen deze manier van werken. Daarvoor moet je werken met een overzicht.

.rechts img
{
  float:left;
  margin-right:15px;
}

.tekst
{
  font-size: 1.9em;
    line-height: 27pt;
    color: #1a231a;
  
}

 Bespreking Oefening 9

oefening 9

  1. Deze oefening is eigenlijk net dezelfde oefening als nummer 2. Maar dan omgekeerd...
  2. Maak een overzicht aan in blokvorm (of pas het bestaande overzicht aan door een blok toe te voegen)
  3. Zorg dat enkel de titels worden weergegeven, via de stijlinstellingen kan je hier een andere HTML-tag aan geven:

html

  1. Voeg nu op de gekende manier de contextuele filter toe. Het enige verschil is dat je hetgeen gevonden wordt nu wilt verbergen ipv weer te geven. Daarvoor moet je helemaal onderaan een klein, onschuldig vinkje aanzetten:

Uitsluiten

  1. Bij de instellingen van de onopgemaakte lijst voeg ik nog de bestaande klasse vies-align-center toe om het geheel te centreren:

center

  1. Geef het blok nu een plaats. Deze mag in de Tweede zijbalk staan en enkel worden weergegeven op een pagina waar schilders worden getoond.
  2. Controleer het resultaat. Kijk je naar Monet, dan mag Monet niet in het menu te zien zijn.

 Bespreking Oefening 10

oefening 10

Voor deze toepassing bestaat er ook een module. Echter ben ik fan om dit zelf te doen. Je hebt dan meer controle.

  1. Als voorbereiding installeer je eerst de module IMCE. Doet dat moet composer en schakel de module in.
  2. Ga dan naar Instellingen - Inhoud samenstellen - Tekstopmaak en editors
  3. Bewerk Full HTML
  4. Plaats het nieuwe knopje (door IMCE) op de werkbalk

imce knop

  1. We maken eerst de pdf aan. Dat is geen Drupal, maar gewone computerkennis.
  2. Gebruik de gedownloade bestanden om een Word-versie te maken van één van de schilders. Zorg voor de titel, de uitleg over de schilder, zijn foto en het schilderij.
  3. Sla deze Word nu op als pdf, geen het een logische naam.
  4. Maak een nieuw veld aan bij de schilders. Ik gebruik tekst (opgmaakt lang)
  5. Bewerk de node van de schilder waarvan je een pdf hebt gemaakt
  6. Voeg de tekst 'Download de pdf-versie' toe in het nieuwe veld
  7. Selecteer de tekst
  8. Klik op het IMCE-knopje
  9. In een nieuw venster krijg je toegang tot de bestanden
  10. Als je met meerdere files zou gaan werken is het niet slecht om eerst een map te maken. Zo wordt het voor uzelf iets overzichtelijk.
  11. Dat kan met de knop Nieuwe map

map

  1. Open de nieuwe map
  2. Kies nu voor uploaden in de balk bovenaan
  3. Navigeer naar de gemaakte pdf
  4. De pdf verschijnt in de gemaakte map
  5. Dubbelklik op dat bestand
  6. --> de pdf zit nu achter de tekst 'download de pdf-versie'
  7. Om het geheel nu nog iets aantrekkelijker te maken kunnen we met de website enjoycss een knop ontwerpen. Ik doe dat even klassikaal.
  8. Wanneer de code is gekopieerd en geplakt in een nieuwe regel, pas ik de naam van de klasse eerst nog even aan:

knop

  1. Ga naar de weergave-instellingen van het inhoudstype en pas de instellingen van het veld met de download-optie aan. Bij Field Formatter schrijf je de naam van de klasse (ZONDER PUNT)

formatter class