Drupal Basis sem. 1 Lander Carrijn

Transcriptie

1 Drupal Basis sem. 1 Lander Carrijn

2 Inhoudsopgave LES KENNISMAKING... 5 WAT IS DRUPAL?... 5 JOUW HOSTING... 5 ANDERE BELANGRIJKE SITES... 6 THEMA... 6 MODULES INSTALLEREN... 8 LOGO EN FAVICON NAAM EN SLOGAN BLOKKEN INHOUD TOEVOEGEN LES INHOUD TOEVOEGEN EN WEERGEVEN Inleiding Standaard inhoudstypes Eigen inhoudstypes Inhoud toevoegen Oefening PATHAUTO LES UPDATES VAN MODULES EN THEMA'S OPDRACHTEN MENU INSTELLEN DROPDOWN MENU HOMEPAGE INSTELLEN HERHALINGSOEFENING NIEUW VELD: LIJST PATHAUTO BULK GENERATE WEERGAVE BEHEREN COLORBOX LES VOORBEREIDEND WERK AFBEELDINGSSTIJLEN: INTRODUCTIE FOCAL POINT FLEXSLIDER ALTERNATIEF VOOR COLORBOX CSS INTRODUCTIE Kleur menubalk Afbeeldingen naast elkaar TAXONOMIE SIMPLE GOOGLE MAPS OPDRACHTEN Het maximale aantal menu-niveaus aanpassen Zelf een menulink maken LES DRUPAL INSTALLEREN EERSTE STAPPEN OP DE SITE CKEDITOR AANPASSINGEN Drupal Basis Lander Carrijn 2

3 CKEditor Smiley CKEditor Color Button CKEditor List Style Simple Image Popup OEFENING Magnific Popup LES VIEWS (DEEL 1) Inleiding Overzicht maken Raster Oefening LES INSTAP CSS EN VIEWS: SCHILDERIJEN CSS EN VIEWS: SCHILDERS Vooraf Afbeeldingsstijl Detail CSS Filtercriteria toevoegen UITSMIJTER LES TRUSTED HOST SETTINGS VIEWS (DEEL 3) Entity reference OEFENING LES INLEIDING NIEUW THEMA AFBEELDINGSGALLERIJEN Voorbereiding Plugins Fotorama JuiceBox YOUTUBE FIELD OPDRACHT LES AFWERKEN LES Nieuwe bloksoort Nieuw blok aanmaken CSS Footer Opdrachtje tussendoor VIEWS SLIDESHOW CAPTCHA HERHALINGSOEFENING LES HERHALINGSOEFENING (DEEL 2) SUPERFISH Drupal Basis Lander Carrijn 3

4 HERHALINGSOEFENING (DEEL 3) NAVIGATIE MENU HERHALING TAXONOMIE CONTEXTUELE FILTER LES IMAGE FIELD ZOOM OEFENING SHUFFLE GRID WATERFALL EN EVA LES VOORBEREIDING ACHTERGROND AFBEELDING MET BACKGROUND IMAGE FORMATTER Als veld Als blok Oplossing banner MASONRY Overzicht OPDRACHT OEFENING LES EENVOUDIG CONTACTFORMULIER BEVEILIGEN MET HONEYPOT ADD ANOTHER IMAGEPIN IMAGEKICK HERHALINGSOEFENINGEN Oefening Oefening Oefening Oefening Drupal Basis Lander Carrijn 4

5 Les 1 Kennismaking Welkom bij de module Drupal 1 bij het PCVO Scheldeland. In deze 17-delige cursus leren jullie een eenvoudige website maken met Drupal. We werken in de laatste versie: Drupal 8 Deze website zal worden gebruikt als begeleiding bij de lessen. Straks krijgen jullie van de leerkracht een domein om op te oefenen. Enkele afspraken: De les start om 18.30u en eindigt om 21.30u Wij pauzeren om 20.00u Geen eten en/of drinken in de klas Zet je gsm op stil Wat is Drupal? Drupal is een CMS ontwikkeld door Gentenaar Dries Buytaert. Het is een volledig gratis en Open Source programma. Binnen de familie van de CMS'en is Drupal veruit de veiligste en biedt het de meeste opties. Door deze schijnbaar oneindige lijst aan mogelijkheden wordt het natuurlijk complex. Daarom werken we deze lessen uit in kleine stappen. Tot voor kort had je Drupal 7, ondertussen is Drupal 8 in het leven geroepen. Deze laatste versie is een groot verschil met zijn voorganger. Door zijn jeugdigheid werkt ook nog niet alles perfect. Zeker voor een complexere site kies je nog steeds beter voor Drupal 7. Maar omdat we mee moeten met de tijd zal deze eerste module in Drupal 8 worden gegeven. Naar Drupal 2 toe (het vervolg op deze cursus) zullen we ook Drupal 7 nog bespreken. Eens Drupal is geïnstalleerd heb je de basis: De kern of core met een aantal basismodules Het standaardthema Bartik Je kan het waarschijnlijk al raden: wil je meer dan moet je extra's installeren. Deze extra's heten modules, wil je een ander uiterlijk dan installeer je andere thema's. De site met alle info over Drupal: Jouw hosting Omdat ik jullie de technische kant van het klaarzetten van een Drupal 8 site voorlopig wil besparen krijgen jullie van mij een 'naakte' Drupal 8 site. Ik overloop dit klassikaal: Drupal Basis Lander Carrijn 5

6 cursist1.drupallessen.be cursist2.drupallessen.be cursist3.drupallessen.be cursist4.drupallessen.be cursist5.drupallessen.be cursist6.drupallessen.be cursist7.drupallessen.be cursist8.drupallessen.be Andere belangrijke sites Hierop kan je de uitgeschreven lessen raadplegen Deze website gebruik ik om de oefeningen te demonstreren in de klas Dé website van Drupal, hierop vind je thema's, modules en bergen informatie De website van collega Dirk Bernaert. Neem hier gerust een kijkje! Thema Een goede website begint met de keuze van een thema. Dit is jammer genoeg geen eenvoudige keuze door het immense aanbod. Op drupal.org vind je alle thema's die op die moment voor Drupal 8 beschikbaar zijn. Lager in dit deel vind je de linken naar drie thema's die we even gaan uittesten. De werkwijze: Surf naar de download-site van het thema. In deze les proberen we de drie onderstaande thema's uit: Drupal 8 Zymphonies Theme Zircon Mayo Scroll helemaal naar onder om de download links te zien BELANGRIJK. Gebruik op een Drupal 8 site geen versies voor een Drupal 7 site en omgekeerd. Goed kijken is dus de boodschap. Klik rechts op de zip-versie van het juiste thema en kies 'koppelingslocatie kopiëren'. Dit laatste kan verschillen van browser tot browser. Drupal Basis Lander Carrijn 6

7 Ga naar jouw website Kies bovenaan voor Uiterlijk Hier kan je alles raadplegen wat de thema's betreft. Je merkt hier op dat het standaardthema Bartik als naam krijgt. Straks moeten we hier opnieuw zijn om de instellingen van het thema te raadplegen. Klik op + Een nieuw thema installeren In het verschenen venster kan je nu de eerder gekopieerde koppeling plakken Drupal Basis Lander Carrijn 7

8 Kies uiteindelijk voor Installeren: na een aantal seconden is het gebeurd Klik nu op 'Installeer nieuw toegevoegde thema's' om verder te werken Onderaan staat jouw nieuwe thema klaar maar deze is nog niet actief op de site klik op 'Installeren en als standaard instellen' om te switchen van thema Klik linksboven om terug te keren naar de site en het resultaat te bekijken. Dit zal eerder tegenvallen :) Modules installeren Het beheersmenu aanpassen Je merkt na het werk rond ons thema dat het beheersmenu eigenlijk niet zo handig in gebruik is. We gaan dit oplossen door het installeren van een module. Drupal zit namelijk zo in elkaar dat je een basis krijgt die uitbreidbaar is met modules. Je zal er in de toekomst tientallen moeten installeren. Je zal zien dat dit gelijkaardig verloopt als het installeren van een thema: Drupal Basis Lander Carrijn 8

9 Wanneer je een module zoekt volstaat het om in een nieuw tabblad te zoeken met als trefwoord "< naam van de module > drupal" In dit geval zoeken we dus concreet naar: "admin toolbar drupal" (Opmerking: in de toekomst voorzie ik rechtstreekse links in de lessenreeks) Op deze website scroll je nu helemaal naar onder. Merk op dat al de rest op dergelijke pagina's ook interessante lectuur is. Sommige modules zijn wat moeilijker om te installeren, de uitleg is dan meestal te vinden op de downloadpagina. Klik nu rechts op het zip-bestand van de juiste versie; net als bij een thema kopieer je ook hier de koppelingslocatie. Keer na deze actie terug naar jouw website. Kies in het beheersmenu voor 'uitbreidingen' Vervolgens kies je voor "+ nieuwe module installeren" Net als bij een thema plak je nu de eerder gekopieerde koppelingslocatie in het eerste tekstveld Klik tot slot op 'installeren" Op dit moment is de module toegevoegd aan Drupal. Deze staat echter nog niet aan! Dit mag je dus niet vergeten: Klik in het volgende venster op 'Nieuw toegevoegde modules inschakelen' Drupal Basis Lander Carrijn 9

10 Automatisch zal je worden doorverwezen naar de lijst met modules. Deze is in andere situaties te benaderen door een klik op 'Uitbreidingen' in het beheersmenu Typ nu in de module filter 'adm', de lijst wordt vervolgens gesorteerd. Merk op dat je de twee submodules moet aanvinken. Klik vervolgens op 'Installeren' Het resultaat: wanneer je nu over de verschillende hoofddingen van het beheersmenu hoovert, klapt er automatisch een submenu uit. Dit zal ons werk in de toekomst aanzienlijk vereenvoudigen. Drupal Basis Lander Carrijn 10

11 Logo en Favicon Een andere eenvoudige instelling is het aanpassen van het logo van de site en bijgevolg ook het favicon. Een favicon is het kleine symbooltje dat je ziet staan op het tabblad van de browser. Elke professionele designer zal eraan denken dit aan te passen. Vooraleer je dergelijke afbeelding gaat instellen als logo moet je eraan denken dat deze niet te groot mag zijn. Voor het gemak van werken stel ik voor dat je voor deze oefening onderstaand logo gebruikt. Sla dit even op, op het bureaublad: Ga nu naar 'Uiterlijk' - 'Instellingen' - 'jouw thema' Klik bij 'logo' de vink van het standaardlogo weg, je krijgt nu de optie om te gaan bladeren naar een eigen logo. Even lager zie je ook het favicon staan, de volgende handeling kan je dus op beide zaken toepassen. Drupal Basis Lander Carrijn 11

12 Een zeer belangrijke les in het volledige Drupal-verhaal is de volgende: Na bijna elke wijziging of handeling zal je moet opslaan, vergeet je dit, dan is al je werk voor niets geweest! Bekijk nu het resultaat door terug te keren naar jouw website. Naam en slogan We kijken even naar de instellingen van de website. Dit kan je terugvinden onder instellingen - systeem - Basic site-instellingen Vul nu de gegevens aan of wijzig indien gewenst. Drupal Basis Lander Carrijn 12

13 Vergeet niet op te slaan! Wanneer je de homepage bekijkt zien we een probleem: zonet gaven we een slogan in en die is nu niet te zien... Wanneer je met de cursor richting het logo gaat zal je in de rechterbovenhoek een potloodje zien verschijnen. Wanneer je daarop klikt en vervolgens klikt op blok instellen dan kom je bij de instellingen van dat bepaalde blok. Merk even op dat hier de naam blok valt, dit wordt in het volgende deel uitvoerig besproken. Vink nu in het verschenen venster ook de slogan aan. Sla even op en ga kijken op de homepage --> de slogan zal zichtbaar zijn. Blokken Een Drupalsite bestaat uit verschillende blokken. Plaatsten op het scherm waar inhoud kan worden weergegeven. De meest herkenbare blokken zijn de menubalk, het logo en de sitenaam, de hoofdinhoud. Maar dit gaat verder. Later kunnen we bijvoorbeeld de openingsuren toevoegen in een blok of een navigatiemenu aan de rechterkant. Voorlopig houden we ons nu even bezig met het opruimen van onnodige blokken. Drupal Basis Lander Carrijn 13

14 Kijk even bij Structuur en kies voor Blok-layout Je krijgt nu een lijst te zien van alle blokken, al dan niet reeds geplaatst. We verbergen overbodige blokken door deze op 'geen' te plaatsen. Zo mag je alles op 'geen' plaatsen behalve: Site branding Main navigation Page Title Main page content Vergeet dit alles niet op te slaan onderaan Bekijk het resultaat door terug te keren naar de homepage Keer even terug naar die lijst met blokken. Merk op dat je bovenaan kan klikken op 'Blokgebieden demonstreren'. Hiermee krijg je een idee waar welk blok ongeveer zal komen. Klik bovenaan op 'Demonstratie van blokregio's afsluiten' om terug te keren naar het vorige venster Drupal Basis Lander Carrijn 14

15 We voegen een blok toe: Kies voor 'aangepast blok toevoegen' Geef in het volgende venster een titel in: Welkom In het grotere tekstveld schrijf je bijvoorbeeld: op mijn eerste site Vervolgens moet je dit blok nu in één van de blokgebieden plaatsten. Wij kiezen voor Welcome Banner Text De achtergrondfoto aanpassen Hiervoor hebben we FTP nodig. Open FileZilla en log in Navigeer naar de juiste map: Drupal Basis Lander Carrijn 15

16 Wat je nu moet doen is logisch: o Zoek op het Internet een foto die je wil gebruiken als achtergrond. De huidige foto is iets meer dan 4 MB dus je moet niet kijken op een MB meer of minder. Voor kwaliteit zoek je met het trefwoord 'wallpaper' achter de zoekterm. o Sla de foto even op en geef deze dezelfde naam als op de server o Uploaden en overschrijven Keer terug naar de site, even vernieuwen, en voila! Inhoud toevoegen Voeg inhoud toe van het type eenvoudige pagina: Zet op 'volledige HTML' Drupal Basis Lander Carrijn 16

17 Verschillend van bovenstaande versie is de knoppenbalk, deze is bij jullie nog niet goed ingesteld. Dit doen we eerst: Hoover over Instellingen - Inhoud en samenstelling - Tekstopmaak en editors Kies voor Instellen bij Volledige HTML Voeg nu alle knoppen toe die je graag had gehad: Drupal Basis Lander Carrijn 17

18 Keer op je stappen terug en voeg nu opnieuw inhoud toe van het type eenvoudige pagina: o Zorg voor een titel: Drupal 8 o Zoek op Wikipedia het artikel over Drupal en plak dit zonder de links in de body: o Bij de URL zorg je ervoor dat deze /home gaat heten Sla even op. Tot slot gaan we deze inhoud instellen als homepage. Dit gaat op net dezelfde manier als Drupal 7 --> Aan jullie Drupal Basis Lander Carrijn 18

19 Les 2 Inhoud toevoegen en weergeven Inleiding Inhoud toevoegen op een Drupalsite bestaat eigenlijk altijd uit twee onderdelen: Inhoudstype: een aangepaste kast maken voor bepaalde inhoud Inhoud toevoegen: de aangepaste kast (=inhoudstype) opvullen met inhoud Wanneer je een reeks muzikanten wil presenteren op de site dan maak je een kast 'muzikanten'. Later wil je ook de verschillende LP's weergeven dan maak je best een nieuwe kast 'LP's' want deze passen niet in de kast van de muzikanten. Standaard inhoudstypes Eenvoudige pagina (Basic Page) Aanwezige velden: Titel Body Artikel (Article) Aanwezige velden: Titel Body Labels Afbeelding Eigen inhoudstypes Het maken een eigen inhoudstype gaat op de volgende manier: 1. Hoover over Structuur-Inhoudstypes 2. Kies nu voor Inhoudstype toevoegen Drupal Basis Lander Carrijn 19

20 3. We werken vanaf nu verder rond ons eerste onderwerp van deze module: Schilders en Schilderijen. We geven in het eerste venster dan ook een logische titel aan het de het eerste van twee inhoudstypes: Schilders 4. Bij de Beschrijving kan je een beschrijvende tekst toevoegen. Deze kan handig zijn voor de administrator zodat deze weet waarvoor het inhoudstype dient. Niet zichtbaar voor de bezoeker. 5. De instellingen onderaan dienen we ook even te overlopen: Instellingen inzendingsformulier: Hier kan je de naam van het titelveld wijzigen. De titel in ons geval zal steeds de naam van de schilder zijn. In principe kan je hier dus schrijven 'naam schilder' als label. Ik kan u nu al zeggen dat het gemakkelijker is om gewoon Title te laten staan. Ook mogelijk is het inschakelen van een voorbeeldweergave. Iets wat ik nooit gebruik. Deze optie laat ik steeds op de default staan. Uitleg of indienrichtlijnen kan je vergelijken met de beschrijving. Hier is dit meer bedoeld wanneer je anderen inhoud laat toevoegen. Publicatie-opties Drupal Basis Lander Carrijn 20

