Les 1

Printvriendelijke versie

<Plugins Drupal Basis>

Inleiding

Welkom terug bij deze tweede module Drupal. Dit semester werken we verder met Drupal 8. Zo gaan we dieper in op Views, bekijken we de opties met responsieve images, webformulieren en zoveel meer. Uiteraard wordt er ook herhaald waar nodig. Dat is meteen de insteek van de eerste les. Jullie krijgen een nieuwe naakte Drupal 8 voorgeschoteld die moet worden geconfigureerd. Deze configuratie is eigenlijk basiskennis en wordt naarmate de tijd verstrijkt een vanzelfsprekendheid.

Veel succes in Drupal 2!

Hostings:

lynn.drupallearning.be
jeanpierre.drupallearning.be
iris.drupallearning.be
inge.drupallearning.be
alfons.drupallearning.be

mick.drupallessen.be
vera.drupallessen.be
roger.drupallessen.be
philip.drupallessen.be
ria.drupallessen.be
marc.drupallessen.be

Opgelet! Wijzig eerst het wachtwoord!

Voorbereiding

Onze naakte versie van Drupal moet klaargezet worden. Gebruik hiervoor onderstaande:

  1. Te installeren modules:
    1. Add another
    2. Admin Toolbar
    3. Asset Injector
    4. Crop API (nodig voor Focal Point)
    5. Ctools
    6. Field Formatter Class
    7. Focal Point
    8. Honeypot
    9. Libraries
    10. Pahtauto
    11. Switch Page Theme
    12. Token
  2. Default taal aanpassen naar Nederlands
  3. Zorgen dat enkel beheerders gebruikers kunnen aanmaken
  4. Beveilig de website met de Honeypot
  5. Maakt twee Pathauto-patronen aan
    1. Aricle/Basic Page: [node:title]
    2. Standaard: [node:content-type]/[node:title]
  6. Maak op de server een nieuwe map aan voor de toekomstige plugins (.../libraries)
  7. Pas de naam van de site aan naar Drupal Gevorderd - VOORNAAM
  8. Pas de slogan van de site aan naar 2018-2019_sem.2
  9. Zorg ervoor dat bij de inhoudstypes Artikel en Eenvoudige pagina geen Auteur en datum worden getoond na publicatie. Dat staat namelijk standaard aan.
  10. Schakel de optie tot reageren uit bij het inhoudstype Artikel. Ook dat zet Drupal standaard aan.
  11. Zorg dat je bij het toevoegen van inhoud automatisch op Full HTML komt te staan als het gaat over de body
  12. Plaats alle essentiële knoppen op de werkbalk van de CKEditor.
  13. Pas het e-mailadres aan van de admin naar jouw eigen adres.
  14. Gebruik de kennis uit Les 8 Drupal Basis om de foutmelding onder statusrapportage op te lossen:

Gebruik bij de rechten steeds 755 indien je moet aanpassen

CSV Import

Deze module stelt je in staat om een CSV bestand te gaan importeren in nodes. Zo kan je een lijst van producten met info "eenvoudig" in nodes gieten. Waar we in Drupal 7 ongekende mogelijkheden zien met Feeds moeten we het hier echter stellen met een beperkte tool. Met CSV import kan je bijvoorbeeld geen meervoudige velden gaan opvullen. Een ander groot gemis is de mogelijkheid tot aanpassen van bestaande nodes. Een prijsdaling van bepaalde producten resulteert in het aanmaken van een nieuwe node en niet de aanpassingen van de bestaande node. Kortom, er is nog werk aan. We testen de module uit en doen dat rond het theme "tuinvogels".

  1. Installeer en activeer de module CSV Importer
  2. Download DEZE EXCEL-LIJST met onze vogels.
  3. We overlopen de lijst en stellen op basis daarvan een inhoudstype samen "Tuinvogels"
  4. Belangrijk is om na het aanmaken van het inhoudstype ervoor te zorgen dat de kolomtitels in het excel-bestand dezelfde zijn als de systeem-naam in Drupal!
  5. --> Pas dat aan, om de systeem-naam te zien kijk je best even bij de velden van het inhoudstype
  6. Ga naar de weergave van het inhoudstype, zorg dat de volgorde van de velden overeenkomt met de volgorde van de velden in het Excel-bestand

De afbeelding heeft wat meer aandacht nodig. DOWNLOAD HIER DE FOTO'S en zorg dat ze uitgepakt op de computer staan.

  1. Het probleem met deze module is dat je niet met de link kan werken. Zo zou je de afbeelding op de server kunnen plaatsten en verwijzen met de URL. Helaas, weer een beperking. We moeten werken met de ID, maar om dat te kunnen doen moet je de afbeeldingen al hebben toegevoegd. We maken speciaal daarvoor een inhoudstype:
    1. Naam: Afbeelding upload
    2. Veld: afbeeldingen, onbeperkt
  2. Voeg nu alle afbeeldingen toe. Let goed op dat ALLE foto's toegevoegd zijn, ja zal waarschijnlijk in twee stappen moeten uploaden. Je hebt dan één node met daarin alle afbeeldingen van de vogels.
  3. Om nu ook de ID te weten te komen klik je op Inhoud
  4. Kies het tabblad Bestanden en je krijgt een overzicht van alle bestanden op de site, helaas geen ID
  5. Je kijkt hier naar een view, en inderdaad, je kan bovenaan via het potloodje de view aanpassen

  1. Zorg gewoon voor en zichtbaar ID:

  1. Wanneer je nu klikt op de kolomtitel "naam" dan krijg je de foto's alfabetisch waardoor ook de id's in een logische volgorde verschijnen
  2. We keren terug naar ons Excel-bestand en passen het nodige aan:

