Drupal Basis www.scheldeland.net
LES 1 6 1. INLEIDING 6 2. LESVERLOOP 6 3. GESCHIEDENIS DRUPAL 6 4. SITES GEMAAKT IN DRUPAL 7 5. JOUW OEFENSITE 7 6. DISTRIBUTIE? 7 7. BLOKKEN 7 8. THEMA 9 9. INSTELLINGEN VAN HET THEMA 10 10. DE FRONTPAGE INSTELLEN 10 LES 2 13 1. INLEIDING 13 2. EENVOUDIGE PAGINA 13 3. ARTIKEL 16 4. LOGO INSTELLEN 19 LES 3 20 1. INLEIDING 20 2. AANMELDOPTIES AANPASSEN 20 3. INHOUDSTYPE AANMAKEN 20 4. INHOUD TOEVOEGEN 23 5. HOOFDMENU INSTELLEN 24 6. OEFENING 25 LES 4 30 1. INLEIDING 30 2. AFBEELDING IN DE BODY 30 3. AFBEELDINGEN VAN DE SLIDESHOW 35 4. AFBEELDINGSSTIJLEN 39 5. COLORBOX 47 LES 5 51 1. INLEIDING 51 2. FAVICON INSTELLEN 51 3. HERHALINGSOEFENING 52 LES 6 57 1. INLEIDING 57 2. CAPTCHA 57 3. BLOK TOEVOEGEN 58 4. PATHAUTO 58 5. VIEWS 59 1. VOORBEREIDEND WERK: 59 2. INHOUDSTYPES AANMAKEN: 59 3. INHOUD TOEVOEGEN 61 4. AFBEELDINGSSTIJL MAKEN 62 5. OVERZICHT I 63 2
6. OVERZICHT II 66 LES 7 67 1. INLEIDING 67 2. DRUPAL CORE UPDATE 67 3. OVERZICHTEN (DEEL 2) 69 4. HOSTING 76 5. DATABANK 76 6. DRUPAL CORE 78 LES 8 80 1. INLEIDING 80 2. VIEWS SLIDESHOW 80 3. OEFENINGEN 83 4. CONTEXTUELE FILTER 84 5. OEFENING 85 6. INSTELLINGEN FANCYBOX 85 LES 8 (DEEL 2) 88 1. INLEIDING 88 2. DATABANK AANMAKEN 88 3. DRUPAL NAAR DE SERVER 91 4. CONFIGURATIE 91 5. MODULES 94 MODULEFILTER 94 BEHEERSMENU 94 VERTALINGEN 95 PATHAUTO 96 CKEDITOR 96 IMCE 96 BACKUP AND MIGRATE 96 VIEWS 97 CSS INJECTOR 97 IMAGECACHE ACTIONS 97 FANCYBOX 97 VIEWS SLIDESHOW 97 6. EERSTE AANPASSINGEN 97 LES 9 99 1. INLEIDING 99 2. OPWARMER 99 3. TOUCH ICON 99 4. AFWERKING VORIGE LESSEN 100 5. CSS AANPASSINGEN 100 6. FIELD GROUP 101 7. YOUTUBE-VELD 102 8. GOOGLE MAPS VELD 103 3
LES 10 106 1. JUICEBOX 106 2. HERHALINGSOEFENING 106 ALGEMENEN INSTELLINGEN: 107 INHOUDSTYPEN 107 AFBEELDINGSSTIJL 108 MENU'S 108 INHOUD TOEVOEGEN 109 OVERZICHTEN 109 CSS 112 LES 11 113 1. NIEUWIGHEDEN UIT DE HERHALINGSOEFENING 113 DATE 113 DATUM IN EEN VIEW 114 VELDEN GROEPEREN (VIEW) 116 2. HERHALINGSOEFENING (DEEL 2) 116 LES 12 117 1. AFWERKEN LES 10 117 2. SEARCH ENGINE OPTIMALIZATION (SEO) 117 INLEIDING 117 METATAG 117 XML SITEMAP 118 SITE AANMELDEN 121 GOOGLE ANALYTICS 121 SITEMAP 123 MOLLOM 123 PAGE TITLE 124 PATHAUTO 124 ALT-VELD GEBRUIKEN 124 UP TO DATE 124 LES 13 125 1. VIEWFIELD 125 2. CONTEXTUELE FILTER (REVISISTED) 127 3. CSS ALBUMS 128 4. EDITABLE VIEW 128 5. OEFENING 131 6. BIJLAGE IN EEN VIEW 132 LES 14 134 1. FOOTABLE 134 2. CHOSEN 136 3. RESPONSIVE MENUS 138 4. IMAGE HOTSPOTS 139 5. CONTACT 141 6. AFSLUITER 141 4
LES 15 142 1. UITSMIJTER: AUTOMATISCH TOEPASSEN VIEWS FILTER 142 2. HERHALINGSOEFENINGEN 142 OEFENING 1 142 OEFENING 2 143 OEFENING 3 143 OEFENING 4 144 OEFENING 5 146 OEFENING 6 146 OEFENING 7 147 OEFENING 8 147 OEFENING 9 148 LES 16 150 1. EINDOPDRACHT 150 5
Les 1 1. Inleiding "Drupal is een CMS net zoals Wordpress en Joomla. Een CMS (content management system) is voorraadkast met kant en klare zaken die je op een website vindt. Het uitzicht van je site (je kunt kiezen tussen honderden mogelijkheden), een slideshow, banners, foto galerijen, nieuwsbrieven, contact formulieren, forum, kalenders,... alles staat klaar om gebruikt te worden. Je moet enkel de 'modules' die je wenst, te installeren, in te stellen en een plaats te geven. Drupal heeft de meeste mogelijkheden van alle CMS'sen en is veruit de veiligste." (bron: www.drupalcursus.be) In deze eerste les maken we kennis met Drupal en bespreken we het verloop van de cursus. Je zal na vandaag reeds een eigen site hebben! 2. Lesverloop De cursus Drupal 1 bestaat uit 16 lessen van telkens 3 uur met een pauze van 15-20min. Voor deze lessen zijn vijf sites belangrijk: www.drupalschool.be: raadpleeg hier de les per les de lesinhoud www.drupalschool.eu: dit is de voorbeeldsite, op deze site worden de oefeningen gedemonstreerd www.drupalschool.be/demonstratiesite: op deze site zie je het uiteindelijke resultaat afhankelijk van het aantal voorbereide lessen Jouw eigen site (zie lager) http://moodle2016.waasendurme.be: dit is het digitale leerplatform van PCVO Scheldeland. Hier kan je o.a. de agenda raadplegen 3. Geschiedenis Drupal Drupal is oorspronkelijk ontwikkeld door Dries Buytaert als een bulletin board system. Het werd in 2001 een opensourceproject. Drupal is de Engelse schrijfwijze van de Engelse uitspraak van het Nederlandse woord "druppel", wat op zijn beurt in het Engels weer "drop" is. De naam komt van de inmiddels niet meer actieve website Drop.org. Buytaert wilde de site eigenlijk "dorp" noemen, als verwijzing naar het bulletin board system als gemeenschap, maar hij maakte een typefout bij het controleren van de domeinnaam en vond dat het zo beter klonk.(bron: www.wikipedia.org) Enkele kernwoorden: 6
CMS Open Source Community 4. Sites gemaakt in Drupal Om te tonen dat Drupal een breed draagvlak heeft bekijken we enkele bekende websites die gemaakt zijn met Drupal: Het Louvre: www.louvre.fr Twitter (voor ontwikkelaars): https://dev.twitter.com Tesla: www.tesla.com Rafael Nadal: www.rafaelnadal.com.. Een groter overzicht met meer sites gemaakt in Drupal: http://buytaert.net/tag/drupal-sites 5. Jouw oefensite Om veiligheidsredenen wordt dit deel klassikaal besproken. 6. Distributie? Jullie website is reeds voor een klein deel op voorhand klaargezet door de leerkracht. Zo moet je geen vertaling meer doen van de interface, zijn enkele modules reeds geïnstalleerd, enz.. Dit heet een distributie. Later in de cursus komt er een les waarin wordt uitgelegd hoe je nu helemaal zelf een Drupal site kan opstarten. 7. Blokken De site bestaat uit blokken. Plaatsen op de pagina waar inhoud kan worden toegevoegd. Overbodige blokken kunnen we verbergen. Ga naar je eigen site Wanneer je bent ingelogd herken je bovenaan een zwarte balk met titels. Voor de gewone bezoeker is deze niet zichtbaar. 7
Kies nu voor 'Structuur'. Merk op dat er een menu uitklapt bij het aanwijzen van de titel Kies voor 'Blokken' Klik vervolgens op 'Blokgebeiden demonstreren'. Met de knop kan je per thema (zie lager) de blokken bekijken. De gele vakken geven de plaatsing en de naam van de verschillende blokken weer die je kan gebruiken. 8
We verbergen een aantal blokken die we niet meteen nodig hebben: Klik op 'Demonstratie van blokregio's afsluiten' Door bij de keuze 'gebied' 'geen' te selecteren kan je bepaalde onderdelen (lees:blokken) verbergen. Verberg de volgende blokken: o Systeemhulp o Zoekveld o Gebruikerlogin o Navigatie o Gebouwd met Drupal Vergeet niet om onderaan op opslaan te drukken 8. Thema Het thema van een site bepaald het algemene uiterlijk. Dit is dus een belangrijke keuze. Binnen de Drupal community heb je een grote voorraad thema's die je gratis kan downloaden. Neem maar eens een kijkje op https://www.devsaran.com/free-drupal-theme Hoe je een dergelijk thema download en installeert zien we later. In de distributie die jullie gebruiken op de site zijn er al enkele extra thema's geïnstalleerd die je zo kan gaan uittesten. Klik in de toolbar op Uiterlijk Het huidige thema is Bartik 7.50 9
Door bij een thema te klikken op 'Inschakelen als standaard' stel je een nieuw thema in. Probeer dit even met Best Responsive 7.x-1.2 Klik op Home om het resultaat te bekijken Kies opnieuw een ander thema. Dit keer Premium Responsive 7.x-1.7 Vanaf nu werken we verder met dit thema 9. Instellingen van het thema Elk thema heeft zijn eigen instellingen. Het ene al wat meer dan het andere. Klik op Uiterlijk Het eerste thema dat je ziet staan is het ingestelde thema Klik op instellingen We overlopen deze klassikaal Uiteindelijk zorgen we ervoor dat: o De iconen van de sociale media verdwenen zijn o Er geen tekst staat op de foto's o Er een persoonlijke kleur is ingesteld Klik onderaan op 'Opslaan' Ga naar de homepage om het resultaat te bekijken 10. De Frontpage instellen Om de les te eindigen maken stellen we onze frontpage in. De frontpage of homepage is het eerste wat een bezoeker te zien krijgt op een site. Wijs inhoud aan op de toolbar 10
Wijs Inhoud toevoegen aan Klik op Eenvoudige pagina Vul de titel in en typ in de body een korte zin. Onderaan dienen we de pagina van een mooi URL te voorzien. Een URL is het adres van een bepaalde pagina. Klik onderaan op Opslaan --> de nieuwe pagina wordt getoond 11
Ga naar de front (huisje) De pagina zal nog niet worden getoond Klik in de toolbar op Instellingen Kies nu voor Websitegegevens Bij Standaardvoorpagina moeten we het juiste pad instellen. --> Bekijk het resultaat 12
Les 2 1. Inleiding In de vorige les bespraken we een eerste inhoudstype: Eenvoudige pagina (of:basic Page) In eerste instantie gaan we onze Front die gemaakt is met een Eenvoudige pagina verbeteren om vervolgens een nieuw inhoudstype: Artikel te bespreken. Bij Artikel kan je ook tags en een afbeelding toevoegen. Tot slot zoeken we een passend logo voor de website. 2. Eenvoudige pagina De homepage is een voorbeeld van een eenvoudige pagina. Je kan twee zaken invullen: Title: de titel Body: de tekst Wanneer je naar de homepage navigeert kan je deze bewerken door op de tab 'Bewerken' te klikken In het veld Title hebben we reeds een passende titel ingevuld Bij de body staat op dit moment een zinnetje Merk op dat je bovenaan in de werkbalk verschillende opties krijgt om de tekst aan te passen 13
Wil je echter meer mogelijkheden dan verander je van Filterd HTML naar Full HTML bij Tekstopmaak 14
Merk op dat er in de werkbalk opties zijn bijgekomen. Klassikaal werken we nu naar onderstaand resultaat: 15
Vergeet niet om na de aanpassingen onderaan op 'Opslaan' te drukken! 3. Artikel Een Artikel is een inhoudstype dat standaard is bij de Drupal installatie. Ga naar inhoud Inhoud toevoegen Artikel In het verschenen veld maken we een nieuwe node De titel is: kikker De tags zijn: Kikker,Amfibie,Fauna Image: o Download eerst een afbeelding van een kikker. o Kies vervolgens voor Bladeren o Wanneer de afbeelding gekozen is klik je op Uploaden In de body vul je in: De kikker is een amfibie dat in heel de Benelux voorkomt Onderaan moeten we een aantal instellingen aanpassen: Bij Menu-instellingen zet je een vink bij Voer een menulink in en geef je die link een titel: Kikker 16
Bij Reactie-instellingen selecteer je Gesloten. Ander kunnen bezoekers reageren op deze inhoud zoals op bijvoorbeeld een forum We maken net dezelfde oefening opnieuw klassikaal. Dit keer is het onderwerp: Hagedis. Gebruik als tags: Hagedis,Fauna,Reptiel Maak nu individueel een nieuwe node aan van het type eenvoudige pagina. Het onderwerp is 'Salamander'. Tags: Salamander,Fauna,Amfibie --> Het resultaat van de tags kan je testen door op een bepaalde tag te klikken. Je zal zien dat er een overzichtspagina wordt getoond met alle nodes waaraan de tag is gelinkt. Wat we nu hebben gedaan is het toevoegen van inhoud aan een bestaand inhoudstype. Je kan een inhoudstype het beste vergelijken met een kast. Een kast met een schap voor de afbeeldingen, een schap voor de titel,...deze schappen worden binnen Drupal velden genoemd. Elk veld heeft zijn eigen kenmerken en instellingen. Zo kunnen we schappen (lees: velden) toevoegen of van plaats veranderen. 17
Om de velden van een inhoudstype te bekijken ga je naar Structuur --> Inhoudstypes --> kliken op het gewenste type (in ons geval: Artikel) Voor ons zijn er voorlopig twee tabbladen zeer belangrijk: Velden beheren: dit is voor de input, wat de beheerder te zien krijgt achter de schermen Weergave beheren: dit is voor de output, wat de bezoeker te zien krijgt op de site Klik op weergave beheren Wil je liever dat de titel onder de afbeelding komt te staan --> verplaats het veld met het kruis naar een andere plaats 18
Wil je dat alle afbeelding hetzelfde formaat is --> klik op het tandwiel naast het veld en kies Medium, bevestig met een klik op Bijwerken!! Vergeet niet op te slaan!! 4. Logo instellen Er zijn nog een aantal storende factoren op onze site. Zo moet het logo aangepast worden en later ook de afbeeldingen. Vandaag passen we het logo aan. Ga naar de instellingen van het thema Wat verder zie je 'Instellingen logo' Haal de vink bij 'Standaardlogo gebruiken' weg Je krijgt nu de optie om het logo van op de computer up te loaden naar de server. Om het werken iets vlotter te laten verlopen kan je onderstaand logo gebruiken voor deze oefening: Sla de instellingen op en bekijk het resultaat 19
Les 3 1. Inleiding In de vorige lessen bespraken we reeds twee inhoudstypes: het Artikel en de Eenvoudige pagina. Deze zitten standaard in de Drupal-installatie. In deel maken we nu zelf een inhoudstypes met onze eigen velden en bijkomende instellingen. 2. Aanmeldopties aanpassen Wanneer je als user gaat inloggen dan merk je dat er een optie aanwezig is om een nieuwe account aan te maken. Met een eenvoudige instellingen zorgen we ervoor dat dit niet mogelijk is. Ga naar de instellingen en kies accountinstellingen Zet een bolletje bij 'Enkel voor beheerders' bij Registratie en annulering 3. Inhoudstype aanmaken Ga naar Structuur - Inhoudstypen - Inhoudstype toevoegen 20
We maken een overzicht van de bestuursleden van deze natuur-club. Bij de naam van het inhoudstype kunnen we dus Bestuur invullen Merk op dat enkel velden met een sterretje verplichte velden zijn. Onderaan passen we een aantal instellingen aan: Bij Weergave-instellingen doen we de vink bij Auteur en datum tonen. weg. Bij Reactie-instellingen gaan we de optie tot reageren op de inhoud niet toestaan door van open naar gesloten te wisselen. Onderaan heb je twee knoppen: 21
Inhoudstype opslaan: Dit is goed maar dan moet je opnieuw klikken om de velden te kunnen beheren Opslaan en velden toevoegen: Hiermee sla je op maar ga je meteen naar de opties voor het instellen van de velden --> Kies voor Opslaan en velden toevoegen Een foto bij het bestuurslid is leuk dus voegen we een afbeeldingsveld toe: Bevestig onderaan --> Opslaan Vervolgens moet je een aantal stappen doorlopen met hier en daar een instellings-opties aan te passen: In de eerste pagina kunnen we alles laten staan --> Veldinstellingen opslaan Op de volgende pagina kan je een heleboel kenmerken van het veld gaan bepalen. We overlopen deze klassikaal. Eindigen doen we met Instellingen opslaan --> Gelukt! Het nieuwe veld is een feit We maken opnieuw een veld aan, dit keer het geboortejaar. Om didactische redenen gebruiken we hier een keuzelijst (selectielijst) Sla op en in het volgende venster ga je ook opslaan zonder aanpassingen. Vervolgens gaan we de keuzemogelijkheden bepalen: 22
Tot slot voegen we ook een tekstveld toe voor het e-mailadres. Merk op dat je op een bepaald moment de Maximum lengte kan instellen. Het gaat hier over een e-mailadres. 255 Tekens is dus te veel. Je kan dit dus aanpassen naar bijvoorbeeld 50. Ons inhoudstype 'Bestuur' is bij deze af. Vergelijken we dit met onze metafoor van de vorige les dan hebben we nu eigenlijk de kast (=inhoudstype) en de schappen (=velden) gemaakt. Wat ons nu nog rest is het toevoegen van inhoud. 4. Inhoud toevoegen Ga naar Inhoud - Inhoud toevoegen - Bestuur We overlopen klassikaal wat er moet worden ingevuld. Wanneer je het resultaat krijgt zal je zien dat er nog iets niet klopt. De foto is namelijk veel te groot, te klein of nog iets anders. Dit komt omdat we in het inhoudstype niet hebben bepaald hoe groot de afbeelding moet zijn. Ga dus terug naar het inhoudstype en kies voor Weergave beheren. Klik op het tandwiel naast het veld: 23
Verander de Afbeeldingsstijl naar Medium (220x220) Klik op Bijwerken en vervolgens op Opslaan Ga nu naar de inhoud en bekijk de eerder ingevoerde inhoud, je zal zien dat de foto nu mooi getoond wordt in het gevraagde formaat. --> Voeg nog twee keer inhoud toe van het type bestuur. Gebruik foto's van het internet en fictieve namen en e-mail adressen 5. Hoofdmenu instellen We hebben nu drie bestuursleden toegevoegd. Helaas kan een bezoeker op de site nergens klikken om deze te gaan bekijken. We moeten dus een link leggen van onze inhoud naar het menu. Bewerk de inhoud van het eerste bestuurslid Bij de instellingen onderaan zet je een vink bij 'Voer een menulink in' 24
Sla deze wijziging op en bekijk het resultaat. Herhaal deze stappen voor de twee andere leden. Resultaat: 6. Oefening We maken een oefening die de begrippen, velden, taxonomietermen, inhoudstype,.. inoefent. Echter niet zonder eerst een nieuwe thema te installeren. Kwestie van oefening. Zet je site naar het thema Best Responsive. Later zullen we leren hoe we de standaardafbeeldingen van de slideshow kunnen aanpassen. Op de homepage zien we een probleem met ons menu. Om te beginnen veranderen we de naam van de site. Ga naar Instellingen en kies voor Websitegegevens 25
Pas nu de naam aan, vergeet niet op te slaan! Er is nog steeds een probleem met het hoofdmenu. Daarom schakelen we tijdelijk een aantal links uit. Ga naar Structuur - Menu's - Hoofdmenu Schakel alle links uit behalve twee door het vinkje weg te klikken onder Ingeschakeld. Vergeet niet op te slaan! --> De homepage ziet er meteen aantrekkelijker uit. Later leren we een manier om alle links zichtbaar te laten via een uitklapmenu. We werken rond het thema 'bomen'. Maak vier artikels van het type Artikel, telkens over een andere boom. (Linde, Spar, Eik, Den) Zorg voor een afbeelding (Wikipedia) Zorg voor een tekst (Wikipedia) Geef correcte tags (Linde: Loofboom,Boom / Spar: Naaldboom,Boom /...) 26
Vervolgens zorgen we ervoor dat de nodes bereikbaar zijn via een menu. Dit keer doen we dat via het navigatiemenu. Eerst moeten we het blok zichtbaar maken: Ga naar Structuur / Blokken Zoek het navigatie menu en plaats dit in de First Sidebar Sla de instellingen op en bekijk het resultaat op de Homepage We moeten nu drie links toevoegen die telkens verwijzen naar de correcte boom. Een voorbeeld: Klik op het tandwiel naast het blok en kies voor links weergeven Klik in verschenen venster op + Link Toevoegen Geef de link een naam (afhankelijk van de boom) En vul het correcte pad in. Dit pad is dus de URL van de pagina. Dit kan je te weten komen door de pagina op te roepen en de adresbalk te bekijken. Je hoeft hier niet 27
het volledige adres in te typen. De URL van 'Den' is in mijn geval bijvoorbeeld: www.drupalschool.be/demonstratiesite/content/den. Je hoeft bij het pad enkel content/den in te geven omdat het een interne link is. Herhaal dit voor de andere bomen. Vergeet niet op te slaan. Wanneer je nu het resultaat bekijkt zie je in de navigatie nog een link(s) staan die eigenlijk niet nodig is. Geef de links weer en schakel de overbodige links uirt. Bekijk nu even het nut van de tags. Wanneer je op Boom klikt krijg je de vier bomen te zien. Klik je op loofboom dan zie je enkel Linde en Eik verschijnen. --> Overzichtspagina van Teasers Tot slot kunnen we ook bepalen hoe die Teaser er moet uitzien: Ga naar het inhoudstype Artikel en kies voor de weergave van de Teaser Bij de afbeelding willen we liever een kleine foto: 28
De body hoeft niet de volledige inhoud te tonen: Vergeet niet om telkens op Bijwerken te klikken. Op het einde sla je de instellingen op en bekijk je het resultaat 29
Les 4 1. Inleiding Afbeeldingen zijn op een website van cruciaal belang. Deze worden eigenlijk de blikvangers van de site. Hoe meer en hoe mooier, hoe aantrekkelijker de site. Neem hierbij een heel belangrijke regel in acht: hoe groter de afbeelding, hoe zwaarder de site. Streef naar afbeeldingen onder de 50kb Er zijn veel manieren om foto's weer te geven. In deze eerste les rond afbeeldingen bespreken we: Afbeeldingen in de body De afbeeldingen van de slideshow De Afbeeldingsstijlen De colorbox 2. Afbeelding in de body Voor we afbeeldingen in de body kunnen plaatsten moeten we de instellingen aanpassen zodat we van op onze harde schijf kunnen uploaden naar de server. Hiervoor hebben we de module CKEditor nodig. In jullie distributie is deze al aanwezig. Later leren we hoe we modules die nog niet geïnstalleerd zijn kunnen toevoegen. Eerst bekijken we de huidige situatie: Voeg inhoud toe van het type Artikel Bij de body zie je dit: 30
Voor we afbeeldingen kunnen toevoegen moeten we de tekstopmaak instellen op Full HTML Klik je nu op het afbeeldingssymbooltje dan krijg je een dialoogvenster --> Dit is echter niet goed, je kan namelijk nergens kiezen om een foto up te loaden van de computer naar de server. Volg hieronder de stappen om dit in orde te zetten: Ga naar modules Via de filter zoek je naar CKEditor 31
Klik op het pijltje en kies Instellingen Onder File Browser Settings verander je het type naar IMCE Sla de instellingen op --> bekijk opnieuw de body onder Full HTML bij het inhoudstype Artikel. Je zal merken dat er een knop is bijgekomen: 32
Bij wijze van oefening voegen we opnieuw een boom toe. Dit keer de beuk. --> We maken dus nieuwe inhoud van het type Artikel. Geef een correcte titel en vergeet de tags niet! Zoek nu via Wikipedia wat tekst over de beuk en plak dit in de body. Zoek vervolgens een foto van een beuk en sla dit op, op de computer. De opgeslagen afbeelding voegen we nu toe in de body, dus niet in het veld! Klik op het afbeeldingssymbooltje Kies voor Bladeren op Server Kies voor Uploaden 33
Zoek de afbeelding in de verkenner (de afbeeldingen hieronder is van een Mac) Kies vervolgens opnieuw voor Uploaden (let wel dat je de juiste knop kiest) Het volgende beeld geeft je nog een aantal opties: o Pas de breedte aan omdat de foto anders veel te groot is o Geef een randje van 10pt o Plaats de HSpace op 25 (Horizontal Space ofwel Inspringen) 34
Klik op OK om te bevestigen --> de foto is toegevoegd aan de body. Zorg er tot slot voor dat onze nieuwe node 'Beuk' ook een linkje krijgt in in het navigatiemenu. Bekijk nu even de teaser. Merk hier op dat de foto niet te zien is en bij de andere wel. Een ander nadeel van deze werkwijze zijn de beperkte mogelijkheden tot het instellen van de afbeelding. 3. Afbeeldingen van de slideshow Iets dat ons al een tijdje stoort zijn de afbeeldingen op de Front Page. Dit zijn de standaard afbeeldingen van het thema. Deze afbeeldingen aanpassen is helaas niet zo eenvoudig. We hebben namelijk een programma nodig waarmee we afbeeldingen van op onze computer rechtstreeks kunnen uploaden naar de server, meteen in de juiste map van het thema. Zo een programma heeft een FTP-programma. Er bestaan veel dergelijke programma's maar voor didactische redenen kiezen we allemaal voor FileZilla. Gebruik de link hieronder om dit programma te installeren. https://filezilla-project.org/ --> Eens het programma is geopend zie dit venster: 35
Het linkergedeelte is jouw computer, vergelijk het met een soort verkenner. Het rechter gedeelte is alles wat op de server staat. Dit is op dit moment leeg omdat we nog geen connectie hebben gemaakt. Hiervoor heb je de Host, Gebruikersnaam en Wachtwoord nodig. Om evidente redenen krijgen jullie deze in de les en plaats ik die niet op deze website. --> De drie afbeeldingen die we gaan gebruiken heb ik hieronder voor jullie klaargezet, sla deze eerst op, op de harde schijf, doe dit op een logische plaats, bijvoorbeeld Downloads. 36
Wat je nu moet doen is de naam van deze drie bestanden aanpassen: Banner 1 --> slide-image-1 Banner 2 --> slide-image-2 Banner 3 --> slide-image-3 Wanneer je bent ingelogd op de server via FileZilla: Links zorg je ervoor dat de drie afbeeldingen te zien zijn 37
Rechts navigeer je naar de correcte map. Zorg ervoor dat je hier geen fouten maakt. Vervolgens selecteer je links de drie afbeeldingen. Je klikt op de selectie rechts en kiest voor uploaden. Je krijgt een venster met de waarschuwing dat je iets gaat vervangen. Kies hier dus voor overschrijven. Bekijk het resultaat op de website. Je zal waarschijnlijk moeten vernieuwen. Als we dan toch bezig zijn met het aanpassen van de site kunnen we evengoed het logo ook in dit thema juist zetten. Doet dit even bij wijze van oefening. 38
Ik kan me voorstellen dat je de naam van site nu storend vindt. Pas deze aan naar believen. 4. Afbeeldingsstijlen Een totaal andere manier van afbeeldingen beheren is het gebruik van afbeeldingsstijlen. We plaatsten de afbeelding hier niet in de body maar wel in een afbeeldingsveld. We testen dit concreet uit en hiervoor maken we een nieuw inhoudstype aan: Maak een veld aan Afbeelding Veldtype: Afbeelding Widget: Multiupload (dit omdat je dan meteen een reeks foto's kan toevoegen) Vergeet niet om bij de instellingen het aantal waardes op onbeperkt te zetten We bepalen vervolgens hoe de velden moet worden weergegeven, klik daarvoor op het tabblad Weergave Beheren Klik nu even op het tandwiel naast het veld Afbeelding 39
Hier kan je kiezen tussen een aantal afbeeldingsstijlen: De bedoeling is nu om een stijl toe te voegen aan deze vier bovenstaande standaard-stijlen. Eerst moeten we een nieuwe module installeren. Een module is eigenlijk een uitbereiding voor Drupal. Deze modules zijn gratis te downloaden van het net. --> Zoek in Google naar de volgende trefwoorden: Klik de eerste site aan 40
Scroll naar beneden: Klik recht op het groene zip-bestand en kies Koppelingslocatie kopiëren Ga naar jouw website. Kies Modules - Nieuwe module installeren Plak de eerder gekopieerde koppelingslocatie 41
Kies voor Installeren Samen doorlopen we dit installatie proces Op het einde van de rit moeten we de nieuw toegevoegde module activeren (lees:aanzetten) Nu de module is geïnstalleerd kunnen we nieuwe stijl aanmaken die ervoor zorgt dat de foto wordt weergegeven met afgeronde hoeken. Ga naar Instellingen - Media - Afbeeldingsstijlen Klik op Stijl toevoegen 42
Geef een passende naam aan de nieuwe stijl Kies eerst voor Schalen en Bijsnijden, dit om de foto al wat kleiner te maken. We schalen ook om de verhoudingen te respecteren Vervolgens voegen we opnieuw een effect toe, kies dit keer Afgeronde hoeken 43
De straal bepaald de mate van afronding. We kiezen bijvoorbeeld 25 Bevestig uiteindelijk met Stijl bijwerken Om onze nieuwe stijl te testen moeten we eerst wat inhoud toevoegen: Voeg nieuwe inhoud toe van het type Afbeeldingsstijl oef We voegen enkel wat foto's toe. Kies een bepaald thema en zoek van dat thema 5 foto's die je eerst op de computer opslaat. Merk op dat we bij het maken van het 44
inhoudstype voor Multiupload hebben gekozen. Dit werpt nu zijn vruchten af, want we kunnen in de verkenner de vijf foto's tegelijk selecteren en uploaden. Sla je de nieuwe inhoud op, dan zie je het resultaat. We hebben helaas nog geen ronde hoeken. Ga naar het Weergave Beheer van het inhoudstype Klik op het tandwiel naast het Afbeeldingsveld 45
Naast de vier standaard stijlen krijgen we nu onze nieuwe stijl te zien. Verander naar Ronde hoeken Klik op Bijwerken en bekijk het resultaat. Helaas: het werkt niet :( De reden is simpel de foto is een JPG en moet een PNG zijn. Hiervoor zetten we nog een module aan: We navigeren naar ons Afbeeldingsstijl en voegen een nieuwe effect toe: Kies bij de instelling voor PNG Tot slot moet je ervoor zorgen dat de effecten in de juiste volgorde worden toegepast. Pas dit aan door met het kruis voor de effecten te verschuiven van plaats. Vergeet niet op te slaan. Bekijk het resultaat Bij wijze van oefening: o Pas de straal van de hoeken aan naar 45 46
o o Zorg ervoor dat de foto's 500 x 250 groot zijn Zorg ervoor dat er in het hoofdmenu een link verschijnt die je doorverwijst naar de foto's. 5. Colorbox Colorbox is een module die ons toelaat om afbeeldingen weer te geven in een soort pop-up venster. De gebruiker kan dan door te klikken navigeren naar de volgende foto. Dit wordt veel gebruikt op bijvoorbeeld immo-sites. http://www.nobels.be/nl/ We werken voor dit deel rond de Sequoia --> download een aantal foto's van de Sequoia De module Colorbox is reeds meegeleverd met de distributie. Controleer of deze is ingeschakeld. Maak een nieuw inhoudstype met naam Colorbox Zorg dat de reacties gesloten zijn en er geen Auteur en datum wordt getoond Maak naast de standaardvelden een nieuw veld aan Afbeeldingen van het type Afbeelding met widget Multiupload (hierdoor kunnen we meer dan één foto uploaden) 47
Zorg ervoor dat het aantal waardes onbeperkt is. Vergeet je deze instelling, dan kan je maar 1 foto uploaden. Ga na naar de Weergave van het inhoudstype Kies bij het veld Afbeeldingen als formaat Colorbox. Klik vervolgens op het tandwiel om de Colrobox in te stellen. Neem de instellingen over zoals onderstaand voorbeeld. Klassikaal wordt besproken wat hier nu juist de opties zijn. 48
Sla alles op. Voeg nu nieuwe inhoud toe van het type Colorbox o De titel: Sequoia o Zoek op wikipedia een passend teksje o Upload al jouw eerder opgeslagen foto's van de Sequoia Sla op! Zorg voor een menulink in het navigatiemenu Bekijk het resultaat. --> UITDAGING 1. Zorg ervoor dat er boven de afbeeldingen geen label 'Afbeeldingen' getoond wordt. 2. Zorg ervoor dat de eerste foto in de inhoud medium wordt getoond, de rest thumbnail 49
50
Les 5 1. Inleiding De bedoeling van deze les is herhalen. Ik stel voor dat we dit doen aan de hand van een individuele/klassikale oefening. Om een beetje op te warmen begin ik met een instap: het favicon. 2. Favicon instellen Bij wijze van kleine inleidende oefening wijzigen we het favicon van onze site. Dit favicon wordt ook wel het snelkoppelingspictogram genoemd en is het logo dat verschijnt in de browser. Concreet zie je het verschijnen voor de titels van de site op de tabbladen of wanneer je een site opslaat als favoriet. Wil je een mooie aantrekkelijke site dan moet je als designer ook hieraan denken. Het logo dat we kunnen gebruiken heb ik voor jullie al klaargemaakt, sla dit even op, op jouw PC: Ga nu naar de instellingen van het thema Haal het vinkje weg bij Standaarsnelkoppelingspictorgram gebruiken Upload nu het eigen logo Sla de instellingen op en bekijk het resultaat: 51
3. Herhalingsoefening Op dit moment zou onderstaande reeds moeten lukken: Frontpage instellen Afbeeldingen van een thema aanpassen Een inhoudstype aanmaken Inhoud toevoegen Afbeeldingen weergeven o In de body o Met een Colorbox o In een veld Een afbeeldingsstijl aanmaken en toepassen Het hoofdmenu aanpassen Het navigatiemenu aanpassen Tags gebruiken De Teaser-weergave bepalen Om didactische redenen wijken we even af van ons thema fauna en flora. We gebruiken kaas en wijn als thema voor deze oefening. laat ons zeggen dat we dit onderdeel ontwikkelen voor een traiteur. Klik hier voor de bestanden We maken een nieuw inhoudstype aan 'Kazen'. Bekijk hieronder welke velden er gebruikt worden: Vooraleer je een inhoudstype maakt moet je eerst nadenken welke taxonomietermen je gebruikt. De wijze waarom we vorige les te werk zijn gegaan is 52
niet echt professioneel. Taxonomietermen leg je best vooraf eerst vast in 'woordenlijsten'. Maak woordenlijsten aan zoals hierboven Voeg in elke lijst een aantal termen toe o Kaastype: zacht, hard, schimmelkaas o Landen: België, Nederland o Melksoort: Koe, Geit, Schaap We kunnen nu het nieuwe inhoudstype aanmaken. Merk op dat we telkens gebruik maken van 'referentie naar term' maar ook steeds een andere selectiemethode gebruiken Bepaal de weergave van deze velden: Ook voor de teaser stellen we een aantal eisen: 53
Voeg een aantal kazen toe (minimum twee). Gebruik hiervoor Google en Wikipedia Om de kazen mooi weer te geven maken we nu een eerste keer gebruik van Views. Dit is een zeer populaire module in Drupal en wordt gebruikt om overzichten te maken van nodes. Dit is een eerste kennismaking met Views en wordt in een volgende les dieper uitgewerkt. Maak een nieuw overzicht met de volgende instellingen: We zorgen ook voor een menulink: 54
We maken nog een inhoudstype aan: 'Wijnen' Bekijk onderstaande afbeelding en trek conclusies over de gebruikte velden: Voeg een tweetal wijnen toe (gebruik Google en Wikipedia) Nu kunnen we de inhoud van het type "Kazen" combineren met die van "Wijnen". Zo stellen we een passende wijn voor bij elke kaassoort. Daarvoor moeten we eerst een module activeren: Entity Reference 55
Maak in het inhoudstype een nieuw veld aan 'wijnadvies'. Let hierbij op het gebruikte veldtype. Door het inschakelen van de module kunnen we nu Referentie naar een entiteit selecteren. Wanneer je nu de inhoud aanpast van de kazen zal je zien dat je een wijnsoort kan selecteren. Door een instelling is het niet mogelijk om op de wijnsoort te klikken en de inhoud daarvan te bekijken. We passen dit aan bij de weergave: 56
Les 6 1. Inleiding We starten deze les met een kleine instap: het installeren van een Captcha. Daarna herhalen we het aanmaken van inhoudstypes. Tot slot starten we met het eerste deel van Views. Bij wijze van informatie: Overzicht van alle modules: Klik hier Overzicht van alle thema's: Klik hier 2. Captcha We hebben eerst een module nodig. Deze is al geïnstalleerd maar nog niet geactiveerd: Wanneer de activatie afgerond is bekijken we de mogelijkheden. Bij de module Captcha kies je voor instellingen. Je zal merken dat je de keuze hebt: Wiskunde of afbeelding Test beide opties uit, bekijk ook even de instellingen bij de Image Captcha Ten slot raad ik jullie aan om de wiskunde captcha te gebruiken om frustraties in de toekomst te vermijden :) 57
3. Blok toevoegen Wat we nog niet hebben gedaan is het toevoegen van een blok. Zo gaan we bij wijze van oefening de openingsuren toevoegen. We doen dat in een blok. We zorgen er ook voor dat deze enkel zichtbaar is op de frontpage. Kies onder structuur: blokken - blok toevoegen: Onderstaand blok moet verschijnen onderaan de pagina en dit enkel op de frontpage: 4. Pathauto Pathauto is een module die ervoor zorgt dat de URL's automatisch worden gecreëerd naar een ingesteld patroon. Zoekmachines zoals Google zijn hier grote fan van. Indien de URL overeenkomt met de inhoud van de pagina, dan zal jouw site hoger scoren. Deze module stellen we even in. 1. Roep de instellingen op van de module Pathauto (deze module is niet standaard aanwezig in een Drupal installatie) 2. Je merkt dat je nu een patroon kan instellen per inhoudstype 3. Om een eenvoudige basis in te stellen is het voldoende het standaardpadpatroon aan te passen --> content/[node:title] 58
4. Wanneer je nu inhoud toevoegt van het type Artikel en je geeft deze inhoud de titel 'oefening' dan zal dit patroon volgende URL maken:.../content/oefening 5. Storend hier is die 'content' 6. Klik bij de tokens en kopieer: [node:content-type] 7. Bij het standaardpadpatroon vervang je content door bovenstaande. 8. Dit geeft als resultaat dat hij nu de naam van het inhoudstype gebruikt in plaats van 'content' 9. Helaas, dit werkt niet met eerder aangemaakte inhoud. 10. Om dit op te lossen moet je bij alle nodes onderaan bij URL-pad instellingen de vink wegdoen en weer aanzetten gevolgd door opslaan. 11. Conclusie: stel Pathauto in voor je voor de eerste keer inhoud toevoegt. 5. Views Views of Overzichten is een krachtige, veel gebruikte module in Drupal. Je kan velden van verschillende nodes van hetzelfde type verzamelen om zo een mooi overzicht te presenteren. Van waar de bezoeker dan kan verder klikken. Om het opzoek - en download werk wat te vermijden kan je hieronder op de link klikken voor de bestanden: Klik hier voor de bestanden We werken voor dit onderdeel rond het thema schilders. 1. Voorbereidend werk: Zorg ervoor dat er geen menu-linken zichtbaar zijn. Verander het logo en het favicon (afbeelding: zie gedownloade bestanden) Verander de naam van de site naar 'Schilderkunst' De Slide-show mag niet getoond worden Het navigatiemenu moet verborgen zijn 2. Inhoudstypes aanmaken: Voor deze oefening hebben we twee inhoudstypes nodig: Schilders en Schilderijen. Verder maken we een woordenlijst met taxonomietermen aan. Bekijk de screenshots hieronder en gebruik ze als leid draad voor het opstellen van de inhoudstypes en de woordenlijst. 59
60
3. Inhoud toevoegen Voeg minstens twee keer inhoud toe van het type schilders en schilderijen --> In totaal heb je dus twee schilders en twee schilderijen. Tijd over: voeg verder inhoud toe. Gebruik de eerder gedownloade bestanden. Merk op dat er zowel bij de schilders als bij de schilderijen een veld gelinkt is naar de inhoud: 61
4. Afbeeldingsstijl maken We maken een afbeeldingsstijl die ervoor zorgt dat de titel van de node verschijnt op de afbeelding: 62
5. Overzicht I We maken een eerste overzicht van de schilders. Structuur - Overzichten - Nieuw overzicht toevoegen 63
De titel van de inhoud zit standaard in het overzicht. Wij willen graag de foto van de schilder erbij: Bij de instellingen van dit veld passen we aan: Verder zorgen we ervoor dat het veld Titel niet wordt weergegeven. Verwijderen doen we niet omdat dit de werken van het overzicht kan beïnvloeden. Om ook het schilderij te kunnen zien moeten we een relatie leggen. Het zit namelijk zo dat in het inhoudstype Schilder geen afbeelding van het schilderij kan worden opgevraagd. 64
Klik op uitgebreid. Kies bij relatie 'toevoegen' Zoek op het trefwoord Schilderijen Kies de gerefereerde inhoud Voeg toe Voeg nu opnieuw het veld afbeelding toe, maar leg bovenaan de juiste relatie. 65
Vergeet niet op te slaan Bekijk het resultaat 6. Overzicht II Onze tweede overzicht is al wat complexer. Volgende elementen zullen aanwezig zijn: HTML van het veld herschrijven Colorbox geïntegreerd Filter optie op kunststromingen CSS Relaties 66
Les 7 1. Inleiding Een aantal zaken komen aan bod. Zo gaan we eerst de Drupal kern updaten. Vervolgens werken we verder aan onze overzichten van vorige les. Tot slot kijken we al even naar de installatieprocedure van Drupal. 2. Drupal Core Update Op 06/10/2016 is Drupal 7.51 uitgekomen. Dit is een update van de kern. Dergelijke updates moeten worden uitgevoerd via Third Party. Dit doen we even samen. --> klik onder rapportages op Statusraportage 1. Download het programma FileZilla 2. Download de update via drupal.org (of via de site) 3. Log uit op de site 4. De update wordt in een zip-bestand gedownload. Pak dit eerst even uit op de computer. 5. Maakt connectie met de server via FTP 6. Vervang alles in de map public_html behalve de map sites 67
7. Ga naar de website 8. Update de databank en eventuele andere modules. 9. Opmerking: beter om eerst een back-up te maken. Naast de kern bestaan er nog twee soorten updates: De kern --> Updaten via FTP Plugins --> Updaten via FTP Modules en thema's 68
--> Klik op 'beschikbare updates' / vink aan wat je wil updaten / doorloop de stappen / update de databank 3. Overzichten (deel 2) In het tweede overzicht van ons thema 'schilders en schilderijen' willen we een kleine afbeelding van het schilderij, een beetje uitleg en een afbeelding van de schilder. Bovendien kan de bezoeker het overzicht filteren op de kunststroming. Verder zal je bij klikken op de schilder worden doorverwezen naar de uitleg van de schilder, bij klikken op het schilderij start er een fancybox en bij klikken op de titel van het schilderij kom je bij de bijhorende uitleg. Tot slot passen we ook de html van de titels aan gevolgd door een beetje css om het overzicht wat aantrekkelijker te maken. Maak een nieuw overzicht met als titel 'schilderijen' Kies voor inhoud van het type schilderijen Voorzie een menulink in het hoofdmenu Plaats het overzicht in een raster van 2 kolommen Voeg de nodige velden toe: o Titel o Afbeelding o Body o Schilder o (het laatste veld komt hier lager aan bod) Instellingen per veld: o Titel: Geen label maken Linken naar oorspronkelijke inhoud Stijlinstelling: H2-element o Afbeelding Geen label Fancybox Large Per Field in Page Galery o Body: Geen label Opmaak: ingekort tot 150 tekens o Schilder: Geen label 69
Linken naar de node Om ook de foto van de schilder te zien moeten we eerst een relatie leggen die dus een link maakt met het inhoudstype Schilders. Een foto kunnen we namelijk niet terugvinden bij het inhoudstype Schilderijen. o Klik bij uitgebreid en kies bij relaties om eentje toe te voegen o Zoek de gerefereerde entiteit naar de schilders o Voeg nu opnieuw het veld afbeelding toe o Bij relatie kan je nu kiezen voor de toegevoegde relatie o Zorg dat de afbeelding als thumbnail wordt weergegeven. 70
Tot slot zorgen we ervoor dat de gebruiker het overzicht kan filteren op de kunststroming: o Kies bij filtercriteria om er eentje toe te voegen o Zoek de kunststroming o Zorg dat de filter als keuzelijst wordt weergegeven o Stel de filter zodanig in dat deze zichtbaar is en een aangenaam(er) label krijgt 71
Uiteindelijk krijgen we het resultaat: 72
Afwerking: o Zorg ervoor dat je bij de menu's een uitklapmenu krijgt waar je kan kiezen tussen de schilderijen en de schilders o We geven het raster ook de klasse views-align-center mee zodanig dat deze mooi gecentreerd worden. 73
Css aanpassen van de afbeelding van de schilder: o We dienen een klasse 'afgerond' toe aan het veld afbeelding o We voegen de CSS toe bij de css injector o Als resultaat krijgen we een aangenamer beeldje van de schilder 74
.afgerond img{ border-radius:15px; box-shadow: 5px 5px 5px #888888; } Opdrachten: o Verander het overzicht van de schilders van een raster naar een tabel. Kies uiteindelijk zelf het mooiste uit; raster of tabel 75
o Maak een overzicht van het inhoudstype bestuursleden, zorg voor een menulink 4. Hosting Wat je eerst en vooral nodig hebt is een hosting. Dit is eigenlijk een externe server waarop jouw site zal draaien. Uiteraard is dit niet gratis. Een aantal voorbeelden: www.futereweb.be www.combell.com www.one.com www.neostrada.nl Waarop moet je zeker letten: Aantal mogelijke databanken De prijs De service 5. Databank Voor we de feitelijke Drupal-installatie kunnen doen moeten we eerst een databank aanmaken. Vanaf hier werk ik verder met Futureweb. Wanneer Futureweb de betaling heeft ontvangen krijg je een mail met de nodige gegevens om jouw site te beheren. Vooral de inloggegevens voor het controlpanel zijn belangrijk. Het Control Panel geeft jou de mogelijkheid om de bestanden op de server te gaan beheren en het maken van een databank. Control Panel: 76
Databank beheer: Bestandenbrowser: 77
6. Drupal Core Wanneer de databank is aangemaakt kunnen we Drupal installeren op de server. Op het moment van het schrijven van dit onderdeel werken we met Drupal 7.50 ondanks het feit dat Drupal 8 reeds gelanceerd is. Dit doen we enkel en alleen omdat er in Drupal 8 op dit moment te veel kinderziektes zitten. Om een dergelijk drupal kern te downloaden is er één site belangrijk: www.drupal.org --> dit is de officiele website van Drupal Na wat klikwerk kom je uiteindelijk op een pagina waar de je 7.5 kan downloaden: Je zal merken dat je automatisch een zip-bestand binnenhaalt. Even uitpakken dus. De volgende stap is het connecteren met de server. Dit kan je het beste doen met FileZilla. Het eerder besproken FTP-programma. Upload de map met de Drupal-kern naar de map Public_html op de server. --> Surf met een browser naar keuze naar jouw website 78
Nu begint de feitelijke installatie: o Je zal de gegevens van de eerder gemaakte databank moeten ingeven. o Heb je dat gedaan, dan heb je een cleane install van Drupal. Dit wil zeggen dat je aan de slag kan maar dat er nog heel wat werk is om de website zo in te stellen dat je ermee aan de slag kan zoals je die kent van in de les: Het beheersmenu zal aangepast moeten worden De vertalingen zullen geïnstalleerd worden De CKeditor moet worden toegevoegd en ingesteld... 79
Les 8 1. Inleiding In dit hoofdstuk bekijken we views slideshow, een zeer interessante module die ons de optie biedt om inhoud in een diavoorstelling weer te geven. Steek dat bijvoorbeeld in een blok en je hebt meteen een blikvanger op jouw site. Verder bespreken we de instellingen van Fancybox. Een module die hard lijkt op de Colorbox maar meer opties aanbiedt. 2. Views Slideshow Met Views Slideshow kan je overzichten automatisch laten wisselen. Wanneer je van dit overzicht een blok maakt krijg je veel mogelijkheden. Zo zou je bepaalde zaken op de homepage kunnen laten opvallen zoals komende activiteiten of aanbiedingen. Binnen ons verhaal van de schilderijen willen we deze module gebruiken om de schilderen te laten 'sliden' op onze homepage. We hebben de module Views Slideshow nodig. Deze zit niet in de distributie. Opzoeken, koppeling kopiëren, installeren en activeren is de boodschap. Let op! Deze module is Third Party. Je moet in de map libraries een plugin installeren. Deze zit wel reeds in de distributie. (Indien ooit nodig: hier kan je de plugin downloaden) 1. Ga naar de instellingen van het overzicht van de schilderijen. En voeg een onderdeel toe: 80
2. Merk op dat het blok alle instellingen overneemt van de Page. Dit wil dan ook zeggen dat wanneer we hier instellingen aanpassen dat we moeten opletten dat we dit enkel op het blok toepassen en niet op de pagina. Dit is een fout die iedereen wel eens zal maken. 3. Verander om te beginnen het formaat, we gebruiken dit keer geen raster, maar een diavoorstelling. Deze is nu beschikbaar omdat we de module hebben geactiveerd. 4. Merk op dat je nu bovenaan kan bepalen op welk onderdeel deze aanpassing van toepassing is. VERGEET DIT NIET AAN TE PASSEN! 5. Klik nu onderaan op Toepassen (deze weergave) 6. Bij de instellingen van dit formaat kan je allerlei zaken gaan instellen. 1. De manier waarop de slides moeten verschijnen 2. De snelheid van de slideshow 3. Extra knoppen zoals vorige en volgende 4.... 7. Test er een paar uit en bekijk het resultaat. 8. Wat we hier niet nodig hebben is de titel bovenaan. Dit veld gaan we niet verwijderen uit het overzicht maar uitsluiten van weergave. 81
13. Aangezien we in het zelfde overzicht iets hebben toegevoegd werden alle instellingen overgenomen. Dit wil dus zeggen dat ons veld afbeelding nog is ingesteld op de Fancybox. We passen dit even aan. 14. Opgelet, opnieuw enkel toepassen op het blok en niet op de page. 15. Ons blok is klaar voor gebruik. Het enige dat we moeten doen is deze een plaats geven. 16. Via Structuur - Blokken is dit mogelijk 17. Wij plaatsten het blok nu in de Kop. Probeer eens een andere locatie uit. 18. Let wel, het blok mag enkel zichtbaar zijn op de frontpage: <front> 14. Een probleem. De titel van het overzicht is zichtbaar en eigenlijk storend. 15. Ga opnieuw naar de instellingen van het overzicht en verwijder de titel bij het blok. 82
3. Oefeningen Bovenstaande gieten we even in een oefening: Zorg ervoor dat wanneer je de node van een schilder bekijkt er een menuutje te zien is die de gebruiker eenvoudig naar een andere schilder laat springen. Concreet: Voeg bij het overzicht schilders een blok toe die de titel weergeeft. Het blok komt in de First Sidebar en enkel op de pagina's van de schilders. Ik heb de HTML van het veld aangepast naar H3 Maak bij het overzicht van de schilders een twee blok aan. Dit keer willen we de afbeelding van de schilders zien in een slideshow. Het blok komt ook in de 'First Sidebar' en is enkel zichtbaar wanneer er naar de inhoud van een schilder wordt gekeken. Maak hiervoor ook een nieuwe afbeeldingsstijl aan. Maak iets van 250 op 300 met afgeronde hoeken. Voor de rappe: geef deze afbeelding een schaduw. 83
4. Contextuele filter In de bovenstaande oefening hebben we nu telkens een soort van extra menu bij elke node van de schidlers. Om dit beter te maken gaan we ervoor zorgen dat wanneer Van Gogh bekeken wordt, deze niet 'kiesbaar' is in het menu. Dit doen we met een contextuele filter. Pas de instellingen aan van het overzicht. Les op: we passen maar één deel aan, dus alles dat je opslaat moet op 'deze weergave' staan. 1. Ga bij uitgebreid 2. Kies 'toevoegen' bij contextuele filter' 3. Voeg 'Inhoud: NID' toe (=node ID) 4. Stel de filter als volgt in: 84
5. Onderaan moeten we aanvinken dat wanneer er aan de filter wordt voldaan, de waarde moet worden uitgesloten van het overzicht. 5. Oefening Gebruik opnieuw een contextuele filter die ervoor zorgt dat de foto van de bekeken schilder niet wordt getoond in de slideshow onder het navigatiemenuutje. 6. Instellingen Fancybox De Fancybox wordt op dit moment gebruikt op ons overzicht van de schilderijen. We overlopen de instellingen. 1. Ga naar de modules en zoek op fancybox. 2. Kies instellingen 85
3. De kans is groot dat de Jquery Update voor het beheersthema zal moeten worden verhoogd naar 1.7 4. We overlopen de instellingen klassikaal. 5. Autoplay 6. Snelheid bepalen 7. Thumbnails plaatsen 8. Bedieningsknoppen 9. Manieren van openen, sluiten en overgang bepalen 86
87
Les 8 (deel 2) 1. Inleiding In dit hoofdstuk bespreken we de stappen die nodig zijn voor het opstarten van een eigen website. In de demonstratie werken we met een 'cleane install' van Drupal 7.51. Didactisch is dit interessant om even te tonen welke modules allemaal nodig zijn voor je eigenlijk van start kan gaan. Wat je zal moeten doen: 1. Databank aanmaken op de hosting 2. Drupal 7.51 uploaden naar de server 3. Drupal configureren 4. Modules installeren en instellen 5. Eerste stappen op de nieuwe site 2. Databank aanmaken Aangezien de meeste onder ons met Neostrada werken is dit onderdeel op basis van die keuze uitgeschreven Surf naar het control panel van jouw site, log vervolgens in met de gebruikersnaam en het wachtwoord (zie de ontvangen mail) Start de MySQL Database Wizard 88
Stap 1: kies een naam voor de databank. Veel gebruikt: 'root' Stap 2: Maak een user aan. Tip: gebruik als naam dezelfde als de databank naam, gebruik als paswoord hetzelfde als de hosting 89
Stap 3: Selecteer ALL PRIVILEGES Stap 4: databank is gemaakt, gebruiker is toegevoegd. 90
3. Drupal naar de server Benodigdheden: Uitgepakte versie van Drupal 7.51 op de computer FTP-programma (FileZilla) Inloggegevens van de hosting Log in op de hosting via FileZilla Upload de volledige inhoud van de map Drupal 7.51 vanaf de computer naar de map public_html op de server. --> klaar 4. Configuratie Surf naar jouw domeinnaam Het installatieproces kan beginnen Stap 1: Surf naar jouw website, kies Standard, Save and continue 91
Stap 2: Kies een taal, Save and Continue Stap 3: Vul de gegevens van de databank aan, Save and Continue Stap 4: configureer de site 92
Kies een e-mailadres Kies een gebruikersnaam (bijvoorbeeld: admin) Kies een wachtwoord (dit is het wachtwoord dat wordt ingegeven wanneer je /user intikt) Stel het land en de tijdzone in Sla op Stap 5: De installatie is voltooid, kies 'visit your new site' 93