21 Published alle inhoud van het type schilders zal gepubliceerd worden = online, zichtbaar Promoted to front page je merkt nu reeds dat je op de home-page teasers ziet van onze nodes ('inhouden') als je dit niet wilt voor inhoud van het type schilders dan moet je deze vink hier afzetten Vastgeplakt bovenaan de lijst indien vorige vink aanstaat en je zet deze ook aan dan zal de teaser van de node bovenaan de lijst komen op de home page Nieuwe revisie aanmaken Wordt vooral gebruikt wanneer je met meerdere mensen op de site gaat werken. Taalinstellingen Een optie de van belang is wanneer je met een meertalige site gaat werken Weergave-instellingen Wanneer je deze vink niet afzet dan verschijnt er boven de node steeds wie het geschreven heeft en wanneer het geplaatst is afzetten Menu-instellingen Al de menu's die je hier aanvinkt zullen vervolgens bij elke node worden voorgesteld als mogelijke plaats om een menulink te zetten. CONCLUSIE Bij het aanmaken van een inhoudstype moet je bij de onderste opties steeds de vink 'auteur en datum tonen.' uitzetten. Je zal zien dat dit een gewoonte wordt. 6. Klik nu op Opslaan en velden beheren 7. Het veld body is standaard aanwezig. Merk op dat we eerder al een ander veld hebben gemaakt: de titel. Niet zichtbaar in deze lijst. Drupal Basis Lander Carrijn 21

22 8. We hebben reeds een veld voor de uitleg over de schilder (=body) en de naam van de schilder (=title). Graag hadden we nu ook een veld voor de foto van de schilder. Klik +Veld toevoegen 9. Een veld voor het toevoegen van een afbeelding hebben we reeds gezien bij het inhoudstype Artikel. Het is daarom aan te raden dit veld opnieuw te gebruiken. Dit zorgt voor meer structuur in de databank. Klik daarom bij Een bestaand veld hergebruiken en kies hier voor Afbeelding 10. 'Afbeelding' is hier een logische keuze voor het label 11. We gaan Opslaan en doorgaan 12. In dit volgende venster kan je een hele reeks zaken gaan bepalen. Ik overloop de belangrijkste in onderstaande afbeelding. Drupal Basis Lander Carrijn 22

23 Drupal Basis Lander Carrijn 23

24 Inhoud toevoegen De kast is gemaakt. We kunnen deze opvullen met de juist inhoud. Voor het gemak: KLIK HIER om de bestanden te downloaden 1. Kies voor Inhoud - Inhoud toevoegen - Schilders 2. Bij de titel typ je de naam van de eerste schilder 3. Bij de Body kopieer en plak je de tekst uit de gedownloade bestanden 4. Bij de afbeelding ga je de juist afbeelding uploaden 5. Rechts in beeld kies je bij Menu-Instellingen voor een link in het hoofdmenu 6. Bij de URL-Pad-Instellingen kiezen we een leesbare URL voor onze eerste node Drupal Basis Lander Carrijn 24

25 7. Klik nu Opslaan en publiceren 8. Je ziet meteen het resultaat. Zie je een typefout of bijvoorbeeld een verkeerde afbeelding dan klik je op het potloodje en kiest Bewerken. 9. Je merkt waarschijnlijk het woord Afbeelding op boven de foto. Om dit weg te werken moeten we naar de weergave instellingen van het inhoudstype. Ga naar Structuur - Inhoudstypes - Schilders - Weergave beheren Drupal Basis Lander Carrijn 25

26 10. Zorg ervoor dat het label bij het veld Afbeelding verborgen staat 11. Sla dit even op en bekijk het resultaat 12. Nu is het aan jullie. Voeg al de schilders toe. Dat zijn er in totaal zes. Oefening Naast de schilders hebben we ook de schilderijen nodig. Hiervoor moet je opnieuw een inhoudstype maken inhoud toevoegen. Dit is een perfecte toepassing van al het voorgaande. Gebruik dan ook de tekst! 1. Maak een nieuw inhoudstype aan: Schilderijen 2. Zorg voor een afbeeldingsveld bij dit inhoudstype 3. Voeg nu zes keer inhoud toe van het type Schilderijen. Gebruik de eerder gedownloade bestanden. 4. Zorg voor een menulink en een mooie URL 5. Het label boven de foto mag niet zichtbaar zijn 6. Extra: zorg ervoor dat je eerst de foto ziet en dan pas de tekst PathAuto Bij het toevoegen van de inhoud moesten we steeds opnieuw de URL typen. Dit is voor zes schilders doenbaar maar niet voor 700. Gelukkig bestaat hier een module voor. PathAuto is een mus-have voor elke Drupal Site! Drupal Basis Lander Carrijn 26

27 1. Download, installeer en activeer de module PathAuto (NEEM DE DRUPAL 8- VERSIE) 2. Je zal merken dat je de module niet kan aanzetten(??). De reden hiervoor: PathAuto werkt niet zonder Ctools en Token. Deze modules moet je eerst installeren 3. Open de instellingen van de module. Dit kan op twee manieren: Manier 1: Klik in de lijst van modules op de tekst naast de module-naam. Een optie Configureer verschijnt. Manier 2: Wanneer je niet in de lijst van modules zit dan navigeer je naar Instellingen - Zoeken en metadata - URL-aliassen 4. Bij die instellingen moet ween patroon aanmaken. Een soort van sjabloon dat we in de toekomst gebruiken voor al onze URL-aliassen 1. Het patroon type is hier Inhoud 2. We maken het Path pattern aan, gebruik hiervoor de tokens 3. We zorgen dat deze van toepassing is op al onze inhoudstypes 4. We geven het patroon een logische naam: Standaard Drupal Basis Lander Carrijn 27

28 5. Om dit geheel nu uit te testen voegen we een schilder toe. Haal er zelf eentje van het net. Drupal Basis Lander Carrijn 28

29 Les 3 Updates van modules en thema's Drupal is een CMS die constant evolueert. Performance en veiligheid worden steeds opnieuw bijgesteld. Daarom is het ook nodig dat de Drupal installatie up to date blijft. Er zijn twee soorten updates: De kern Modules en thema's Het is deze laatste die we even bekijken. 1. Ga naar Rapporten - Statusrapportage 2. Zoek vervolgens op de verschenen pagina naar de gele opmerking: 3. Klik nu op de blauwe link 'beschikbare updates' 4. Vink in het volgende venster alles aan en kies 'Deze updates downloaden' 5. In het volgende venster wordt u aangeraden een back-up te nemen. Dat is goed advies maar in het geval van onze oefensite (nog) niet nodig. Klik Doorgaan 6. Vervolgens moet ook de databank op updates worden gecontroleerd. Voer daarom het updatescript uit. Let ook even op de URL Drupal Basis Lander Carrijn 29

30 7. Tot slot kies je voor Voorpagina en de alles staat up to date Opdrachten 1. Op de huidige home-page zie je telkens de teaser van de schilders en schilderijen. Merk onderaan ook de volgende en vorige knoppen op! 2. Zorg ervoor dat enkel de teaser van de schilderijen te zien is x6 3. Op diezelfde homepage zien we nu enkel de teaser van de schilderijen. Een klein fotootje van het schilderij zou leuk zijn. Dit kan je regelen bij de weergave van het inhoudstype. Kies hier dit keer wel voor de teaser: Drupal Basis Lander Carrijn 30

31 4. Download en installeer als standaard het thema Professional Responsive Theme 5. Zorg ervoor dat 1. Er geen copyright of credits worden getoond 2. De sociale media symbolen niet zichtbaar zijn 3. Het favicon en logo aangepast wordt. Gebruik eventueel deze afbeelding: 6. De blokken moeten aangepast worden. Zet op autohidden: 1. Breadcrumbs 2. Search 3. Footer Menu 7. Het blok Page Title is opnieuw uitgeschakeld. Schakel opnieuw in 8. Zorg voor een nieuwe afbeelding ter vervanging van het blauw/zwarte raster. Gebruik volgende foto: 9. Voor diegene die in plaats van Inhoud nog steeds Content hebben staan gaan dit even vertalen: 1. Ga naar Instellingen en kies User Interface Translation 2. In het verschenen venster zoek je naar Content en je vertaald het vervolgens naar Inhoud Drupal Basis Lander Carrijn 31

32 Menu instellen In de vorige les hebben we reeds menu-linken voorzien voor al onze schilders en schilderijen. We merken op dat het menu zonder aanpassingen een beetje druk begint te worden. We kunnen dit oplossen door uitklapbare menu's te creëren. 1. Ga naar Structuur - Menu's - Hoofdnavigatie 2. Je ziet een lijst met alle reeds ingestelde menulinken. Merk ook de kruisjes op. Met deze kruisjes kan je de volgorde aanpassen. Zorg ervoor dat 'Home' op de eerste plaats staat. 3. Plaats nu de schilders en schilderijen zoals hierboven. Dit wil concreet zeggen dat we de schilder bij zijn schilderij gaan plaatsen. 4. Met hetzelfde kruisje kan je nu de schilderijen laten inspringen onder de schilder: Drupal Basis Lander Carrijn 32

33 5. Door op te slaan kan je het resultaat gaan bekijken. Dit zal tegenvallen. De schilderijen klappen niet uit. We keren terug naar de instellingen van het hoofdmenu. Naast elke schilder dien je op Bewerken te klikken en een vink te zetten bij Uitgeklapt Weergeven: 6. Resultaat: Dropdown menu Probleem: wanneer je klikt op een schilder verschijnt de pagina niet, de link lijkt dood te zijn. Dit is een probleem in een javascript bestand. Stap voor stap werken we naar de oplossing: 1. Log in op Cpanel 2. Ga naar de map Themes en open het huidige thema 3. Kies hier de map JS 4. Download het bestand custom.js 5. Open het bestand 6. plak net voor de laatste regel het volgende: $("#main-menu li a").removeattr("data-toggle"); 7. Sla het bestand op 8. Upload nu dit bestand en vervang hiermee het oude Drupal Basis Lander Carrijn 33

34 9. Ga naar de site 10. Eventueel refresh of een flush van de cache > probleem zou verholpen moeten zijn Homepage instellen Wanneer je de website niet voorziet van een eigen ingestelde Homepage of Frontpage dan zal Drupal automatisch teasers tonen van als jouw toegevoegde inhoud. Dit is handig voor een blog, niet meteen voor ons. 1. Maak een nieuwe node aan van het type Eenvoudige pagina. 1. Titel: Welkom 2. Tekst: Welkom op mijn site 2. Zorg ervoor dat de URL niet automatisch gemaakt wordt en geef deze zelf in: /welkom 3. Sla dit even op 4. Ga nu naar Instellingen - Systeem - Basis site-instellingen 5. Pas de standaardvoorpagina aan door de jou gekozen URL in te geven: Herhalingsoefening In de vorige les hebben we inhoud toegevoegd in inhoudstypes. We doen dit vandaag opnieuw ter herhaling. Download de nodige bestanden 1. Voeg een nieuw inhoudstype toe: Musea 2. Vergeet niet om 'Auteur en datum' uit te vinken Drupal Basis Lander Carrijn 34

35 3. Voeg een nieuw veld toe: 1. Veldtype: Tekst (plat) 2. Label: Adres 3. In de volgende vensters mogen de instellingen gewoon blijven zoals ze zijn 4. Voeg opnieuw een veld toe: 1. Bestaand veld: Afbeelding 2. In de volgende vensters mogen de instellingen blijven staan zoals ze zijn 5. Voeg nu de 5 musea toe, gebruik hiervoor de gedownloade bestanden. Let op: een menulink is hier voorlopig niet nodig 6. Aangezien we gebruik maken van PathAuto Bulk Generate hoef je je ook niet druk te maken over de URL. (zie lager) Nieuw veld: lijst Bij de musea willen we graag de mogelijk om in een lijstje te kiezen in welk land de verschillende musea zich bevinden. Open het veldenbeheer van het inhoudstype Musea Voeg een nieuw veld toe: Drupal Basis Lander Carrijn 35

36 Voeg nu handmatig een lijstje in met mogelijke landen. We kiezen hier logischerwijs de landen van onze musea: Sla dit op en in het volgende veld kan je ook gewoon opslaan. Bewerk nu telkens de inhoud van de musea. Je zal merken dat er een veld is bijgekomen en dat je het land kan selecteren: PathAuto Bulk Generate Wanneer we naar de URL van één van de musea kijken dan zien we dat we daar weer te maken hebben met.../node/4. Raar want zonet hebben we dat patroon bij PathAuto ingesteld. Nu is het zo dat dit niet automatisch met terugwerkende kracht werkt. Gelukkig bestaat er een eenvoudige oplossing. 1. Open de instellingen van PathAuto 2. Klik op het tabblad Patronen 3. Bewerk het patroon Standaard. Zet ook een vink bij musea en sla op 4. Kies bovenaan het tabblad Bulk Generate 5. Vink inhoud aan, zo weet Drupal wat je wil gaan bijwerken Drupal Basis Lander Carrijn 36

37 6. Kies vervolgens ook welke aliassen je wil bijwerken en/of aanmaken 7. Klik Bijwerken 8. Na een aantal seconden en een vooruitgangsbalk verschijnt er een groene melding met het aantal bijgewerkte URL's. Controleer maar door een museum naar keuze te bekijken en de URL te checken. Weergave beheren Je hebt het misschien gemerkt maar de afbeeldingen van onze musea zijn ofwel heel erg groot ofwel aan de kleine kant. Het is voor een bezoeker veel aangenamer om deze allemaal in dezelfde grootte te zien verschijnen. 1. Ga naar Structuur - Inhoudstypen - Musea - Weergave beheren 2. Merk naast het afbeeldingsveld het kleine grijze tandwieltje op. 3. Klik daar even op en je krijgt volgend instellingsveld: 4. Afbeeldingsstijl: Drupal Basis Lander Carrijn 37

38 1. Geen: hier kies je gewoon de originele foto 2. Groot: een stijl die de afbeelding gaat bijsnijden op 480x480 pixels 3. Gemiddeld: idem maar dan 220x Miniatuur (Thumbnail): idem maar dan 100x Link afbeelding naar: 1. Niets: wanneer de bezoeker op de foto klikt gebeurt er niets 2. Inhoud: de inhoud van de foto zal getoond worden, in dit geval gebeurt er dus niets want je kijkt al naar de inhoud 3. Bestand: de foto wordt groot getoond in een nieuw venster 6. Test de verschillende mogelijkheden uit. 7. Kies uiteindelijk voor Groot en Bestand 8. Vergeet niet om telkens op Bijwerken te klikken gevolgd door Opslaan Colorbox Colorbox is een leuke module voor het weergeven van foto's. Helaas dis deze module third party, dit wil zeggen dat we handmatig een plugin moeten installeren op onze server in de juiste map. Daarnaast moet ook de module zelf geïnstalleerd worden. 1. Download de plugin naar de map download en zorg dat deze mooi uitgepakt klaar staat. 2. We downloaden het FTP programma FileZilla 3. Nu maken we connectie met de site via FTP, open het programma FileZilla 4. Bovenaan kan je door het invullen van de gegevens inloggen, de gegevens heb je gekregen in de bevestigingsmail bij het aankopen van jouw domein Drupal Basis Lander Carrijn 38

39 5. Wanneer de connectie is gelukt, dan zie je links in beeld de harde schijf van jouw computer en rechts de mappen structuur op de server 6. Zorg ervoor dat je in het linker venster de uitgepakte map colorbox ziet staan. Rechts open je jouw submap 7. Maak nu zelf een map aan libraries. Deze zit niet automatisch in de installatie. Naar de toekomst toe zullen alle plugins hierin worden geplaatst. 8. Zorg dat in het rechter venster de nieuwe map libraries geopend is Drupal Basis Lander Carrijn 39

40 9. Klik rechts op de map colorbox en kies uploaden 10. Keer terug naar jouw site. Download, installeer en activeer de module Colorbox 11. Voor colorbox iets van nut kan hebben moeten we er eerst voor zorgen dat we wat meer afbeeldingen hebben bij onze schilders: Download deze bestanden 12. Bewerk nu een schilder naar keuze en probeer eens om een foto toe te voegen. Dit gaat helaas niet. 13. Open het veldenbeheer van het inhoudstype schilder 14. Klik op Bewerken bij het veld afbeelding 15. Klik in het verschenen venster op het tabblad veldinstellingen, we negeren de rode melding 16. Onderaan zie je dat de toegestane waardes op 1 staan, we veranderen dit even naar Onbeperkt Drupal Basis Lander Carrijn 40

41 17. Vergeet niet op te slaan 18. Bewerk nu de inhoud van alle eerder toegevoegde schilders, gebruik vervolgens de inhoud van de gedownloade bestanden om bij elke schilder twee foto's toe te voegen 19. Na dit werk open je de weergave van het inhoudstype schilder 20. Pas nu het formaat aan van het afbeeldingsveld naar colorbox Drupal Basis Lander Carrijn 41

42 21. Klik nu op het grijze tandwiel ter hoogte van het afbeeldingsveld 22. We overlopen volgende instellingen klassikaal: 23. Klik zeker op Bijwerken gevolgd door opslaan 24. Bekijk het resultaat 25. Mogelijk opmerkingen / problemen: 1. De afbeeldingen blijken niet allemaal even groot te zijn 2. De afbeeldingen staan niet mooi naast elkaar als je naar de node kijkt > problemen om op te lossen in de volgende les Drupal Basis Lander Carrijn 42