(Mijn nummering zal afwijken aan die van jou)

De databank is af, zorg dat deze opgeslagen is. Wat ons nu rest is het omvormen van deze databank naar een CSV bestand. Deze MOET gescheiden zijn door komma's. Iets wat Excel niet graag doet. Je zal een scheiding met punt komma' zien . Niet goed. Ik loste dat probleem op door het gratis pakket Open Office te downloaden. Indien het Excel verhaal ook op Windows niet lukt is dat het alternatief. Download hier Open Office

  1. Open het Excel-bestand met Open Office
  2. Sla het bestand op als CSV

foto

  1. Keer terug naar de site en ga op zoek naar de de CSV Importer

  1. Stel correct in:

  1. Watch the magic happen:

Image Effect

We werken de inhoud af door de foto's in een overzicht te gieten. Dat is geen nieuwe kennis voor jullie behalve dan het feit dat we kennismaken met een nieuwe afbeeldingsstijl. Iedereen heeft graag dat de foto's even groot zijn als ze in een overzicht gegoten worden. Daarom gaan we gaan schalen en bijsnijden. Helaas heeft dat tot gevolg dat delen van de foto verdwijnen in bepaalde gevallen. Een fotograaf heeft dat liever niet. De onderstaande afbeeldingsstijl gaat dat oplossen.

  1. Installeer de module Image Effect
  2. Maak nu een nieuwe afbeeldingsstijl volgens onderstaande eigenschappen:

  1. Maak een nieuw overzicht aan:
    1. Naam: Tuinvogels
    2. Inhoud van het type Tuinvogels
    3. Onopgemaakte lijst van velden
    4. Geen paginering
    5. Menulink
    6. Alle items weergeven
    7. Velden:
      1. Afbeelding: afbeeldingsstijl  Vogels 300 x 200 / Linken naar inhoud
      2. Titel: uitsluiten van weergave
    8. CSS:
      1. Float left
      2. Margin: 7px

Je ziet nu een overzicht waar alle afbeeldingen dezelfde afmetingen hebben, indien er moet worden afgeweken dan wordt de achtergrond opgevuld met een witte kleur. Ik hoop naar de toekomst toe dat deze kleur kan worden gekozen. Maar het is een begin.

Tussendoor: CSS Wobble Effect

@-webkit-keyframes hvr-wobble-bottom {
  16.65% {
    -webkit-transform: skew(-12deg);
    transform: skew(-12deg);
  }
  33.3% {
    -webkit-transform: skew(10deg);
    transform: skew(10deg);
  }
  49.95% {
    -webkit-transform: skew(-6deg);
    transform: skew(-6deg);
  }
  66.6% {
    -webkit-transform: skew(4deg);
    transform: skew(4deg);
  }
  83.25% {
    -webkit-transform: skew(-2deg);
    transform: skew(-2deg);
  }
  100% {
    -webkit-transform: skew(0);
    transform: skew(0);
  }
}
@keyframes hvr-wobble-bottom {
  16.65% {
    -webkit-transform: skew(-12deg);
    transform: skew(-12deg);
  }
  33.3% {
    -webkit-transform: skew(10deg);
    transform: skew(10deg);
  }
  49.95% {
    -webkit-transform: skew(-6deg);
    transform: skew(-6deg);
  }
  66.6% {
    -webkit-transform: skew(4deg);
    transform: skew(4deg);
  }
  83.25% {
    -webkit-transform: skew(-2deg);
    transform: skew(-2deg);
  }
  100% {
    -webkit-transform: skew(0);
    transform: skew(0);
  }
}
.hvr-wobble-bottom {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  -webkit-transform-origin: 100% 0;
  transform-origin: 100% 0;
}
.hvr-wobble-bottom:hover, .hvr-wobble-bottom:focus, .hvr-wobble-bottom:active {
  -webkit-animation-name: hvr-wobble-bottom;
  animation-name: hvr-wobble-bottom;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

Eigen Video uploaden

In Drupal Basis hebben we reeds gezien dat het niet moeilijk is om filmpjes van het populaire Youtube te laten verschijnen op jouw site. In dit deel gaan we een stap verder en leren we eigen videos te publiceren.

  1. Plaats deze plugin op jouw site

Nodig om FakeObjects te doen werken

  1. Installeer de module CKEditor Video

 Zorgt voor de aanwezigheid van een knopje in de CKEditor

  1. Installeer de module CKEditor FakeObjects

 Nodig om CKEditor wijs te maken dat de video die je toevoegt eigenlijk een afbeelding is...

  1. Plaats de nieuw verkregen knop op de werkbalk van de CKEditor

foto

  1. Maak bij het inhoudstype Tuinvogels een nieuwe veld aan:

foto

  1. Download HIER een filmpje over de spreeuw
  2. Plaats het filmpje van de spreeuw op de server, kies hiervoor een logische plaats
  3. Bewerk de node van de spreeuw
  4. Bij het nieuwe veld kan je nu klikken op het video icoontje
  5. Bij de URL plak je de link van het filmpje --> de plaats waarop het terug te vinden is op de server

foto

  1. Pas het formaat van het filmpje aan in de broncode, pas de hoogte en breedte aan zoals je dat zelf wenst
  2. Alles opslaan en uittesten!