Les 16

Inleiding

Vandaag bespreken we 8 kleine maar leuke en nuttige modules. We wijken af van onze huidige thema’s en maken één pagina met daarin alles verwerkt. Er is deze les ook ruimte voor vragen en herhaling waar nodig.

Voorbereiding

Installeer en activeer de volgende modules:

Plaats de volgende plugin op de juiste plaats op de server:

Lightgallery plugin

Inhoudstype

  1. Maak een nieuw inhoudstype: Reisbestemmingen
  2. Vergeet niet auteur en datum af te vinken
  3. Voorlopig hoeven hier geen speciale velden worden toegevoegd

Inhoud toevoegen

  1. Voeg nieuwe inhoud toe van het type Reisbestemmingen
  2. Title: Malta
  3. Tekst in de body: Kopieer en plak de tekst in DIT WORD-document

Weeronline Formatter

  1. Ga naar het veldenbeheer van het inhoudstype Reisbestemmingen
  2. maak een nieuw veld aan met Veldtype: Getal (integer)

  1. De volgende instellingsventers (2) mogen ongewijzigd blijven
  2. Ga nu naar de weergave van het inhoudstype en pas het veld Weer aan naar WeerOnline Formatter. Zet het label ook meteen -Verborgen-

  1. Pas tot slot de volgorde aan. Het veld weer mag boven de body verschijnen.
  2. Open een nieuw tabblad. Surf naar www.weeronline.nl
  3. Zoek Valletta (hoofdstad Malta) even op. Bekijk  nu de URL. De geselecteerde cijfers in onderstaand voorbeeld kopieer je even

  1. Keer terug naar jouw site
  2. Bewerk de node Malta
  3. Plak de cijfers in het veld Weer
  4. Sla op en bekijk het resultaat

Live Weather

  1. Ga eerst een WOEID (where on earth identifier) gaan halen:

http://woeid.rosselliot.co.nz/

  1. Open de instellingen van de module

  1. Plak de WOEID bij Location en sla op
  2. Kijk nog even bij de Setting of alles ok is...
  3. Live Weather verschijnt in een blok. Aan jullie om ervoor te zorgen dat deze verschijnt rechts van de tekst
    1. Klopt de URL van de node?
    2. Je zal dit moeten regelen bij de bloklayout
    3. Blok komt in de Second Sidebar
    4. Merk op dat je meerdere locaties zou kunnen kiezen

D8 Editor File upload

  1. Download even het volgende pdf-document naar jouw computer. Zorg dat het op het bureaublad staat. Verkeersreglent Malta.pdf
  2. Bewerk de node /reisbestemmingen/malta
  3. Voeg onderaan de body het volgende toe:

  1. U weet dat je nu in principe naar de server moet gaan en het gevraagde document moet aan uploaden, vervolgens kan je de link gaan samenstellen. Dat is eigenlijk niet nodig...
  2. Open de instellingen van Full HTML
  3. Door de eerste geïnstalleerde module kan je nu een knopje toevoegen aan de werkbalk. Regel dat even.
  4. Keer terug naar de node /reisbestemmingen/malta en ga bewerken
  5. Werk eventueel FullScreen
  6. Klik eerst even op de plaats waar je het document wil zien verschijnen.
  7. Klik op het nieuwe knopje
  8. Ga Bladeren naar de pdf
  9. Foutmelding? Geen pdf? Los dat even op bij de Instellingen.
  10. Zorg er uiteindelijk voor dat niet de naam van het document als link verschijnt, maar de tekst zelf de link is:

Title Field for manage Display

De titel van een node wordt in een blok weergegeven. Dat zorgt ervoor dat het niet mogelijk is deze tussen de andere velden te plaatsen. Uiteraard kan je het blok zelf gaan verplaatsen maar dat is zeker niet hetzelfde.

  1. Schakel het blok Page Title uit voor alle nodes van het type /reisbestemmingen
  2. Open de weergave van het inhoudstype Reisbestemmingen
  3. Je kan het titelveld nu verschuiven naar boven, zorg dat deze onder het veld Weer komt te staan, maar boven de Body
  4. Het Label is -Verborgen-
  5. Het formaat is Titel
  6. Zorg dat de titel als H1 wordt weergegeven

PrintFriendly & PDF

Wens je graag dat de bezoeker een bepaalde pagina kan afdrukken, doormailen of downloaden als pdf? Dan is deze module ideaal.

  1. Ga naar de instellingen van Printfriendly.
  2. Kies de inhoudstypes waar de knop moet verschijnen, kies voor de full page en kies een leuke knop

  1. Sla alles op en bekijk het resultaat
  2. Merk op dat de bezoeker delen van de tekst kan verwijderen, ja kan dat afzetten bij de instellingen uiteraard

Font Awsome Icons

  1. Open de instellingen van Full HTML bij Tekstopmaak en Editors
  2. Je merkt een klein vlagje op. Geef dat en plaats op de werkbalk

  1. Bewerk de node /reisbestemmingen/malta
  2. Plaats de cursor onder het verkeersreglement en klik op het vlagje
  3. In het zoekvak tik je 'tra'
  4. Klik vervolgens op het verkeerslicht
  5. Klik hier voor een overzicht van alle iconen
  6. Kijk even naar de broncode, je merkt dat het verkeerslicht een klasse krijgt.

  1. Manipuleer deze klasse met zodanig dat het verkeerslicht veel groter is en een andere kleur krijgt. Met CSS uiteraard

Imagefield default alt and title

  1. Deze module is eenvoudig maar zeer nuttig. Het gaat automatisch de alt en title-velden van afbeeldingen invullen op basis van de node title
  2. Open de instellingen van de module en bepaal voor welke inhoudstypes dit gaat gelden

  1. Voeg deze afbeeldingen toe aan de node Malta. Hiervoor moet je uiteraard een nieuw veld aanmaken. Laat het alt- en titelveld aanstaan maar niet verplicht.
  2. Wanneer je nu de afbeeldingen gaat toevoegen krijgen deze automatisch als titel en alt de tekst van de node titel

Afwerking

Zorg voor een mooie weergave van de foto's. Ik koos voor een view in een block van het formaat Masonry. Als er op een foto geklikt wordt start er een colorbox