43 Les 4 Voorbereidend werk 1. Installeer het programma FileZilla Klik hier voor de download site 2. Installeer de volgende modules: Asset Injector Field Formatter Class Libraries Flex Slider Simple Google Maps Focal Point 3. Plaats de plugin voor de module Flex Slider (klik hier) in de map Libraries op de server. 4. Download hier extra foto's van Pablo Picasso en voeg deze toe in de desbetreffende node Je kan de vijf afbeelding in één keer selecteren en uploaden = Multiupload 3. Zet bij de weergave de het formaat van het veld afbeelding opnieuw op afbeelding/image en de afbeeldingsstijl gemiddeld Afbeeldingsstijlen: introductie Bij onze schilders willen dat alle getoonde foto's, op welke manier dan ook, dezelfde afmeting hebben. Kijk je nu naar Pablo Picasso dan zien we de afbeeldingen onder elkaar getoond maar niet allemaal even groot. 1. Ga naar Instellingen - Media - Afbeeldingsstijlen Drupal Basis Lander Carrijn 43

44 2. Je ziet een lijst met reeds bestaande stijlen. Wij maken er zelf eentje: 3. Geef deze stijl een passende naam. Kies steeds een logische naam zodat je later weet waarvoor ze dient of hoe ze er uit ziet. 4. Vervolgens voegen we een bewerking toe. Kies Schalen en bijsnijden in de lijst en vervolgens voor klik je op Toevoegen 5. Geef nu de gewenste afmetingen op: 6. Sla alles op. Open vervolgens de weergave van het inhoudstype schilders en pas de afbeeldingsstijl aan van het veld Afbeelding. Bekijk vervolgens het resultaat. Drupal Basis Lander Carrijn 44

45 Focal Point Wanneer je het resultaat bekijkt zou je kunnen stellen dat sommige foto's niet mooi gecentreerd staan. Let op, het valt hier goed mee. In sommige gevallen kan het zijn dat essentiële stukken foto gewoon worden weggesneden. Gelukkig kan dit worden opgelost met de module Focal Point. 1. Bewerk de node Pablo Picasso. Wanneer je naar de verschillende afbeeldingen kijkt dan zie je overal een klein wit kruisje. Dit is aanwezig sinds de installatie en activatie van Focal Point. Voor we hier mee verder werken willen we eerst dat de kleine fotootjes van Picasso wat groter zichtbaar zijn, hier op de plaats waar de admin gaat inputten. Ondertussen weten we dat dit bij de formulierweergave zit van het inhoudstype Schilders. 2. Kijk even naar het veld afbeelding en pas de afbeeldingsstijl aan naar gemiddeld via het tandwiel 3. Om nu het resultaat te bekijken bewerken we opnieuw de node van Picasso. De afbeeldingen zijn groter. Het is nu eenvoudiger om het kruisje (=focus punt) op het essentiële stuk van de foto te plaatsten. In ons geval het hoofd van de schilder. Drupal Basis Lander Carrijn 45

46 4. We bekijken even het resultaat. Je zal zien dat er niets veranderd, hoe vaak je ook vernieuwd of caches leegmaakt. Het is namelijk zo dat focal point samen werkt met een afbeeldingsstijl die we nog moeten aanmaken. Om niet opnieuw een stijl aan te maken gaan we onze bestaande stijl bewerken. Open de afbeelingsstijlen en bewerk de bestaande stijl Schalen en bijsnijden 250 x Voeg een nieuwe bewerking toe en dit keer kiezen we voor Focuspunt schalen en uitsnijden. Opnieuw: aanwezig door installatie van de module Focal Point 6. Uiteraard zet je de afmetingen weer op 250 x 300. Verwijder tot slot de eerste bewerking. 7. Controleer het resultaat door Picasso te bekijken. Eventueel vernieuwen of flushen. Drupal Basis Lander Carrijn 46

47 Flexslider alternatief voor colorbox In een vorige les hebben we colorbox gezien. Een module om foto's weer te geven op een site. Naast deze module zijn er nog zeker 100 andere om foto's aangenaam te tonen. Eén daarvan is Flexslider. Een leuke module die we in dit stuk even bekijken. De feiten op dit moment: Module geïnstalleerd Plugin op de server gezet Kijk even bij inhoud en merk op dat er een aantal nodes zijn bijgemaakt met een voorbeeld in van Flexslider. Dit is puur ter inspiratie. In dit verhaal gaat het weer over wat de gebruiker te zien krijgt. 1. Open daarom de weergave van het inhoudstype Schilders. Pas vervolgens het formaat van het veld Image aan naar FlexSlider 2. Via het tandwiel kan je verder gaan instellen. Bekijk zeker ook eens de andere voorbeelden. 3. Via Instellingen - Media - FlexSlider kan je de algemene instellingen van de flexslider instellen. Drupal Basis Lander Carrijn 47

48 CSS introductie --> gebruik Mozilla Firefox voor dit onderdeel <-- CSS (Cascading Stylesheets) is een manier om met code aanpassingen te doen op de site. Dit wordt vaak gebruikt om wijzigingen door te voeren die niet worden aangeboden door het thema of Drupal zelf. Hiervoor installeren we eerst twee modules: Asset Injector Field Formatter Class In dit deel gaan we eerst de kleuren van onze menubalk aanpassen, vervolgens plaatsten we de foto's van de schilder naast elkaar zonder gebruik te maken van FlexSlider of Colorbox. Kleur menubalk 1. Ga naar Instellingen - Asset Injector - CSS injector om een nieuwe CSS regel toe te voegen Drupal Basis Lander Carrijn 48

49 2. De naam van dergelijke regel maak je best steeds logisch. Ik begin steeds met CSS gevolgd door mijn object dat ik aanpas. In dit geval: 3. Het volgende venster zal dienen om onze code in te voeren. Maar eerst even dit: Een Drupal site bestaat uit verschillende klassen. Deze klassen kan je vervolgens gaan bewerken met CSS-code. Er zijn klassen die reeds bestaan en er zijn klassen die je zelf maakt om vervolgens te koppelen aan een object. De menubalk bestaat uit verschillende klassen die reeds bestaan. Later gaan we een klasse moeten maken om de afbeeldingen van de schilder naast elkaar te krijgen. Los van de uitzonderingen begint een klasse steeds met een punt. Om te weten welke klasse aan welk onderdeel is gekoppeld kan je de element inspector van de browser gebruiken. Ik werk graag Mozilla Firefox voor dit verhaal. Ik vertel dit omdat de element inspector verschilt van browser tot browser. 4. Klik rechts op een object dat je graag wil aanspreken met CSS en kies element inspecteren Drupal Basis Lander Carrijn 49

50 5. Vervolgens kan je met het kleine pijltje in het vierkantje links beneden een bepaald object beter bekijken. 6. Kijk dan in het rechter venster, scrollen is misschien nodig, en pas even de achtergrondkleur aan van de menubalk. 7. Dit is natuurlijk niet "echt" wanneer je ververst dan is de site onveranderd. Stel je voor dat je op deze manier de kleuren van Google even kan wijzigen De code die je hier uittest dien je nu te plakken in de CSS injector. Ik heb deze code in stukken gekapt. Download ze hier 9. We bespreken dit klassikaal. Uiteindelijk ziet de code er als volgt uit. Drupal Basis Lander Carrijn 50

51 Afbeeldingen naast elkaar Pas eerst de weergave van het inhoudstype schilder aan. Zet het formaat van het veld image/afbeelding opnieuw of image/afbeelding. Het resultaat is dus dat alle foto's onder elkaar staan en tegen elkaar plakken. Dit is een andere situatie maar ook oplosbaar met CSS. 1. Kopieer de volgende code en plak deze in een nieuwe css regel..naastelkaar img { float:left; padding:10px; } 2. Sla ook deze regel op en bekijk de node van Pablo. Er is voorlopig niets veranderd... Drupal Basis Lander Carrijn 51

52 Om deze code ook door te voeren moeten we de velden koppelen aan deze CSS regels. Dat kunnen we regelen bij de weergave. 3. Open de weergave van het inhoudstype Schilder. 4. Klik nu op het tandwiel bij de het afbeeldingsveld 5. Bij Field Formatter Class typen we nu de klasse. We typen hier geen puntje!! 6. Bekijk even de node van Pablo. Zie je het niet meteen, verversen of flushen. Taxonomie Wikipedia: Taxonomie (Grieks: τάξις táxis ordening, schikking en νόµος nómos gebruik, wet) is het indelen van individuen of objecten in groepen (taxa, enkelvoud taxon). Met de term taxonomie kan zowel de methode worden bedoeld die bij het indelen wordt toegepast, als de hiërarchische ordening die het resultaat ervan is. Zo'n hiërarchische ordening en de activiteit, om tot zo'n ordening te komen, worden classificatie genoemd. Vrijwel alles kan taxonomisch worden ingedeeld: levende wezens, plantengemeenschappen, dingen, plaatsen, gebeurtenissen, enzovoort. Taxonomie zoals hier bedoeld is afgeleid van de wetenschap taxonomie. Op een website wordt taxonomie gebruikt om inhoud in categorieën onder te verdelen. Heel concreet: wanneer een gebruiker op zo een categorie klikt dan ziet hij/zij alle inhoud die bij deze categorie hoort. Op een webshop ben je bijvoorbeeld op zoek naar een nieuw GSMhoesje, het merk maakt niet zo veel uit maar de kleur wel. Klik je vervolgens op rood dan zie je alle rode hoesjes van alle merken. Wij gaan dit toepassen bij onze schilderijen door deze te categoriseren volgens kunststroming. Open via Structuur - Taxonomie het juiste venster Drupal Basis Lander Carrijn 52

53 Kies vervolgens de optie om een nieuwe woordenlijst toe te voegen. Hier bepalen we dus onze categorie waar we later dan de juiste termen aan toevoegen. Klik nu op Term toevoegen en vul de eerste term in. Sa op. Klik opnieuw op Term toevoegen en herhaal. Uiteindelijk moeten onderstaande termen te zien zijn: Drupal Basis Lander Carrijn 53

54 Nu moeten we een manier zien te vinden om de kunststromingen te koppelen aan de schilderijen. Open het veldenbeheer van het inhoudstype schilderijen. Voeg een nieuw veld toe en kies als veldtype: referentie - taxonomie Geef een passend label: Kunststroming In het eerste instellingsveld kan je alles zo laten Drupal Basis Lander Carrijn 54

55 In het tweede instellingsveld moet je nu de juiste woordenlijst kiezen: Wanneer je dit laatste opslaat is het inhoudstype schilderijen aangepast. Nu moet je elk schilderij voorzien van de juiste kunststroming Bewerk een eerste schilderij: Het nieuwe veld kunststroming is nu te zien: Het aanpassen van automatisch aanvullen naar keuzerondjes kan je regelen bij de formulierweergave van het inhoudstype Bekijk nu even een schilderij en klik op de kunststroming. Je zal merken dat alle andere schilderijen van dezelfde kunststroming ook getoond zullen worden, dit wel in teaser-vorm. Bekijk even de URL van die pagina --> op te lossen bij PathAuto! Simple Google Maps Deze module zorgt ervoor dat een eenvoudig tekstveld met een ingevuld adres wordt omgezet in een bruikbare Google Maps kaart. Drupal Basis Lander Carrijn 55

56 Download en activeer eerst de module o Module: Simple Google Maps Open de weergave instellingen van het inhoudstype musea. Kies nu bij het formaat voor 'Google Map form one-line address' Open meteen even de instellingen van dit formaat door te klikken op het tandwiel en stel in: o De grootte van de kaart o Het zoomniveau o De taal van de kaart o Wat er verschijnt op de kaart Na deze aanpassingen werk je bij en sla je op Bekijk het resultaat door een museum naar keuze te bekijken via inhoud Opdrachten Gebruik onderstaande opdrachten om de vorige lessen te herhalen: 1. Wijzig de naam van site naar: 'Drupal Wetteren' 2. Zorg ervoor dat enkel de naam wordt getoond op de site (logo en slogan verbergen) 3. Bij het inhoudstype Artikel voeg je een nieuw veld toe: 1. Veldtype: tekst (plat) 2. Label: Locatie 4. Voeg inhoud toe van het type Artikel 1. Geef deze node de naam 'Contact' 2. In de body vul je de contact gegevens van de school in of die van jezelf 3. Bij het veld locatie voeg je een bestaand adres in, dat van jezelf of dat van de school 4. In het afbeeldingsveld plaats je het logo van de school Drupal Basis Lander Carrijn 56

57 5. Zorg voor een menulink 'Contact' in het hoofdmenu 5. Zorg ervoor dat het kaartje groot genoeg is en dat overbodige labels verborgen worden (Weergave van het inhoudstype Artikel) 6. Pas de menubalk zodanig aan dat er bij de schilders ten eerste een schilderij wordt getoond en vervolgens ook het museum: 1. Renoir --> Musée D'Orsay 2. Ensor --> Antwerpen 3. Klimt --> Belvedere 4. Picasso --> Reina Sofia 5. Monet --> Marmottant 6. Van Gogh --> Musée D'Orsay Het maximale aantal menu-niveaus aanpassen Je zal merken dat wanneer je alles juist hebt gedaan (denk ook aan uitgeklapt weergeven) dat het geen resultaat oplevert. Dit komt omdat het maximale aantal menu-niveaus te laag staat. Open de instellingen van het blok Pas het nu het maximale aantal aan naar 3 Zelf een menulink maken Om het Musée D'orsay ook bij Van Gogh te laten uitklappen moeten we zelf een link leggen. Volg de volgende stappen: Bekijk het Museé D'Orsay als node en kopieer de URL Voeg een link toe in het hoofdmenu via Structuur - Menu's - Main navigation - Link toevoegen Drupal Basis Lander Carrijn 57

58 Geef de link een naam: 'Museé D'Orsay' Plak bij de link de eerder gekopieerde URL Kies als bovenliggend onderdeel het schilderij van Van Gogh Drupal Basis Lander Carrijn 58

59 Les 5 Drupal installeren Om Drupal te laten draaien op jouw eigen hosting log je in op het Cpanel. Vervolgens kan je met een aantal bijzonder eenvoudige stappen Drupal activeren. In onderstaand stappenplan ga ik er van uit dat je gebruikt maakt van een subdomain. Indien je gewoon op het hoofddomein gaat werken kan je starten vanaf punt Log in op Cpanel. In mijn geval zou dat zijn: cpanel.drupallessen.be. De gebruikersnaam en het wachtwoord kan je terugvinden in de bevestigingsmail van de hosting. 2. Zoek de knop Subdomains 2. Vervolgens vul je in het eerste veld een naam in voor het subdomain. De andere twee velden worden automatisch aangevuld wanneer je Create klikt. 3. Keer terug naar de homepage van het Cpanel 4. Helemaal onderaan kan je nu bij de scripts kiezen voor Drupal. Men toont hier wel Drupal 7, maar je kan dat zodadelijk aanpassen Drupal Basis Lander Carrijn 59

60 5. Klik nu in het verschenen venster op Install. 1. Kies de Drupalversie 2. Kies op welk domein Drupal moet verschijnen 3. Kies het protocol 4. Kies een naam voor de site 5. Kies een gebruikersnaam en een wachtwoord voor /user 6. Geef een geldig adres voor o.a.. update meldingen 6. Klik op Install --> even geduld --> ga kijken naar jouw nieuwe website Eerste stappen op de site Dit lesonderdeel is eigenlijk pure herhaling van de eerste les van deze module. Drupal is nu naakt aanwezig zonder enige aanpassingen. Ik stel voor dat jullie onderstaande in orde brengen: Installeer en activeer de volgende modules: o PathAuto o Token o Chaos Tools o Admin Toolbar o Asset Injector Installeer en activeer het volgende thema (Merk op dat dit jouw eigen hosting is, je kan ook zelf een thema kiezen) o Drupal 8 Zymphonies Theme Via Uiterlijk - Instellingen - drupal8_zymphonies_theme kan je ervoor zorgen dat: o Er geen Social Media Icons te zien zijn o Er geen copyright wordt getoond o Er geen credits worden getoond Via Structuur - Blok-Layout verberg je overbodige blokken en schakel Page Title in o Site Branding o Main Navigation o Main Page Content Pas eventueel het logo van de site aan, alsook het favicon Stel een homepage in voor jouw site Pas de banner-afbeelding aan van de site (via FTP) Voeg een nieuw blok waarin je de bezoeker verwelkomt. Plaats dit in het blokgebied 'Welcome Banner Text' Configureer de module PathAuto zodanig dat er voor de inhoudstypes Basic Page en Article gebruiksvriendelijke URL's worden gemaakt. Drupal Basis Lander Carrijn 60

61 Je hebt nu een site waar je mee kan starten. Je kan hierop alle lessen toepassen, oefeningen maken, of starten met het maken van jouw site. Het is ook zeker niet verboden om in plaats van op de 'les-site' te werken, jouw eigen site te gebruiken tijden de lessen. CKEditor aanpassingen De CKEditor wordt gebruikt voor het opmaken van tekst in bijvoorbeeld de body. Van Drupal krijg je al een aantal knoppen maar onderstaande modules bieden u veel meer knoppen om nog meer aanpassingen door te kunnen voeren Voor veel van deze modules heb je plugins nodig. Om dit efficiënt te laten gebeuren kan je deze hier allemaal samen downloaden. (de titels van de volgende onderdelen zijn links naar de downloadpagina) CKEditor Smiley Zeer eenvoudige module. Wel eerst even de plugin "smiley" uploaden. Via Instellingen - Inhoud en samenstellen - Tekstopmaak en editors plaats je de knop de werkbalk CKEditor Color Button Hiermee verkrijg je knoppen waarmee je de achtergrondkleur en tekstkleur kan aanpassen. Werkt enkel met de plugin "colorbutton" Uiteraard moet je de knoppen op de werkbalk plaatsen Drupal Basis Lander Carrijn 61

62 --> om deze te laten werken moet je ook de module CKEditor Panel Button met de bijhorende plugin "panelbutton" installeren CKEditor List Style Een module die meer mogelijkheden biedt bij opsommingstekens en nummering. Even rechts klikken en je kan uit iets meer stijlen kiezen. Werkt enkel met de module "liststyle" Simple Image Popup In de CKEditor kan je reeds een afbeelding uploaden met de knop die standaard aanwezig is. Met deze module zorg je ervoor dat de afbeelding groter wordt getoond als er op geklikt wordt. Kan ook gebruikt worden in een afbeeldingsveld maar dat zou ik niet aanraden. Daar zijn betere modules voor. Oefening Maak gebruik van alle vorige modules om volgende schilder toe te voegen. Download even de bestanden Drupal Basis Lander Carrijn 62

63 1. De titel van de node: Jackson Pollock 2. In de body plak je de tekst als platte tekst uit het word-document 3. De tussentitels worden worden koptitels van het type H1 (tip:broncode) 4. Geef deze tussentitels een tekstkleur naar keuze 5. De oplijsting van de verschillende musea geef je dan een nummering met Romeinse cijfers mee 6. Voeg tot slot de de foto toe (Pollock_body). Wanneer de gebruiker hierop klikt dan krijg je een pop-up te zien. 7. Ter afwerking: in de gedownloade bestanden zitten nog een aantal extra foto's van Pollock. Voeg deze toe in het afbeeldingsveld. Magnific Popup Deze module is een alternatief op FlexSlider en Colorbox. Aan jullie om deze aan de praat te krijgen. We zorgen er voor dat dit werkt op de afbeeldingen van onze schilders. 1. Download, installeer en activeer de module 2. De module gebruikt de plugin "magnific-popup" (reeds geïnstalleerd) 3. Je past dit alles uiteraard toe op de weergave. 4. Je maakt best twee nieuwe afbeeldingsstijlen aan. Eentje voor de thumbnails en een tweede die dan toegepast wordt op de geopende pop-up Drupal Basis Lander Carrijn 63

64 5. Bij mij plakten de foto's wat tegen de onderrand van het scherm. Je kan dit met CSS gaan regelen. Gebruik MARGIN-BOTTOM Drupal Basis Lander Carrijn 64

65 Les 6 Views (deel 1) Inleiding We starten vandaag met het verkennen van één van de top-modules van Drupal: Views (of Overzichten). In Drupal 7 diende deze module te worden geïnstalleerd. Maar door zijn populariteit heeft de Drupal-organisatie besloten om deze module in Drupal 8 te integreren in de kern. We hebben dus geen installatie werk. Het toffe aan deze module is dat het mogelijk is om de verschillende velden uit verschillende nodes te tonen op één pagina. Zo gaan wij meteen een pagina aanmaken die alle schilderijen toont. Of je maakt een overzicht van alle musea met daarnaast adres en kaart. De mogelijkheden van Views (=overzichten) zijn onuitputtelijk. Dit zal dus ook een module zijn waar we lang zullen bij stilstaan. Overzicht maken 1. Kies voor Structuur - Overzichten - Een nieuw overzicht toevoegen 2. In het eerste beeld dat verschijnt kan je een titel geven en -zeer belangrijkaanduiden van welk inhoudstype je inhoud wil gaan tonen. 3. In dit geval kiezen we als titel: Schilderijen en geven we Inhoud weer van het type Schilderijen 4. Vervolgens bepalen we wat we willen maken: een blok of een pagina. In deze oefening kiezen we voor een pagina. Blok is voor een andere keer. 5. We stellen vervolgens in dat we een Tabel van velden willen en ook graag een menulink in het hoofdmenu: Drupal Basis Lander Carrijn 65

66 6. Kies tot slot voor Opslaan en bewerken 7. Het volgende venster toont in vol ornaat de mogelijkheden van Views (=overzichten). Je moet weten dat we eerder hebben bepaald dat we velden willen weergeven in tabelvorm van het type schilderijen. 8. Kijk even bij velden, daar zal je zien dat er reeds één veld standaard aanwezig is: Titel. Dat is altijd het geval. scrol je even naar beneden dan zie je in de preview inderdaad onze verschillende schilderijen staan (OPMERKING: op bovenstaande afbeelding zie je maar één schilderij, ik heb er op deze site ook maar één opgezet..) 9. Klik nu bij velden op toevoegen om ook de afbeelding van het schilderij te tonen: 10. In het volgende veld kan je nu eenvoudig zoeken naar het juiste veld door gericht te gaan zoeken. Typ in het zoekveld de naam van het inhoudstype: schilderijen Drupal Basis Lander Carrijn 66

67 11. In het zoekresultaten moet we nu zoeken naar de afbeelding die voorkomt in schilderijen: 12. Merk hier op dat dit veld ook in andere inhoudstypes voorkomt. Eerder echter hebben wij bepaald dat we enkel inhoud willen zien van het type schilderijen. De view zal dus enkel de afbeeldingen tonen die voorkomen in de nodes van het inhoudstype schilderijen. 13. Klik na het aanvinken van het juiste veld op velden toevoegen en instellen 14. Een aantal zaken kan je hier bepalen: 1. Het is een tabel, boven een tabel staan koppen om aan te geven wat er in een kolom getoond wordt. Dit is het label. In dit geval veranderen we het label van afbeelding naar schilderij. Dit is puur voor de bezoeker een aangenaam beeld te schenken. 2. We plaatsen geen dubbele punt na het label (Bij een tabelweergave is dit sowieso niet aanwezig) 3. De afbeeldingsstijl bepaald de grootte van de afbeelding. Deze passen we even aan naar bijvoorbeeld 'gemiddeld'. Niet tevreden, keer later terug naar deze instellingen en pas aan. 4. We linken de afbeelding ook naar de inhoud. Wanneer iemand op de foto klikt dan zullen ze meer info zien over het schilderij Drupal Basis Lander Carrijn 67

68 15. Bevestig nu dit geheel door een klik op Apply 16. Scroll even naar onder en bekijk de Preview: 17. Om nu het feitelijke resultaat te zien dienen we deze view eerst op te slaan, dat is niet het geval. Als je nu dus op Terug naar de website zou klikken, dan ben je alles kwijt! Klik eerst op Opslaan: 18. Keer nu terug naar de website 19. Klik in het menu op de nieuwe link 'schilderijen' en bekijk het (voorlopige) resultaat.: We werken dit overzicht nu verder uit naar een mooier geheel. 20. Om een overzicht te bewerken kan je eenvoudig op het potloodje drukken indien de view in beeld staat. Is dit niet het geval; kies dan Structuur - Overzichten 21. Vervolgens zoek je in de lijst naar jouw overzicht en je klikt Bewerken Drupal Basis Lander Carrijn 68

69 Raster Op dit moment staat ons overzicht in het formaat Tabel. Dat is op zich niet slecht maar tabellen zijn niet responsive. Wanneer je dit bekijkt op een klein scherm zoals een smartphone dan zal de tabel zich niet aanpassen. We bekijken hieronder eerst een andere weergaven: Raster 1. Klik bij Formaat op de huidige weergave: Tabel 2. Kies vervolgens voor Raster en Apply, ook in het volgende venster klik je Apply, de instellingen in dit venster zijn voor later. 3. Bekijk nu onderaan de voorbeeldweergave. Merk hier op dat er voor de titel van het schilderij en de foto telkens een label staat, dit is overbodig. 4. Klik bij de velden eerst op Titel 5. Vink vervolgens 'een label aanmaken' uit Drupal Basis Lander Carrijn 69

70 6. Herhaal dit om ook het label van de afbeelding weg te halen. Uiteindelijk krijg je dit in het voorbeeld onderaan in beeld: 7. De titel van het schilderij mag wat meer opvallen en gaan we een andere opmaak meegeven. Ook de afbeelding mag iets groter zijn: 8. Klik bij de velden op Titel 9. Ga nu iets lager in het venster op zoek naar Stijlinstellingen 10. Zet een vink bij HTML van het veld aanpassen en kies voor H1 (Header 1) 11. Pas dit vervolgens toe: Apply 12. Klik nu op het veld afbeelding 13. Pas de Afbeeldingsstijl aan naar Large: 14. Pas dit toe: Apply 15. Tot slot willen we ook de uitleg van het schilderij weergeven, niet alles, een klein stukje van de body volstaat. Deze uitleg staat in het veld body. We moeten dus dat veld eerst toevoegen 16. Klik bij de velden op toevoegen 17. In het verschenen venster kan je bij Search eenvoudig gaan filteren, typ; Body en zet een vink bij het juiste veld: Drupal Basis Lander Carrijn 70

71 18. Klik nu: Velden toevoegen en instellen 19. In het verschenen venster dienen we het volgende aan te passen: 1. Opmaakhulpmiddel: Samenvatting of ingekorte tekst 2. Limiet van inkorten: bepaal het aantal tekens dat wordt weergegeven, kijk eens of 250 goed genoeg is, indien niet, pas je dit eenvoudig aan 20. Uiteindelijk krijg je een onderaan volgend resultaat: 21. OPGELET! Om als ons werk niet verloren te laten gaan MOETEN we eerst op Opslaan klikken, doe dit nu: 22. Je kan het resultaat bekijken op twee manieren: 23. Klik op Terug naar de website en gebruik de menu-link 24. Klik bij de instellingen van het overzicht op Page Weergeven Drupal Basis Lander Carrijn 71

72 25. De kans is groot dat de foto's vervormd zijn. De reden hiervoor is het aantal kolommen in het raster, dat is standaard 4. Beter zou zijn moesten we de inhoud weergeven in 2 kolommen: 26. Ga terug naar de instellingen van het overzicht 27. Klik bij het formaat op instellingen naast het raster 28. Bij het aantal kolommen pas je aan naar Vergeet niet op te slaan en bekijk het resultaat. Oefening De volgende oefeningen gaat geheel over deze les. We maken deze individueel of klassikaal afhankelijk van de groep. 1. Maak een nieuw overzicht aan. 2. Kies voor inhoud van het type schilder 3. Kies als formaat Raster van Velden 4. Leg een menulink in het hoofdmenu 5. In het overzicht dienen volgende velden aanwezig te zijn: 1. Titel: geen label, HTML van het veld: H1 2. Afbeelding van de schilder: Geen label, afbeeldingsstijl: gemiddeld 3. Body: ingekort 300 tekens, HTML van het veld: H4 Bij de afbeeldingen zitten er soms meer dan 1, wij willen maar 1 afbeelding. Klik op het veld afbeelding bij Meervoudige veldinstellingen pas aan: Resultaat: Drupal Basis Lander Carrijn 72

73 Les 7 Instap Pas even de header aan van het thema en zorg ervoor dat er geen websitenaam en slogan te zien is. CSS en views: schilderijen Ons eerste overzicht in de vorige les bestond uit het tonen van de verschillende schilderijen onder elkaar. We hadden daarbij ook de titel en een stuk tekst gezet. Kijk je nu naar dat resultaat dat kan je stellen dat dit mooier kan wat betreft het uitzicht. In dit stuk bespreken we de verschillende opties. 1. Download HIER de nodige code en andere bestanden. 2. Maak een nieuwe CSS regel aan op basis van vorige stap. 3. Wanneer je de vorige stap tot een goed einde hebt gebracht dan heb je dus een nieuwe CSS-regel staan. Deze doet echter niets als je deze niet toepast op het overzicht. 4. Ga achter de schermen van het overzicht en koppel de verschillende classes aan het juiste veld. De naam van deze classes werden zelf bepaald bij het schrijven van de code. De truc is om deze nu te typen bij het juiste veld ZONDER puntje. Voor het veld afbeelding zou dat zijn: Drupal Basis Lander Carrijn 73

74 CSS en views: schilders Vooraf Zorg ervoor dat er in het hoofdmenu geen losse schilders en schilderijen te zien zijn. Home, schilders en schilderijen is meer dan voldoende. Afbeeldingsstijl We hadden het eerder al opgemerkt dat de afbeeldingen van de schilders niet dezelfde afmetingen hebben ondanks onze instellingen (Miniatuur, Gemiddeld, Large). De reden hiervoor is dat de afbeeldingen in verhouding worden aangepast. Kies je bijvoorbeeld Large (480x480) dan wordt 1 zijde op 480px gezet en past de andere zijde zich in verhouding aan, dus niet per definitie 480px. We maken een nieuwe stijl aan specifiek voor onze schilders We gebruiken hier voor de eerste maal Converteren. Straks gaan we met CSS de hoeken afronden. Wanneer je niet converteert naar PNG dan zal je de rechte hoeken blijven Drupal Basis Lander Carrijn 74

75 zien als je bijvoorbeeld de achtergrond van de body gaat aanpassen.ronde hoeken met CSS Detail Wat mij hier stoort is het feit dat alle foto's van de schilders zwart-wit zijn behalve eentje. Zorg dat je bij Van Gogh de volgende foto toevoegt: Wanneer je vervolgens naar het overzicht gaat kijken dan zie je geen verandering. De reden hiervoor is de volgorde. Eerder bepaalde je dat je de eerste foto wil vertonen, startende van 0. Dan moet je uiteraard jouw favoriete foto op de eerste plaats gaan zetten bij de node: CSS --> je doe doet dit met de grijze kruisjes voor de afbeeldingen Op dit moment is het overzicht qua uitzicht nog niet alles. Met de nodige CSS passen we dit aan. Als je goed kijkt op dit overzicht dan zie je enkele onderdelen: De titel De afbeelding De tekst Het gehele raster Drupal Basis Lander Carrijn 75

76 Voor elke onderdeel passen we CSS toe. Deze worden hieronder in aparte onderdelen besproken maar alles van code steek je uiteindelijk in één regel: CSS overzicht schilders De titel We willen de titel groter en in een andere kleur. De code hiervoor is niet zo moeilijk: De benaming van de classe bepaalde ik zelf De kleur is hier benoemd, maar kan evengoed een HEX-code zijn De grote van de tekst is uitgedrukt in punten De afbeelding Graag ronde hoeken: Als het gaat over een afbeelding moet je duidelijk bij de klasse noteren vandaar 'img' Met radius wordt de straal bedoelt van de afronding Door de marge aan de top plakken ze niet meteen tegen elkaar De tekst De tekst is breed uitgesmeerd onder de foto, beter zou zijn om deze even breed te maken als de afbeelding: BELANGRIJK! We werken hier niet met een aangemaakte klasse maar spreken hier rechtstreeks de klasse paragraaf aan (p). Als we dit hier niet binnen te perken houden dan wordt dit toegepast op alle paragrafen op onze site. Geloof mij, dat zijn er veel. Daarom gaan we deze CSS regel enkel laten gelden wanneer de bezoeker de pagina van de schilders bekijkt. Dit kan je onderaan de CSS-regel instellen: Drupal Basis Lander Carrijn 76

77 Het gehele raster Een laatste optie om ons overzicht wat te verfraaien is het centreren van de inhoud in ons raster. 1. Open opnieuw de instellingen van het overzicht 2. Klik nu op instellingen naast raster bij het formaat: 3. Vervolgens vul je bij Aangepaste kolom-klasse de klasse views-align-center in. Dit zal ervoor zorgen dat alles netjes gecentreerd wordt. Dit is iets dat je niet zomaar kan uitvinden. Dergelijke klasses bestaan. De truc is om deze vanaf nu te onthouden Sla alles op en bekijk het resultaat. 5. Helaas, de tekst staat hierdoor niet meer mooi onder de foto. Dit heeft te maken met de instelling van de marges. We willen dat dit gewoon automatisch gebeurd. Hiervoor pas je even de CSS aan: Filtercriteria toevoegen Deze oefening maken we in het overzicht van de schilderijen. Eerder hadden wij bij elk schilderij ook de kunststroming toegevoegd. Leuk zou dus zijn moest de bezoeker van de site een kunststroming kan selecteren en vervolgens enkel die schilderijen ziet. Dat kan dus! Drupal Basis Lander Carrijn 77

78 1. Open de instellingen van het overzicht schilderijen 2. We voegen eerst het veld kunststroming toe. Kies daarvoor bij de velden 'Toevoegen' Bij Search kan je vervolgens zoek naar het juiste veld: 3. Vink Kunststroming aan en pas toe 4. Bij de instellingen passen we twee zaken aan: 5. Bij de stijlinstellingen pas je de HTML van het veld aan naar H5 Dit keer gaan we ook de resultaten herschrijven. De bedoeling is dat er bij elk schilderij de zin verschijnt: 'De kunststroming hier is <naam kunststroming>. Dat is aangenamer dan niets of het gebruik van een label: 6. Klik Resultaten herschrijven open 7. Zet een vink bij Uitvoer van dit veld herschrijven. 8. Bij Tekst kan je nu schrijven wat je wilt. Je gaat namelijk de uitvoer herschrijven. Typ hier de zin 'De kunststroming hier is'. 9. Om vervolgens telkens de juiste stroming te zien moet je de Vervangingspatronen gebruiken. Kopieer hier {{ field_kunststroming }} en plak dit achter de zin (vergeet de spatie niet) 10. Sla dit geheel vervolgens op Drupal Basis Lander Carrijn 78

79 11. Het resultaat kan tegenvallen. In mijn geval stond het nieuwe veld half verborgen achter de titel van het schilderij. Probeer dit even zelf op te lossen aan de hand van volgende tips: 1. Nieuwe klasse aanmaken 2. Marges juist instellen 3. Nieuwe klasse koppelen 4. Alles plaats je in de bestaande CSS-regel van de schilderijen Merk hier ook op dat de naam van de stroming als link wordt getoond. Bekijk even het overzicht op de site en klik op een link. Plots zie je enkel de schilderijen van die stroming. Let wel. Dit is nog steeds niet onze aanpasbare filter! Deze passen we hieronder toe: Open de instellingen van het overzicht Bij filtercriteria klik je op Toevoegen Zoek in het Search-veld naar het juiste veld en vink aan, gevolgd door een klik op filtercriteria toevoegen en instellen We stellen deze filter nu stap voor stap in. Drupal Basis Lander Carrijn 79

80 Kies eerst voor een Keuzelijst, dat is aangenamer voor de gebruiker. Merk hier ook op dat je nu de juiste woordenlijst moest hebben (Taxonomie) In het volgende venster bepalen we dat deze filter door de bezoeker gebruikt kan worden: Een beetje lager pas je ook het label aan, dat is hetgeen dat verschijnt bij de filter, zichtbaar voor de gebruiker: Sla nu alles op, ook het overzicht en test uit! Je zal merken dat dit beter kan. De filter werkt wel maar de knop Apply is zeer storend. En dit los van het feit dat hij overlapt met de titel. We willen namelijk dat wanneer er een stroming wordt gekozen deze automatisch de pagina aanpast. Helaas is dit nog steeds niet mogelijk in Drupal 8. Gebruik je Drupal 7 dan is dit geen enkel probleem. We wachten geduldig af. Uitsmijter Het is tegenwoordig een Europese richtlijn: het melden van het gebruik van Cookies. Hier bestaan veel verschillende modules voor. Ik bespreek er eentje: 1. Installeer en activeer de module 2. Maak een pagina aan waar je de gebruiker naartoe stuurt als ze klikken op 'ik wens meer informatie' 3. Ga naar de instellingen van de module Drupal Basis Lander Carrijn 80

81 4. Bij de instellingen hoef je maar twee zaken zeker te doen: Zet een vink bij Pop-up tonen Geef de URL in waarin jouw cookie-beleid staat uitgeschreven --> Aan jullie om de knop Apply nu mooi weer te geven. Uiteraard gaat het hier over margin-bottom maar welke klasse dien je aan te spreken? Ga je dit op alle pagina's toepassen? Drupal Basis Lander Carrijn 81

82 Les 8 Trusted Host Settings Een fout die we al een tijdje zien staan bij de statusrapportage is die van de Trusted host settings. We lossen dit even op in dit eerste deel. 1. Log in op de server via het cpanel. 2. Open vervolgens de file manager 3. Open de map van jouw sub domein. 4. Open nu de map sites. 5. Pas de schrijfrechten aan van de map default naar Open de map default 7. Pas de schrijfrechten aan van het bestand settings.php naar Zorg dat het bestand settings.php geselecteerd staat en kies bovenaan de Code editor, klik dan in de pop-up op Edit 9. Het bestand settings.php gaat open! 10. Ga op zoek naar de trusted host settings (Ctrl + F) Drupal Basis Lander Carrijn 82

83 11. Je merkt dat de code in een groene kleur staat, dit wil zeggen dat deze niet wordt toegepast. Verder is dit ook een voorbeeld dat we nu dienen om te vormen voor onze site. Wanneer ik dat zou doen voor dan zou de code er als volgt uitzien: 12. Pas de code aan, toegepast op jouw site. Sla dit vervolgens op nadat je alles een tweede keer hebt gecheckt! 13. Wat ons nu nog rest is het opnieuw aanpassen van de schrijfrechten. Dit voor settings.php maar ook voor de map Default. Pas aan naar 0555 / Sluit voorlopig niets af. Keer terug naar jouw site en bekijk de statusrapportage: Drupal Basis Lander Carrijn 83

84 Views (Deel 3) Entity reference Met de module Entity Reference kunnen we linken leggen tussen twee inhoudstypes. Het doel van deze oefening is dat we uiteindelijk bij het overzicht van de schilderijen ook de naam en afbeelding krijgen van de schilder. Daarvoor moeten we eerst ons inhoudstype aanpassen, vervolgens komt er een relatie te liggen op ons overzicht. Inhoudstype aanpassen 1. Open de het veldenbeheer van het inhoudstype schilderijen 2. We voegen een veld toe 3. De keuze van ons veldtype is hier belangrijk. We willen refereren naar bestaande inhoud. Kies daarom dus voor Referentie-Inhoud 4. Geef een passend label en klik Opslaan en doorgaan Drupal Basis Lander Carrijn 84

85 5. Het eerste instellingsveld geeft ons de kans eventuele fouten recht te zetten en je bepaald ook het aantal toegestane waarden. In dit geval is er maar 1 schilder per schilderij. 6. In het volgende venster bepalen we vervolgens welke inhoud er gebruikt kan worden: 7. Na opslaan zien we ons resultaat. Merk op dat we in dit inhoudstype ook reeds een referentie naar een term hebben. Deze werd gebruikt om te categoriseren volgens kunststroming. Inhoud aanpassen De kast is reeds voorzien van een nieuwe 'lade'. Nu is het aan ons om de bestaande inhoud (lees: schilderijen) aan te passen. 1. Open een schilderij naar keuze, gebruik de menulink 2. Klik bovenaan op de knop bewerken (enkel aanwezig indien ingelogd) Drupal Basis Lander Carrijn 85

86 3. Merk nu op dat je onderaan een nieuw veld hebt bijgekregen: Schilder 4. Het nadeel hier is dat dit ingesteld staat als automatisch aanvullen. Probeer maar eens met de eerste letter van een schilder. Hier is dat op zich geen probleem, maar als het gaat over 100 schilders dan is dit niet zo handig. We passen dit even aan in het inhoudstype. Open de instellingen van het inhoudstype Schilderijen en kies bovenaan voor Formulierweergave beheren. Dat is namelijk de plaats waar je kan instellen op welke manier de data moet worden ingevoerd. 5. In het verschenen venster pas je nu het veld schilder aan van automatisch aanvullen naar Keuzevakjes/keuzerondjes 6. Sla dit even op en bewerk opnieuw een schilderij naar keuze. Merk op dat het veld aangepast is, je kan nu eenvoudiger de schilder bepalen 7. Nu is er even wat werk. Elk schilderij moet nu worden voorzien van zijn schilder. Gebruik onderstaande lijst: 1. De Rust Van Gogh 2. Bal du Moulin de la Galette Renoir 3. Der Kuss Klimt 4. Impression, soleil levant Monet 5. De Intrige Ensor 6. Guernica Picasso Drupal Basis Lander Carrijn 86

87 Relatie toevoegen Vanwege het feit dat we eerder een referentie naar inhoud hebben gelegd kunnen we nu deze relatie gaan toevoegen op ons overzicht. Merk hier dus op dat onderstaande pas mogelijk is als je eerst een referentie naar inhoud hebt gemaakt bij het inhoudstype. 1. Open de instellingen van ons overzicht schilderijen 2. Klik de opties onder uitgebreid open Klik bij de relaties op toevoegen 3. Kies nu voor de juiste relatie, let op, vergissen is hier best mogelijk. We dienen hier te kiezen voor een relatie waar er verwezen wordt naar iets anders vanuit het veld schilder dat voorkomt in de node schilderijen. 4. Voeg deze even toe en in het volgende venster mag je gewoon Apply klikken 5. We voegen nu opnieuw velden toe. Bij de velden klik je op toevoegen en je kiest voor het veld titel. Het is belangrijk dat je nu bij het instellingsvenster van dit veld de relatie legt. Door deze relatie te gebruiken zal niet de titel van het schilderij verschijnen maar wel de titel van de gerefereerde schilder. In ons geval dus de naam van de schilder. Drupal Basis Lander Carrijn 87

88 6. Voeg nu opnieuw een veld toe: afbeelding. Leg ook hier de relatie en gebruik ons eerder gemaakte afbeeldingsstijl Grafische aanpassingen We maken het geheel wat aantrekkelijker. Zo zorgen we voor een herschrijving van het veld titel (naam van de schilder) en een mooie weergave van de foto van de schilder. 1. Klik op het veld titel (met de relatie) 1. Haal het label weg 2. Kies bij de stijlinstellingen voor HTML van het veld aanpassen en opteer voor H3 3. Herschrijf de resultaten zodat er uiteindelijk verschijnt: 'Geschilderd door <naam van de schilder>' 2. Voor de afbeelding maken we eerst een nieuwe afbeeldingsstijl: 3. Keer terug naar de instellingen en pas het veld aan met de foto van de schilder naar onze nieuwe afbeeldingsstijl Drupal Basis Lander Carrijn 88

89 4. Op de afbeelding van het schilderij zien we wat schaduw. Zorg ervoor dat deze schaduw ook te zien is op de foto van de schilder Oefening We hebben reeds een overzicht van de schilders en de schilderijen. Bij de inhoud hebben we ook een reeks musea zitten. Die gieten we in deze oefening in een overzicht. Volg de stappen chronologisch en dit zou moeten lukken. 1. Voeg een nieuw overzicht toe 2. Gebruik onderstaande checklist voor de instellingen o o o o o Titel: Musea Inhoud van het type musea Pagina maken Onopgemaakte lijst van velden Menulink in main-navigation/hoofdnavigatie 3. Standaard zie je onderaan het voorbeeld staan, het titel veld is reeds aanwezig. Klik nu bij velden toevoegen 4. Gebruik het search veld om te filteren ('musea') en vink de nodige velden aan: Drupal Basis Lander Carrijn 89

90 5. Wanneer je nu klikt velden toevoegen en instellen dan krijg je venster na venster de instellingen van de aangevinkte velden. Onderstaande lijst toont de verschillende instellingen van elk veld: o o o o Adres o opmaakhulpmiddel: Google map from one-line address o breedte: 280 hoogte: 220 o zoomniveau: 18 Afbeelding o Afbeeldingsstijl: schalen en bijsnijden 200 x 180 Body o Opmaakhulpmiddel: ingekort o 250 tekens Titel o HTML van het veld: H1 6. Verwijder het veld adres 7. Sla alles op en bekijk het voorlopige resultaat. We merken op dat we het veld body hebben toegevoegd maar we zien hiervan niets terug. Reden? Er werd geen body ingevuld bij de nodes. Download dit bestand om elk museum te voorzien van een body (uitleg). Klik hiervoor op Inhoud en bewerk telkens een museum. 8. Bekijk het overzicht. Dit zou een voorlopig resultaat moeten zijn: Drupal Basis Lander Carrijn 90

91 9. Zorg dat er in plaats van gewoon de naam van het land verschijnt: 'Gelegen in <naam van het land>' 10. Zorg voor een bruikbare filter boven het overzicht zodat de gebruiker de musea kan filteren op het land 11. De afbeelding krijgt een schaduw, dit kan je doen door de bestaande CSS te hergebruiken maar deze heeft een rode kleur, maak daarom een nieuwe aan (zie punt 12) met een andere kleur. 12. Je merkt nu dat er te weinig plaats is tussen de afbeelding en de body, de tekst komt in de schaduw te staan. Dit kan je aanpassen bij de nieuw gemaakte code. Je hebt deze code staan:.schaduw img { box-shadow: 10px 10px 5px #888888; } Daarvan maak je:.schaduw img { box-shadow: 10px 10px 5px #888888; margin-bottom:15px; } 13. Om het geheel nu nog aantrekkelijker te maken zorgen we ervoor dat de musea naast elkaar staan en dat deze in een kader zitten. Kopieer onderstaande code en plak deze in een nieuwe CSS-regel ('CSS overzicht musea').musea{ float:left; border:4px solid #0072b0; border-radius:15px; padding:5px; Drupal Basis Lander Carrijn 91

92 } margin:10px; box-shadow: 5px 5px 10px #888888; height:420px; width:420px; text-align:center; 14. Om dit ook toe te passen keer je terug naar de instellingen van het overzicht. Klik vervolgens op instellingen bij de onopgemaakte lijst en noteer bij de rijklassen de nieuw gemaakte CSS-klasse 15. Wanneer je naar het resultaat kijkt dan ziet dit er al veel beter uit. Er zit wat niveauverschil door de langere titels van sommige musea. Dit lossen we simpel op. Ga naar de node en pas de titels aan: Museo Nacional Centro de Arte Reina Sofia Reina Sofia Koninklijk Museum voor Schone Kunsten Antwerpen Koninklijk Museum Antwerpen 16. Maak een nieuwe afbeeldingsstijl aan: 17. Open de instellingen van het overzicht Musea en pas bij het veld afbeelding de afbeeldingsstijl aan naar schalen en bijsnijden 260 x 220 We zorgen ervoor dat er bij de Musea ook een afbeelding komt te staan van het schilderij. Hiervoor moeten eerst het inhoudstype aanpassen, vervolgens de inhoud en tot slot leggen we een relatie bij het overzicht om het veld afbeelding vervolgens toe te voegen. 1. Ga naar velden beheren van het inhoudstype Musea 2. Voeg een veld toe: Drupal Basis Lander Carrijn 92

93 3. Ga nu via inhoud bij elke node van de musea het schilderij gaan aanvullen: Bal du Moulin de la Galette: Musee d'orsay De Intrige: Museum voor schone kunsten Antwerpen Der Kuss: Belvedere Guernica: Reina Sofia Impression, soleil levant: Marmottant Monet De Rust: Musee d'orsay 4. Ga naar de instellingen van het overzicht Musea en voeg een relatie toe: 5. Opnieuw voegen we nu bij de velden het veld afbeelding toe maar dit keer leggen we de relatie. De afbeeldingsstijl hier is gemiddeld 220 x Uiteindelijk kunnen we nog de hoogte van de kaders aanpassen in de CSS, die zijn namelijk op het randje: Wijzig de height naar 500px Drupal Basis Lander Carrijn 93

94 7. Zorg nog voor de afwerking in het menu, de musea komen als linken tevoorschijn onder de kop Musea Drupal Basis Lander Carrijn 94

95 Les 9 Inleiding Vorige week zagen we de release van (ondertussen al 8.4.2) dat was voor mij reden om de kern up te daten. Wanneer je dit gaat doen met Softaculous, de script-installer, dan MOET je achteraf het updatescript draaien. Da doe je door in te loggen op jouw site en vervolgens.../update.php achter de URL te gaan typen. Ik demonsteer. Nieuw thema Als oefening en omdat we houden van verandering passen we het thema aan van onze site. We doen dit een logische volgorde: 1. Installeer het nieuwe thema NewsPlus Lite 2. Stel het thema in als standaard 3. Ga naar de homepage wanneer je het thema als standaard hebt ingesteld 4. Ruim de blokken op. Sommigen zijn overbodig, anderen staan er dubbel op en hier en daar pas je best de volgorde aan. 5. Uiteindelijk heb je volgend resultaat: (Op bovenstaande foto staat het blok 'tabs' niet op de juiste plaats) 6. Pas de slogan aan naar 'About painters and paintings' 7. Verberg de naam en het logo van de website 8. Download volgende afbeelding naar de harde schijf van de computer: 9. Download, installeer en open FileZilla 10. Graag hadden we het schilderij Guernica als achtergrond gebruikt voor de banner. Helaas gaat dit niet door de foto up te loaden naar de mag images van het thema. Drupal Basis Lander Carrijn 95

96 Wel gaan we deze uploaden bij de css-files om vervolgens een css regel op te stellen bij de injector. 11. Volgende regel is het sjabloon voor onze code:.naamvandeklasse of #id { background-image: url("paper.gif"); } 12. Laat ons bovenstaande code eerst even projecteren op ons project. 13. Klaar? Nu moet je enkel nog de afbeelding op de juiste plaats krijgen op de server. Open daarvoor FileZilla of een ander FTP-programma 14. Navigeer nu naar jouwdomein/sites/default/files/asset_injector/css in deze map plaats je nu guernica.jpg 15. Controleer even het resultaat 16. De slogan van onze site is niet echt leesbaar. Zorg dat deze wat groter staat en dezelfde kleur krijgt als de menubalk (Gebruik font-weight:bold; om de slogan in het vet te zetten.) Afbeeldingsgallerijen In dit eerste onderdeel bespreken we een aantal modules om afbeeldingen op een elegante manier te vertonen op een website. Je zal hiervoor modules moeten installeren die vaak ook niet werken zonder een plugin of third party. Voorbereiding 1. Download en installeer de volgende modules: JuiceBox Fotorama Drupal Basis Lander Carrijn 96

97 2. Download via onderstaande link de nodige plugins/third party-bestanden voor de modules, deze zullen we later samen op de server plaatsen klik hier voor de plugins 2. Zorg ervoor dat de plugins uitgepakt in de map downloads staan Plugins Voor JuiceBox en Fotorama heb je plugins nodig. In dit stuk bespreken we nog eens de werkwijze om deze op de server te krijgen. 1. Open FileZilla en log in op de server. Inloggegevens worden in de klas bezorgt. 2. Zorg dat je in het linkervenster de eerder gedownloade mapjes 'fotorama' en 'juicebox' ziet staan. Het rechtervenster toont dan weer de map libraries op de server: 3. Selecteer nu beide mappen in het linkervenster, klik rechts en kies voor uploaden. (NOTE: slepen kan hier ook) Fotorama Een leuke manier om foto's te vertonen. En dit volledig responsive! Installeer hiervoor de module en weet dat hier de eerder geuploadde plugin ook een rol speelt. 1. Pas bij de weergave van het inhoudstype Schilder het formaat van het veld afbeelding aan naar Fotorama Drupal Basis Lander Carrijn 97

98 2. Kijk bij de instellingen en zorg ervoor dat er boven de getoonde foto thumbnails verschijnen van de andere foto's: JuiceBox JuiceBox is een alternatieve module oor Colorbox. Je zal merken dat deze module de foto's ook op een aantrekkelijke manier kan weergeven, zij het lichtjes anders dan Colorbox. 1. Ga opnieuw naar de weergave-instellingen van de schilders. 2. Pas vervolgens het formaat aan naar Juicebox-gallerij 3. Sla dit meteen op en bekijk het resultaat in het andere venster. 4. Wanneer je nu op het tandwiel klikt naast het veld afbeelding krijg je een reeks instellingen voor de JuiceBox. We overlopen deze klassikaal, uiteindelijk zou je onderstaande instellingen kunnen overnemen: Drupal Basis Lander Carrijn 98

99 5. Het enige wat nu nog stoort is de 'merknaam' in de rechterbenedenhoek. Het zou leuker zijn moest deze niet zichtbaar zijn. Maak een nieuwe css-regel aan en plaats er onderstaande code in:.jb-classifier-link-wrapper + div { opacity: 0; visibility: hidden; } Youtube Field Iets helemaal anders. We bekijken in dit stuk de mogelijkheid om een filmpje van Youtube weer te geven op de website. Het voor deel hier is dat het filmpje niet op de server komt te staan. Dit zal resulteren in een lichtere site. 1. Download en installeer de module Youtube Field 2. Ga naar het veldenbeer van het inhoudstype Schilders en voeg een nieuw veld toe. Door de module kan je nu kiezen voor 'Youtube-video' 3. Voor we ons nieuwe veld kunnen invullen moeten we eerste een filmpje hebben. 4. Klik HIER voor een filmpje over Pollock 5. Klik rechts op het geopende filmpje en kies Video-URL kopiëren Drupal Basis Lander Carrijn 99

100 6. Keer terug naar de site en ga naar het museum in kwestie. Vervolgens kan je die node gaan bewerken. Merk nu op dat je inderdaad een veld Filmpje hebt bijgekregen. Plak de eerder gekopieerde URL in dat veld: 7. Sla op en bekijk het resultaat. 8. Tot slot bekijken we nog even de instellingen van dit veld. Dit dien je te doen bij de weergave van het inhoudstype Musea. Klik vervolgens op het tandwiel naast het bewuste veld: Zoals je kan zien heb ik bepaald dat er geen titel of andere info van de uploader te zien is, er is geen play-knop te zien wanneer de video afgespeeld wordt en er verschijnen geen annotaties op het filmpje. Merk ook op dat je de afmetingen van het filmpje kan aanpassen. Opdracht Zorg ervoor dat: A. Er een veld video-veld wordt toegevoegd bij het inhoudstype Musea B. Er minstens één museum wordt voorzien van een filmpje C. Er op de homepage vier blokken verschijen zoals in onderstaand beeld: Drupal Basis Lander Carrijn 100

101 Les 10 Afwerken les 9 De vorige les eindigden we met een oefening waar nieuwe blokken werden aangemaakt. We willen hier twee aanpassingen doorvoeren: kleur geven met CSS en i.p.v. een getypt adres hadden we graag een kaartje gezien. Nieuwe bloksoort 1. Op dit moment hebben we één bloksoort met daarin één veld: de body --> 2. Klik nu op + Aangepast bloktype toevoegen om een nieuwe soort aan te maken 3. Geef deze een naam en eventueel een beschrijving 4. Eens het nieuwe blok is aangemaakt kan je velden beheren 5. We willen een veld waarin we een adres intypen om vervolgens als kaart te laten verschijnen. Iedereen weet dat je dan een tekst (plat) - veld moet nemen Drupal Basis Lander Carrijn 101

102 6. Als het veld een feit is, kijk dan meteen bij de weergave en pas aan --> --> Nieuw blok aanmaken Nu onze nieuwe bloksoort een feit is kunnen we een nieuwe blok aanmaken van deze soort. Om problemen te vermijden gaan we eerst ons eerder aangemaakte blok 'Contact' verwijderen 1. Ga naar de Aangepaste blokken-bibliotheek 2. Verwijder het blok 'Contact' 3. Voeg nu een aangepast blok toe Drupal Basis Lander Carrijn 102

103 4. Merk op dat je nu moet kiezen welke soort je wil gaan aanmaken, kies voor onze nieuwe bloksoort 5. Voeg nu de nodige info aan, het veld body heb ik zelfs leeggelaten. CSS Footer Om de footer wat meer te laten opvallen geven we deze een passende kleur. Ik heb hiervoor mijn bestaande regel 'CSS NewsLite' gewoon aangevuld. Om te weten wat ik moet bewerken heb ik de inspector gebruikt. --> We maken deze oefening klassikaal Opdrachtje tussendoor Zorg voor volgende homepage, de foto kan je HIER downloaden Drupal Basis Lander Carrijn 103

104 Views Slideshow Met de module kan je in blokformaat een leuke slideshow maken. Deze kan je bijvoorbeeld gebruiken op de homepage als blikvanger. 1. Installeer de module Views Slideshow, het is third party maar ik heb de plugin voor jullie reeds op de server geplaatst. 2. We maken een nieuw overzicht aan. Gebruik onderstaande afbeeldingen om de eerste stap zelf uit te voeren: Drupal Basis Lander Carrijn 104

105 3. Voeg nu eerst het veld afbeelding toe. Kies voor een Responsivie Image en als stijl ga je voor Wide. Drupal Basis Lander Carrijn 105

106 4. Het veld titel is hier overbodig, we gaan het uitsluiten van weergave 5. Tot slot verwijderen we ook de titel van het overzicht. Dit is anders zichtbaar op het eindresultaat 6. Onderaan zie je de diavoorstelling reeds in werking. Klik even bij Instellingen naast Diavoorstelling. Je zal zien dat je nog het één en ander kan regelen. We overlopen dit klassikaal. Drupal Basis Lander Carrijn 106

107 7. Het blok is af. Het enige dat we nu moeten doen is het een plaats geven. Ga daarvoor naar structuur - blok-layout 8. Ga op zoek naar het blokgebied 'Page Intro' en kies 'blok plaatsen'. Drupal Basis Lander Carrijn 107

108 9. Ga in de verschenen lijst op zoek naar het zonet gemaakte blok en kies 'Blok plaatsen'. 10. We willen liever geen titel zien 11. Tot slot bepalen we in het volgende venster dat dit blok enkel zichtbaar mag zijn op de front-page: 12. Sla alles op en bekijk het resultaat. Captcha Je kent het wel, sites waarin er gevraagd wordt een bepaalde reeks tekens in te voeren om te bewijzen dat je geen robot bent. Dit heet Captcha. Het wordt gebruikt ter beveiliging van een site. Een programma kan deze tekens namelijk niet interpreteren. Het is lastig maar een effectieve veiligheidsmaatregel. 1. Download en installeer eerst de module 2. Je kan nu de instellingen van de Captcha-module openen: Drupal Basis Lander Carrijn 108

109 3. Eerder heb je twee soorten captcha geactiveerd. Deze kan je nu in het instellingsveld kiezen: 4. Nu dienen we de module te activeren op de inlogpagina. Dit doe je bij de Captcha Points Zoek de inlogpagina en schakel de captcha in 5. Klik nu op Bewerken om de captcha te specificeren. Je kan hier opnieuw kiezen tussen een afbeelding of rekensom 6. Wanneer je nu uitlogt en opnieuw gaat inloggen krijg je afhankelijk van de instellingen de rekensom of afbeelding: Drupal Basis Lander Carrijn 109

110 Herhalingsoefening We zetten net over de helft van deze module. Daarom lassen we hier een herhalingsoefening in. De bedoeling is dat je op jouw eigen tempo eens gaat kijken hoever je reeds geraakt met Drupal. Doorloop in chronologische volgorde de deel opdrachten en een goed resultaat is zeker mogelijk. 1. Download de nodige bestanden 2. Schakel alle menu-linken van ons thema Schilders en Schilderijen uit. Dit kan je doen via Structuur - Menu's - Hoofdnavigatie. Door de hoofdlinken uit te vinken en op te slaan verberg je meteen ook alle onderliggende linken. 3. In de gedownloade bestanden vind je een nieuwe banner voor de frontpage. 1. In bepaalde thema's zou je dit met filezilla kunnen uploaden op de server 2. In ons huidig thema gaat dat helaas niet, zorg ervoor dat de banner verschijnt met CSS 4. De slogan van de site mag zichtbaar blijven maar voer volgende aanpassingen door: 1. tekst: 'About bands and members' 2. Kies een andere kleur en een groter lettertype voor de leesbaarheid Drupal Basis Lander Carrijn 110

111 5. Maak een nieuw inhoudstype aan: Band. Gebruik onderstaande afbeeldingen voor de velden: (--> Vergeet Auteur en datum niet uit vinken) (--> Gebruik bij voorkeur bestaande velden) 6. Voeg nu inhoud toe van het type Band. Gebruik de gedownloade bestanden. 1. The Beatles + groepsfoto 2. The Rolling Stones + groepsfoto 3. Pink Floyd + groepsfoto Drupal Basis Lander Carrijn 111

112 7. Zet bij de weergave het label van het veld Afbeelding verborgen 8. Zorg ervoor dat er in het menu drie linken terug te vinden zijn: 9. Gebruik PathAuto Bulk Generate om de url-aliassen van de drie bands aan te passen. Als je kijkt in de adresbalk zijn die op dit moment.../node/31 bijvoorbeeld. Dit moet worden.../band/thebeatles bijvoorbeeld. 10. Maak een nieuwe afbeeldingsstijl aan: Drupal Basis Lander Carrijn 112

113 11. Pas deze afbeeldingsstijl toe op het veld afbeelding van het inhoudstype band, doe dit bij de weergave. 12. In de gedownloade bestanden vind je een afbeelding terug 'music.gif' dat is een klein fotootje dat we gerepeated willen zien verschijnen op de homepage (ENKEL op de homepage): 13. Kijk op de homepage met de element inspector naar de naamgeving van dit gebied. Test even uit door de achtergrond-kleur te wijzigen, dan weet je zeker dat je het juiste gebied gevonden hebt. 14. Kopieer of onthoud die naam en maak een nieuwe CSS-regel aan, geef deze een voor jou logische naam. 15. Zorg ervoor dat als achtergrond de afbeelding music.gif verschijnt 16. Dit mag enkel op de homepage het geval zijn! 17. De homepage is nu nog afgestemd op onze schilders. Pas daarom aan zoals op onderstaande afbeelding. Wil je graag dezelfde afbeelding klik dan HIER Drupal Basis Lander Carrijn 113

114 18. Om ook dezelfde kleuren en opmaak te verkrijgen moet je gaan roeren in de HTMLsoep, roep deze op met de knop Broncode. De volgende screenshot toont mijn code, niet zo proper, maar ze werkt wel. 19. Op de homepage staat ons blok met schilderijen nog te draaien. We gaan dit vervagen door hetzelfde maar dan met de bandleden. 1. Verberg eerst het blok met de schilderijen 2. Gebruik nu de lesinhoud van het eerste deel van deze les om een blok te maken met daarin een diavoorstelling. Deze komt op de FrontPage. Een aantal tips: 1. Het gaat hier over een overzicht van het inhoudstype bands, geen pagina, wel een blok 2. Plaats het blok in de het juiste blokgebied 3. Het blok is enkel zichtbaar op de FrontPage 4. Je zal een nieuwe afbeeldingsstijl moeten aanmaken Drupal Basis Lander Carrijn 114

115 OPMERKINGEN: 1. Op het moment van schrijven werken we met versie Focal Point werkt hier voorlopig niet 3. Ik merk da na een aantal cron-uitvoeringen, refreshes en cache flushes de background-images verdwijnen van de server. Drupal Basis Lander Carrijn 115

116 Les 11 Herhalingsoefening (Deel 2) We werken verder aan onze site rond het thema muziek. Aan de hand van concrete opdrachten herhalen we geziene leerstof. Hierna bouwen we met nieuwe kennis verder aan de site. 1. Maak een nieuw inhoudstype aan: bandleden 2. Voeg volgende velden toe: 1. Afbeelding: bestaand veld, geen speciale instellingen 2. Band: referentie naar inhoud, refereer naar het inhoudstype 'Band' 3. Vergeet bij de formulierweergave niet om het afbeeldingsveld op Focal Point te zetten en keuzerondjes aan te zetten bij de band 4. Uiteindelijk resultaat: 5. Stel ook de weergave correct in. Hiervoor zal je een nieuwe afbeeldingsstijl moeten maken: Drupal Basis Lander Carrijn 116

117 6. Nu komt er een beetje bandwerk aan te pas. Je zal nu alle bandleden moeten toevoegen. Gebruik hiervoor de bestanden van vorige les. Let hier telkens op het volgende: 1. Focal Point goed leggen 2. Alt-tekst niet vergeten 3. Aanduiden bij welke band de muzikant speelt 4. Een Menu-link leggen 7. Voorbeeld: Drupal Basis Lander Carrijn 117

118 8. Met PathAuto Bulk Generate zorg je ervoor dat er URL-aliassen worden aangemaakt voor de bandleden. Superfish We zitten met een probleem. Wanneer je nu over een menulink gaat verwacht je dat daar de onderliggende menulinken te zien zijn. Helaas, dat blijkt niet te werken. Ookal zit alles goed zoals 'uitgeklapt weergeven' en het 'maximale aantal sub niveaus'. Gelukkig bestaat er een leuke module die dit gaat oplossen: Superfish. 1. Download en installeer de module 2. Plaats de plugin op de server (staat al op de server van de cursisten Drupal Basis, Dendermonde, sem ) 3. Ga naar structuur - blok-layout 4. Klik bij het blokgebied navigatie op Blok plaatsen 5. Zoek in de lijst naar Hoofdnavigatie van de categorie Superfish 6. We overlopen de instellingen klassikaal, het zijn er veel om uit te testen! 7. Uiteindelijk zitten we met twee soorten menu's in hetzelfde blokgebied. Schakel de niet-superfish versie uit 8. Bekijk het resultaat Drupal Basis Lander Carrijn 118

119 Herhalingsoefening (Deel 3) 1. Voor de volgende oefening maak je eerst nog even twee afbeeldingsstijlen aan: 2. We maken een overzicht aan die de bands met hun leden weergeven. Een relatie zal hier nodig zijn. Gebruik onderstaande afbeelding voor de basisinstellingen: Drupal Basis Lander Carrijn 119

120 3. Leg eerst de relatie: (te vinden onder Uitgebreid) 4. We voegen nu het veld afbeelding toe en we leggen de relatie, gebruik de correcte afbeeldingsstijl: Drupal Basis Lander Carrijn 120

121 5. Voeg opnieuw het veld afbeelding toe, dit keer gebruik je de relatie niet, let op de afbeeldingsstijl: 6. Je merkt nu dat de foto van de band zelf te veel getoond wordt, we gaan hier nu groeperen, dit zal ervoor gaan zorgen dat je één keer de foto van de band te zien krijgt met daaronder de verschillende leden. Klik naast onopgemaakte lijst op instellingen 7. Kies nu bij groepeerveld nr.1 voor de afbeelding met de relatie: Drupal Basis Lander Carrijn 121

122 8. Tot slot gaan we bij de velden het afbeeldingsveld met relatie uitsluiten van weergave, het wordt namelijk gebruikt om te groeperen. En als dan toch bezig ben, sluit ook de titel uit van weergave: 9. De fotootjes van de leden zouden best wel naast elkaar mogen staan. Hiervoor moeten we wat CSS toepassen. Stel het veld eerst in zodanig dat deze een CSS klasse krijgt: Drupal Basis Lander Carrijn 122

123 10. Verander de onopgemaakte lijst naar Raster 11. Wanneer mensen klikken op de foto van een band dan wordt er doorverwezen naar de achterliggende inhoud 12. Wanneer de mensen klikken op een foto van een bandlid dan start er een Colorbox. Ik gebruikte volgende instellingen: 13. Pas de titel van het overzicht aan naar Bands 14. Pas ook de menulink aan naar Bands 15. Het overzicht is af, we werken even het menu af zodat 'Bands' de enige links naast Home wordt. De rest klapt uit. Navigatie Menu Een beeld dat je op vele website tegenkomt is een navigatie menu aan de linker of rechterkant van het scherm. Wij willen dat ook weergeven op ons overzicht van de bands. Drupal Basis Lander Carrijn 123

124 1. Eerst maken we een nieuw menu aan: 2. We geven het menu een naam: 3. Een menu zal altijd als blok worden aangemaakt. Bij de block - Layout kan je bij Right sidebar klikken op Blok plaatsen 4. In de lijst ga je op zoek naar het vers gemaakte navigatie menu 5. Bij de instellingen bepaal je nog even dat dit enkel op de pagina van het overzicht mag verschijnen: Drupal Basis Lander Carrijn 124

125 6. Sla alles even op en bekijk het overzicht van de bands: niets te zien. Dit is logisch want we hebben in ons navigatiemenu nog geen linken geplaatst. 7. Kies Structuur - Menu's 8. In de lijst kies je voor Menu bewerken bij Navigatie menu 9. Vervolgens kies je voor +link toevoegen 10. In het volgende venster bouw je nu de eerste link. Dit is natuurlijk een beetje werk om alle linken toe te voegen, maar je zal merken dat het venster je hier wel helpt: 1. De titel moet je zelf intikken. Bijvoorbeeld The Beatles 2. De link is gemakkelijk: tik de eerste tekens en Drupal doet een voorstel 11. Controleer of de link goed gelegd wordt: 12. Probeer op deze manier volgend menu te bekomen: Drupal Basis Lander Carrijn 125

126 13. Net zoals je eerder deze les een Superfish hoofdmenu hebt geplaatst, plaats je nu een Superfish Navigatiemenu. 14. Gebruik wat CSS om dat menu dan want te verfijnen ul.sf-menu.sf-style-black a, ul.sf-menu.sf-style-black a:visited, ul.sfmenu.sf-style-black span.nolink { HIER PLAATS JE CODE OM DE KLEUREN VAN HET MENU AAN TE PASSEN } #sidebar-second OF #sidebar-first { HIER KOMT CODE OM HET GEHEEL WAT TE LATEN ZAKKEN } Drupal Basis Lander Carrijn 126

127 14. Resultaat: Herhaling Taxonomie We willen de bandleden categoriseren volgens instrument. Zo wil ik op termijn een knop 'Gitaristen' en bij een klik op die knop verschijnen alle gitaristen van de verschillende bands. 1. Maak een nieuwe woordenlijst aan: Instrument 2. Voeg volgende termen toe: 1. Gitarist 2. Vocalist 3. Drummer 4. Bassist 5. Toetsenist 3. Voeg bij het inhoudstype bandleden een veld toe die je in staat stelt het bespeelde instrument aan te duiden 1. Mick Jagger --> zanger 2. Keith Richards --> zanger, gitarist 3. Charlie Watts --> drummer 4. David Gilmour --> zanger, gitarist 5. Nick Mason --> drummer 6. Richard Wright --> zanger, toetsenist 7. Roger Waters --> zanger, bassist 8. John Lennon --> zanger, gitarist 9. Paul McCartney --> zanger, bassist 10. George Harrison --> zanger, gitarist 11. Ringo Starr --> zanger, drummer 12. Ron Wood --> gitarist 4. Zorg voor mooie url-aliassen 5. De werking van de taxonomietermen kan je voorlopig uittesten door te klikken op een bandlid en vervolgens op zijn instrument. Je ziet vervolgens een lijst van alle muzikanten die hetzelfde bespelen. Drupal Basis Lander Carrijn 127

128 Contextuele filter We willen de foto van de bandleden weergeven op de site bij de info over dat bandlid. Op dit moment staat die foto onder de tekst. Met CSS zouden we deze kunnen laten floaten maar dat is niet altijd een mooie oplossing. In deze oefening plaatsen we die foto in een blok om vervolgens een logische plaats, zoals first of second sidebar, te geven op de site. Hiervoor zal een contextuele filter nodig zijn. Dat is een filter die bepaalde inhoud maar weergeeft als de context goed zit. 1. Maak een nieuw overzicht aan met volgende kenmerken: 1. Naam overzicht: bandleden foto 2. Inhoud van het type Bandleden 3. Bok maken 4. Onopgemaakte lijst van velden 5. Voeg het veld afbeelding toe, afbeeldingsstijl: focal point 350 x Veld titel verborgen 7. Alle items weergeven! 2. Sla het blok op 3. Ga naar Structuur - Blok-Layout en geef het blok een plaats: First sidebar EN enkel zichtbaar op de pagina van de bandleden Het probleem lijkt mij duidelijk, bij eender welk bandlid zien we alle foto's van alle bandleden. Niet goed! 1. Ga achter de schermen van het overzicht Drupal Basis Lander Carrijn 128

129 2. Kijk bij uitgebreid en kies voor Toevoegen bij contextuele filter 3. We voegen ID toe 4. Geef nu als standaardwaarde de inhoud-id uit de URL mee 5. Sla op en bekijk! 6. Ter afwerking zet je het veld afbeelding bij de weergave van het inhoudstype Bandleden verborgen en verhuis je het veld instrument naar de eerste plaats Drupal Basis Lander Carrijn 129

130 Les 12 Image Field Zoom Image Field Zoom is een leuke module. Deze laat je toe in te zoomen op een foto wanneer de gebruiker er met de muis over gaat. Bij de voorbereiding heb je gemerkt dat deze niet werkt zonder plugin, het is dus een third-party module. 1. Download de plugin voor Image Field Zoom en plaats deze in de map libraries 2. Download en installeer de module Image Field Zoom 3. Open de weergave van het inhoudstype Bands 4. Verander het formaat van het veld afbeelding naar ImageZoom 5. Klik vervolgens op het tandwiel voor de instellingen van Image Field Zoom. We bespreken deze klassikaal. Oefening 1. Maak een nieuw inhoudstype aan. Gebruik onderstaande afbeeldingen om dat tot een goed einde te brengen: Drupal Basis Lander Carrijn 130

131 2. In onderstaande afbeelding zie je het veld Band. Dit is een referentie naar inhoud, meer bepaald 'Band'. 3. Bij de Formulierweergave pas je het veld Band aan: 4. Voeg nu vier keer inhoud toe van het type Greatest Hits Drupal Basis Lander Carrijn 131

132 Node 1: o Paint it Black o o The Rolling Stones Node 2: o Yellow Submarine o o The Beatles Node 3: o Wish You Where Here o o Pink Floyd Node 4: o Hey You o o Pink Floyd 5. Om de Greatest hits mooi weer te geven maken we een overzicht aan: Drupal Basis Lander Carrijn 132

133 6. Voeg het veld filmpje toe: 7. Voeg ook het veld band toe, pas hier de HTML van het veld aan naar H1 Drupal Basis Lander Carrijn 133

134 8. Klik bij de velden op titel om ook hier de HTML van veld aan te passen, H2 9. Om het geheel mooier te maken plaatsen we wat CSS op het overzicht. Aangezien we bezig zijn met het overzicht zetten we klasse, die we straks maken, al op de juiste plaats: Drupal Basis Lander Carrijn 134

135 10. Maak nu een nieuwe CSS-regel aan.filmpjes{ float:left; border:2px solid rgb(251, 90, 2); border-radius:15px; padding:5px; margin:10px; box-shadow: 5px 5px 10px #888888; height:483px; width:350px; text-align:center; } 11. Resultaat: Drupal Basis Lander Carrijn 135

136 Shuffle Grid Een zeer visuele module om afbeeldingen weer te geven. Wij gaan deze specifiek gebruiken in een overzicht de verschillende muzikanten weer te geven maar dan wel per instrument. 1. Download en installeer de module 2. Een plugin is hier zeker nodig, voor de sport krijg je plugin niet. Klassikaal lossen we dit probleem op. 3. Maak een nieuwe afbeeldingsstijl aan: 4. Maak een nieuwe CSS-regel aan "CSS overzicht muzikanten". Plak er de volgende code in:.shufflefoto img { padding:5px; Drupal Basis Lander Carrijn 136

137 border:solid; border-color:#ff8c00; } ul.inline, ul.links.inline { display: inline; padding-left: 0; margin-left: -5%; } 5. Maak nu een nieuw overzicht aan dat voldoet aan volgende eigenschappen: 1. Naam: Muzikanten 2. Inhoud van het type bandleden 3. Pagina maken 4. Formaat: Suffle Grid van Velden 5. Geen paginering 6. Menulink in het hoofdmenu 6. Voeg nu het veld afbeelding toe met als stijl focal point 250x350 en link naar de inhoud 7. Open eens de instellingen van de shuffle grid. Onderaan staat zeer interesante lectuur! à 8. Blijkbaar kan je automatisch filteren indien er aan een aantal voorwaarden wordt voldaan: 1. Er moet een veld met referentie naar inhoud zijn toegevoegd 2. Dat veld moet meervoudig zijn en de seperator moet een verticale lijn zijn 9. Voeg het veld instrument toe 10. Zet de meervoudige veldinstellingen juist 11. Verberg het veld instrument 12. Verberg ook het veld titel 13. Keer terug naar de instellingen van de Shuffle Grid en stel juist in 14. Open nog even de instellingen van het afbeeldingsveld en vul de css klasse aan (shufflefoto) Drupal Basis Lander Carrijn 137

138 Waterfall en EVA Ik schets even waar we naartoe willen. Als ik kijk naar een bepaalde Band dan zie ik op dit moment één foto met daarop image field zoom toegpast. Leuk maar ik wil veel meer foto's zien horende bij die band. Ik wil mij echter niet bezighouden met het maken van afbeeldingsstijlen en ik maak mij liever geen zorgen over responsiviteit. Om dit te verwezenlijken hebben we wel wat werk. Hieronder een kleine timetable die we vervoglens in stappen uitwerken: o o o o o Veld toevoegen aan inhoudstype Inhoud toevoegen bij de bands Een overzicht maken en instellen van het type Waterfall Zorgen dat die view zichtbaar wordt bij de band (EVA) Zorgen dat er enkele foto's van de bands die bekeken wordt zichtbaar is (contextuele filter) En nu concreet: 1. Download de extra afbeeldingen naar de computer en pak ze uit 2. Download en installeer eerst de module EVA: Entity Views Attachement en Views Waterfall Display 3. Maak een nieuw veld aan bij het inhoudstype Band: 1. Extra afbeeldingen, waardes onbeperkt 2. Uitgesloten van weergave 4. Bewerkt de inhoud van de verschillende bands en voeg de extra afbeeldingen toe, let hierbij op het vermelden van de titel en de alt-tekst 5. Maak een nieuw overzicht met volgende kenmerken: 1. Naam: extra afbeeldingen bands 2. Inhoud van het type bands 3. Pagina maken 4. Waterfall Display van velden 5. Geen menulink 6. Geen paginering 6. Voeg nu het veld afbeelding toe bij de velden en stel in: Drupal Basis Lander Carrijn 138

139 7. Uiteindelijk heb je twee velden, verberg nu ook titel 8. Op dit moment hebben we wel een werkend overzicht maar het is nog niet zichtbaar voor de bezoeker. Het is dan ook een specialleke omdat we geen menu-link leggen en we maken er ook geen blok van. EVA komt hier op de proppen. 9. Via de knop +Toevoegen kan je EVA toevoegen Drupal Basis Lander Carrijn 139

140 10. Concreet merk je nu niet zoveel verschil. Bovenaan heb je de page en daarnaast de EVA. Beide weergaven hebben exact dezelfde instellingen. Zeer goed. 11. De EVA moet nu wel nog concreet aan het juiste inhoudstype gekoppeld worden: 12. Sla alles op en open de weergave van het inhoudstype band, je merkt daar een nieuw veld op. Controleer even of deze niet bij de uitgeschakelde staat: 13. Bekijk één van de bands, je merkt dat de foto's zichtbaar zijn. Maar helaas, het zijn ALLE foto's en niet enkele die van de band waar je naar kijkt. 14. Open de instellingen van het overzicht bij de EVA-weergave voegen we een contextuele filter toe: Drupal Basis Lander Carrijn 140

141 Les 13 Voorbereiding 1. Plaats DEZE TWEE PLUGINS op de server in de map libraries. Deze is nodig voor de werking van Masonry Views en Masonry API 2. Schakel de modules Masonry Views en Masonry API in. Dit zijn geen core-modules, even installeren dus. 3. Download, installeer en activeer de module Background Images Formatter 4. Download, installeer en activeer de OPMERKING: bij het inschakelen kan je mogelijks een foutmelding krijgen, keer met de browserpijlen een pagina terug, zou vervolgend geen probleem mogen zijn. 5. Maak een nieuwe css regel: Drupal Basis Lander Carrijn 141

142 Label: CSS block achtergrond gerelateerd Code:.block { padding:0; } Kenmerk: Enkel van toepassing op de homepage Achtergrond afbeelding met Background Image Formatter Als veld In eerdere lessen hebben we met CSS foto's als achtergrond ingesteld. Dit kan ook met een blok. Door deze manier lossen we meteen ook een aantal problemen zoals het verdwijnen van de afbeeldingen van de server. Je kan deze achtergrond op elke pagina verschillend maken of eentje voor gans de site. 1. We gaan in eerste instantie zorgen voor een blijvende achtergrond van muzieknoten op de frontpage. Plaats volgende foto even op de harde schijf: 2. Onze homepage is van het type Eenvoudig pagina. We maken een nieuw veld aan bij dit inhoudstype: 3. Voeg een afbeeldingsveld toe, alt-veld en titel-veld uitschakelen 4. De weergave is hier belangrijker: 5. Klik op de tandwielen, we overlopen klassikaal: Drupal Basis Lander Carrijn 142

143 6. Bewerk nu de inhoud van de homepage, voeg de muzieknoten toe als achtergrondafbeelding. 7. We zijn er bijna. We gebruiken nu wat CSS omdat het kan: (verander eventueel de kleur, in dit voorbeeld is het grijs) #page >.container { background-color: rgba(220, 220, 220, 0.5); } Verander bij de weergave de selector eens naar.container. Bekijk vervolgens het resultaat. Ik laat u dit doen omdat je op die manier duidelijk ziet wat de "container" nu eigenlijk is. Verander uiteraard opnieuw naar body Weetje van de dag: Je weet dat je met rgba een kleur transparant kan gaan maken, dat gaat ook met de hex-code. Stel, de code van mijn kleur is #33b5e5 en ik wil deze 50% transparant dan gebruik ik #8033b5e5 want 80 is 50%. Hieronder een praktische tabel: Drupal Basis Lander Carrijn 143

144 Als blok In bovenstaand voorbeeld hebben we de achtergrond aangepast door een veld toe te voegen bij een inhoudstype. Dat is een leuke en bruikbare werkwijze maar we zitten met een probleem wanneer we een andere foto willen bij een node van hetzelfde inhoudstype. De manier om dit op te lossen is door het maken van een nieuwe bloksoort dan vervolgens specifiek gebruikt kan worden voor het toekennen van achtergronden op die specifieke plaats (lees: URL). Zoals in een eerdere les besproken hebben we verschillende bloksoorten, we zullen opnieuw eentje moeten aanmaken. 1. Download de foto's. Deze heb ik namelijk op voorhand al een beetje doorzichtig gemaakt. 2. Navigeer naar de juiste plaats om dit allemaal te regelen: Structuur - Blok-layout - Soorten 3. Voeg een nieuw soort blok toe: 4. Geef dat nieuw soort blok nu een titel en eventueel een beschrijving Drupal Basis Lander Carrijn 144

145 5. In het volgende beeld kan je bijna het verschil niet zien tussen het maken van een inhoudstype of dat van een bloktype. Voeg dus op de gekende wijze het veld afbeelding toe. 6. Pas bij de weergave het formaat van dit veld aan naar Background Image. Kijk hieronder voor de instellingen Drupal Basis Lander Carrijn 145

146 De size drukken we hier uit in procenten om de afbeelding responsive te maken. 120 % is misschien te veel, experimenteer gerust! 7. Sla alles op. De nieuwe bloksoort is een feit. 8. Voeg een nieuw blok toe. Je zal merken dat je dit keer moet kiezen welke soort blok je wil toevoegen: 9. Voeg nu een nieuw achtergrond blok, dit doe je dus drie keer, voor elke band: 1. Blokbeschrijving: achtergrond bandnaam 2. Body: leeglaten (dit veld mag dus eigenlijk verwijderd worden) 3. Achtergrondfoto: blader naar de gewenste foto voor de achtergrond Ga verder naar het volgende beeld 13. Titel: niet weergeven 14. Pagina's: enkele tonen op de pagina van de desbetreffende band 15. Gebied: inhoud Opslaan en controleren Drupal Basis Lander Carrijn 146

147 Oplossing banner Ook de afbeeldingen die we via CSS als banner hadden geplaatst op de site verdwijnt zonder dat we dat willen. Een oplossing hiervoor kan je hieronder afleiden uit de aangepaste CSScode: Masonry Masonry, een top module voor het weergeven van foto's in de gekste formaten zonder deze allemaal te moeten gaan bijsnijden en schalen. Masonry past de indeling zo aan dat alle afbeeldingen mooi in mekaar passen. Voeg misschien eerst DEZE extra afbeeldingen toe aan de node van The Beatles Overzicht 1. Maak een nieuw overzicht met de volgende kenmerken: 1. Naam: Foto's 2. Inhoud van het type Bands 3. Een pagina maken 4. Masonry van velden 5. Menulink in het hoofdmenu 2. Velden: 1. Titel: uitsluiten van weergave 2. Extra afbeeldingen: Drupal Basis Lander Carrijn 147

148 3. Zorg dat alle items worden weergegeven, doe dit bij paginering: 4. Test uit! 5. Uiteraard is het resultaat net niet perfect en is het gebruik van CSS opnieuw onvermijdelijk. U kan volgende code gebruiken:.masonry-layout.masonry-item { border: none; padding: 0; } Deze module werkte vroeger niet zonder een patch. Indien het u zou interesseren of uit pure nostalgie kan je hem HIER nog eens bekijken Opdracht Bij de eerder gedownloade foto's kan je een foto vinden met de titel overzicht bands achtergrond. Zorg ervoor dat deze foto als achtergrond verschijnt wanneer mensen kijken naar het overzicht 'foto's' Drupal Basis Lander Carrijn 148

149 @font-your-face Wil je graag afwijken van steeds diezelfde lettertypen dan heb je een probleem. Er zijn maar zoveel fonts als dat de browser er ondersteund. Met Font Your Face heb je wel alternatieven. Deze lettertypen worden meegestuurd met de website. Er zijn er een deel betalend maar de Google Fonts kan je zo gebruiken. 1. Nadat je de module hebt geïnstalleerd krijg je bij het uiterlijk een nieuw menu-item. Klik daar even op. 2. Eerst moeten we de fonts importeren. Het zijn er een hoop, meer dan 4000 we zullen hier dus wat geduld moeten hebben. 3. Klik je nu bij Browse dan zie je de verschillende fonts. Klik er enkele aan die je wil gebruiken. Let op, niet te veel want alle ingeschakelde fonts worden geladen in de site. Een grote hoeveelheid zou dus de snelheid van de site kunnen beïnvloeden. Drupal Basis Lander Carrijn 149

150 4. Klik je nu op de titel van het lettertype dan verkrijg je de css-code. 5. Met de CSS injector kan je deze nu gaan implementeren. Je kan deze code nu overal gaan toepassen, van een titel tot de doorlopende tekst in de body 6. Kopieer (zie stap 4) de code van het lettertype dat je graag wil gebruiken. 7. Wij gaan de menulinken in onze menubalk voorzien van een lettertype naar keuze. Hier moeten meteen nadenken want we kijken hier niet naar een 'normaal' menu. We werken met Superfish. Open eens de instellingen van dat specifieke blok 8. Door het gebruik van Superfish zijn de instellingen bijzonder uitgebreid. Wij zoeken hier nu specifiek naar een plaats waar we CSS-klassen kunnen toevoegen. Kijk eens onderaan bij de geavanceerde instellingen. Drupal Basis Lander Carrijn 150

151 (in bovenstaand voorbeeld gebruik ik lettertype als klasse, deze heb ik zo gekozen en vervolgens bij de CSS-injector aangemaakt) 9. Bij de drie verschillende opties typen we nu dezelfde klasse, we willen namelijk voor alle mogelijke menu's hetzelfde lettertype gebruiken. 10. Sla alles op en open de CSS-injector. Daar maken we een nieuwe regel aan. Afhankelijk van jouw gekozen lettertype zal die er nu anders gaan uitzien. In mijn geval heb ik dit: 11. Bekijk het resultaat Drupal Basis Lander Carrijn 151

152 Oefening Voor deze opdracht grijpen we even terug naar de schilders. We passen de opgedane kennis toe op onze schilderijen. TIP: alle CSS komt in één regel te staan, die je enkel op de desbetreffende pagina laat gelden 1. Zorg voor een overzicht dat de verschillende schilderijen toont, dit overzicht kan je oproepen door een menulink in het hoofdmenu 2. Boven het overzicht moeten de verschillende kunststromingen zichtbaar zijn, je kan daar vervolgens mee gaan filteren (op bovenstaande afbeelding is het resultaat reeds te zien van opdrachten die hieronder pas beschreven staan) 3. De eerder ingestelde CSS-regel die voor een doorzichtige achtergrond (lichtgrijs) zorgt mag niet van toepassingen zijn op ons overzicht. 4. Zoek een afbeelding op het net die je gaat instellen als achtergrond op het overzicht. Zoek eentje van het type background repeat. Geen inspiratie? Gebruik deze: Drupal Basis Lander Carrijn 152

153 5. Zorg er nu voor dat de afbeelding als achtergrond verschijnt op het overzicht van de schilders, hier zijn een aantal methoden voor maar ik zou jullie aanraden hiervoor een nieuwe bloksoort te maken 6. om de titel een speciaal lettertype te geven. 7. Maak gebruik van CSS om 1. de titel en de verschillende kunststromingen centraal boven het overzicht weer te geven 2. ruimte te creëren tussen de verschillende schilderijen, deze plakken nu wat tegen elkaar 3. de storende lijn onder aan de pagina weg te werken (KLIK HIER om een afgewerkt voorbeeld van de CSS-regel te bekijken.) Drupal Basis Lander Carrijn 153

154 Les 14 Eenvoudig contactformulier In de core van Drupal 8 zit er reeds een eenvoudig contactformulier ingebouwd. Zeer handig om de bezoeker van jouw site een te laten sturen. Het is namelijk not-done om een e- mailadres gewoon bloot op de site te zetten. Zeer nadelig voor spam. We maken eerst een pagina aan waarnaar de gebruiker zal worden doorverwezen als het formulier is ingediend. Op deze pagina komt een standaard welkomstbericht maar ook een knop die de gebruiker snel laat terugkeren naar de Home-page. Voor deze knop te gaan maken gebruiken we een leuke website. 1. Voeg een veld toe bij het inhoudstype eenvoudige pagina. We gebruiken hier een eerste keer het veldtype Link 2. Om deze knop niet als een droge link weer te geven op de site maar als een mooie knop gebruiken we DEZE site. 3. Wanneer je de code op het klembord hebt staan, keer je terug naar jouw site en je maakt een nieuwe css regel. Belangrijk hier is dat je de klasse die door de site werd aangemaakt even gaat aanpassen naar een voor jou logische benaming 4. Uiteindelijk keer je terug naar de weergave van het inhoudstype Eenvoudige pagina en je past het Link-veld aan via het tandwiel: Drupal Basis Lander Carrijn 154

155 5. Voeg nu inhoud toe van het type Eenvoudige Pagina. Gebruik onderstaand voorbeeld en kijk zeker bij de URL-alias, we gaan deze dit keer niet automatisch laten genereren: Drupal Basis Lander Carrijn 155

156 6. Bekijk uiteraard het resultaat en dan vooral onze knop! Nu we onze doorverwijzingspagina hebben gemaakt, de pagina die de bezoeker krijgt na het indienen van het formulier, kunnen we het formulier zelf gaan ontwerpen: 1. Voeg een nieuw contactformulier toe via Structuur - Contactformulieren - Contactformulier toevoegen 2. Vul de gewenste velden in. Let op, niet alles zal hier nodig zijn: 1. Het Label is zoals de titel van een node, zichtbaar voor de gebruiker 2. Ontvangers is de plaats waar u het mailadres noteert van diegene die de vraag van het formulier moet ontvangen 3. Bericht is niet nodig daar wij een pagina aangemaakt hebben 4. Het Doorverwijspad is hier uiteraard de aangemaakte pagina 5. Automatisch antwoorden vullen we ook niet in Drupal Basis Lander Carrijn 156

157 3. Vergelijk een Contactformulier gerust met een inhoudstype, het werkt ook met velden en de weergave ervan. Let wel. Hier is de formulierweergave het belangrijkste luik natuurlijk. In onderstaande oefening gaan we het veld onderwerp vervangen door een keuzelijstje. Veel aangenamer voor de gebruiker. 1. Voeg een veld toe bij het Contactformulier 'Uw vraag' 2. Veldtype is hier Lijst (tekst) 3. Label is onderwerp 4. Het is een verplicht veld! 5. Toegestane waarden zijn: Trappisten, Schilders, Muzikanten en Fietsen 6. Bij de formulierweergave kiezen we voor keuzerondjes of keuzevakjes en zetten we het oorspronkelijke veld Onderwerp bij uitgeschakeld. 4. Zorg nog even voor een link in het hoofdmenu! 5. Test het uiteindelijke resultaat uit (gebruik een andere browser waarin je niet bent aangemeld): Drupal Basis Lander Carrijn 157

158 Beveiligen met Honeypot In de vorige oefening hebben we een formulier toegevoegd aan onze website. Formulieren zijn de ideale manier om binnen te breken in een site of om deze te gaan misbruiken wat spam betreft. We moeten deze dus beveiligen. De module die iedere Drupaller moet hebben is Honeypot. Deze module gaat een voor de mens onzichtbaar veld toevoegen dat alleen door robots kan worden ingevuld. Dus wanneer dat veld bij indienen ingevuld is dan zal Honeypot ingrijpen en de indiening tegenhouden. 1. Installeer en activeer de module Honeypot 2. Roep de instellingen van Honeypot op Drupal Basis Lander Carrijn 158

159 3. Stel de instellingen correct in, we overlopen klassikaal Sla alles op en jouw site is beveiligd, eenvoudig en efficiënt! Add another Onlangs stelde men de vraag of het niet mogelijk was om na het toevoegen van een node direct een nieuwe node toe te voegen i.p.v. opnieuw via de menubalk te gaan. Je wilt bijvoorbeeld vier bands toevoegen en na het toevoegen van de eerste wil je een knop om meteen een volgende toe te voegen. Wel, het kan. 1. Download en installeer de module Add another Drupal Basis Lander Carrijn 159

160 2. Ga nu naar de instellingen van bijvoorbeeld het inhoudstype bands bijvoorbeeld. Onderaan heb je nu een nieuwe optie: 3. Alles staat standaard aangevinkt, dat is ook de bedoeling. Sla het inhoudstype op en leeg de cashes. 4. Voeg nu inhoud toe van het type band en kijk meteen onderaan naar het resultaat Imagepin Een kleine maar leuke module om tekst op een afbeelding te laten verschijnen wanneer je een bepaald gebied aanwijst. 1. Installeer de module Imagepin 2. Ga naar de weergave van het inhoudstype band en pas daar het veld afbeelding aan: Drupal Basis Lander Carrijn 160

161 3. Bewerk nu de node van The Beatles, merk de nieuwe knop op bij het afbeeldingsveld: 4. Wanneer je op deze knop klikt dan kan je onderaan tekst toevoegen 5. Sleep vervolgens het bolletje op de afbeelding 6. Geef het bolletje een juiste plaats 7. Hou hier rekening met het feit dat de tekst onder het bolletje zal verschijnen en niet buiten de foto wil gaan 8. Bekijk het uiteindelijke resultaat: (in bovenstaande figuur ben ik niet zeker van de 'wie is wie') Drupal Basis Lander Carrijn 161

162 Imagekick Deze module geeft je een hele resem extra opties voor het maken van afbeeldingsstijlen. Eens de module draait bekijken we deze weleens. De reden echter voor het behandelen van deze module is echter de nog steeds aanwezige waarschuwing i.v.m. met de opcaching. We lossen dat even op. Let wel, op de oefensites is dit reeds geregeld omdat die instellingen gebeurd op het gehele domein. Je kan deze werkwijze natuurlijk gaan toepassen op jullie eigen website. 1. Installeer en activeer de module Imagekick 2. Om de module ook echt te kunnen gebruiken moet je via Instellingen - Media - Beeldverwerkingstoolkit de Image kick image manipulation toolkit activeren 3. Deze optie is echter niet voorhanden als je op de server de juiste php-extensie niet hebt ingeschakeld. Waar we nu naartoe gaan is tevens ook de plaats om die waarschuwing weg te werken 4. Ga naar het Cpanel van jouw site en zoek de Select PHP Version - knop Drupal Basis Lander Carrijn 162

163 5. Je krijgt vervolgens de optie om de php-versie aan te passen, maar vooral ook de mogelijkheid om extensies aan te vinken. Wij vinken er twee aan. imagekick kunnen gebruiken --> zorgt ervoor dat we de zojuist geïnstalleerde module --> hiermee geven we gehoor aan de waarschuwing die op dit moment te zien is bij de statusrapportage 6. Sla deze verandering op 7. Bekijk het resultaat op de volgende manieren: 1. Bekijk de statusrapportage en geniet van het feit dat er geen enkele fout of waarschuwing zichtbaar is! 2. Pas de instellingen bij de beeldverwerkingstoolkit aan en test eens uit door een test-afbeeldingsstijl aan te maken --> het aantal opties is sterk gegroeid. Ik heb nog niet de tijd genomen om elke optie te gaan uittesten Drupal Basis Lander Carrijn 163

164 Herhalingsoefeningen Oefening 1 Maak bij taxonomie een nieuwe woordenlijst 'geslacht' aan en voeg de termen dames en heren toe. Maak een tweede woordenlijst aan 'kleur' en voeg toe wit, zwart, grijs en groen Maak een nieuw inhoudstype aan. Geef dit de titel 'Fietsen' Zorg voor de nodige velden om volgende gegevens weer te geven: Een titel Drie foto's van de fiets in kwestie Een keuzelijstje met dames of heren (Taxonomie!) Een prijs Een witte, zwarte, grijze of groene fiets (Taxonomie!) Bij de formulierweergave pas je het veld geslacht en kleur even aan naar keuzevakjes/keuzerondjes Voeg nu drie keer een fiets toe. Gebruik hiervoor deze bestanden. Zorg dat volgende velden worden aangevuld: (een menu-link is niet nodig) Titel Een beetje uitleg in de body (zie word-documentje) Afbeeldingen Dames of heren Prijs (mag je zelf kiezen) De kleur Voorlopig hoef je ook geen rekening te houden met de weergave, dat komt straks. Oefening 2 We maken van ons nieuwe inhoud een view, wat had je gedacht? Hou bij het aanmaken rekening met volgende eigenschappen: Inhoud van Fietsen Onopgemaakte lijst van velden Menulink in het hoofdmenu De titel is als veld standaard aanwezig. Drupal Basis Lander Carrijn 164

165 Voeg het veld afbeelding bij, hou rekening met: Afbeeldingsstijl: focal point 260 x 260 (deze stijl zal je moeten aanmaken) Wanneer je niets onderneemt zullen er per node drie foto's verschijnen, om ervoor te zorgen dat er maar 1 foto zichtbaar is kijk je even bij de meervoudige veldinstellingen: We geven 1 waarde weer te starten vanaf nul (Drupal gebruikt nul als indicatie van het eerste item) Voeg ook het veld prijs toe: Schalen: 0 Tot slot ook het veld geslacht Uitsluiten van weergave We gaan er nu voor zorgen dat de mensen kunnen filteren op dames-fietsen of heren-fietsen: Bij filtercriteria voeg je er eentje toe: Geslacht Kies de juiste woordenlijst en voor een keuzelijst Zorg er voor dat de filter zichtbaar is voor de gebruiker. Ik geef hieronder het uiteindelijke resultaat (zonder CSS): Drupal Basis Lander Carrijn 165

166 Drupal Basis Lander Carrijn 166

167 Onderstaande afbeelding toont de view met CSS: Dit is de code van bovenstaande CSS Zorg dat deze code wordt toegepast op de View Pas de CSS zodanig aan dat deze niet meer dezelfde is als op de bovenstaande foto. Kies dus zelf kleuren en dergelijke... Merk op: De afbeelding van de fiets 'gazelle bloom' is aangepast. Dit kan je doen door de volgorde van de afbeeldingen aan te passen bij de node Oefening 3 Zorg ervoor dat onderstaande afbeelding als achtergrond te zien is op het overzicht van de fietsen: Oefening 4 We maken een blok dat enkel verschijnt wanneer het overzicht van de fietsen bekeken wordt Kenmerken: Voeg een blok toe bij de bestaande view 'fietsen' Toepassen op Deze Weergave Geef deze de opmaak 'diavoorstelling' Drupal Basis Lander Carrijn 167

168 Verwijder alle overbodige velden zodoende dat er enkele een foto wordt getoond Zorg dat van de drie foto's per node maar eentje wordt getoond maar wel in een random volgorde. Het blok is enkel zicht baar bij de het overzicht van de fietsen Het blok komt in het footer menu Drupal Basis Lander Carrijn 168