Drupal Basis – 2017-2018 sem1... Drupal Basis 2017-2018 sem. 1 Lander Carrijn

www.scheldeland.net

Drupal Basis

2017-2018 sem. 1

Lander Carrijn

DrupalBasis LanderCarrijn 2

Inhoudsopgave

LES1................................................................................................................................................5KENNISMAKING.......................................................................................................................................5WATISDRUPAL?....................................................................................................................................5JOUWHOSTING.......................................................................................................................................5ANDEREBELANGRIJKESITES.......................................................................................................................6THEMA..................................................................................................................................................6MODULESINSTALLEREN............................................................................................................................8LOGOENFAVICON.................................................................................................................................11NAAMENSLOGAN.................................................................................................................................12BLOKKEN.............................................................................................................................................13INHOUDTOEVOEGEN..............................................................................................................................16

LES2..............................................................................................................................................19INHOUDTOEVOEGENENWEERGEVEN.......................................................................................................19

Inleiding........................................................................................................................................19Standaardinhoudstypes...............................................................................................................19Eigeninhoudstypes.......................................................................................................................19Inhoudtoevoegen.........................................................................................................................24Oefening.......................................................................................................................................26

PATHAUTO...........................................................................................................................................26

LES3..............................................................................................................................................29UPDATESVANMODULESENTHEMA'S.......................................................................................................29OPDRACHTEN.......................................................................................................................................30MENUINSTELLEN..................................................................................................................................32DROPDOWNMENU................................................................................................................................33HOMEPAGEINSTELLEN...........................................................................................................................34HERHALINGSOEFENING...........................................................................................................................34NIEUWVELD:LIJST.................................................................................................................................35PATHAUTOBULKGENERATE...................................................................................................................36WEERGAVEBEHEREN.............................................................................................................................37COLORBOX...........................................................................................................................................38

LES4..............................................................................................................................................43VOORBEREIDENDWERK..........................................................................................................................43AFBEELDINGSSTIJLEN:INTRODUCTIE..........................................................................................................43FOCALPOINT........................................................................................................................................45FLEXSLIDERALTERNATIEFVOORCOLORBOX................................................................................................47CSSINTRODUCTIE..................................................................................................................................48

Kleurmenubalk.............................................................................................................................48Afbeeldingennaastelkaar............................................................................................................51

TAXONOMIE.........................................................................................................................................52SIMPLEGOOGLEMAPS..........................................................................................................................55OPDRACHTEN.......................................................................................................................................56

Hetmaximaleaantalmenu-niveausaanpassen...........................................................................57Zelfeenmenulinkmaken..............................................................................................................57

LES5..............................................................................................................................................59DRUPALINSTALLEREN.............................................................................................................................59EERSTESTAPPENOPDESITE....................................................................................................................60CKEDITORAANPASSINGEN......................................................................................................................61


CKEditorSmiley.............................................................................................................................61CKEditorColorButton...................................................................................................................61CKEditorListStyle.........................................................................................................................62SimpleImagePopup.....................................................................................................................62

OEFENING............................................................................................................................................62MagnificPopup.............................................................................................................................63

LES6..............................................................................................................................................65VIEWS(DEEL1).....................................................................................................................................65

Inleiding........................................................................................................................................65Overzichtmaken...........................................................................................................................65Raster............................................................................................................................................69Oefening.......................................................................................................................................72

LES7..............................................................................................................................................73INSTAP................................................................................................................................................73CSSENVIEWS:SCHILDERIJEN...................................................................................................................73CSSENVIEWS:SCHILDERS.......................................................................................................................74

Vooraf...........................................................................................................................................74Afbeeldingsstijl.............................................................................................................................74Detail............................................................................................................................................75CSS................................................................................................................................................75Filtercriteriatoevoegen................................................................................................................77

UITSMIJTER..........................................................................................................................................80

LES8..............................................................................................................................................82TRUSTEDHOSTSETTINGS........................................................................................................................82VIEWS(DEEL3)....................................................................................................................................84

Entityreference............................................................................................................................84OEFENING............................................................................................................................................89

LES9..............................................................................................................................................95INLEIDING............................................................................................................................................95NIEUWTHEMA......................................................................................................................................95AFBEELDINGSGALLERIJEN........................................................................................................................96

Voorbereiding...............................................................................................................................96Plugins..........................................................................................................................................97Fotorama......................................................................................................................................97JuiceBox........................................................................................................................................98

YOUTUBEFIELD.....................................................................................................................................99OPDRACHT.........................................................................................................................................100

LES10..........................................................................................................................................101AFWERKENLES9.................................................................................................................................101

Nieuwebloksoort........................................................................................................................101Nieuwblokaanmaken................................................................................................................102CSSFooter...................................................................................................................................103Opdrachtjetussendoor...............................................................................................................103

VIEWSSLIDESHOW..............................................................................................................................104CAPTCHA...........................................................................................................................................108HERHALINGSOEFENING.........................................................................................................................110

LES11..........................................................................................................................................116HERHALINGSOEFENING(DEEL2)............................................................................................................116SUPERFISH.........................................................................................................................................118


HERHALINGSOEFENING(DEEL3)............................................................................................................119NAVIGATIEMENU...............................................................................................................................123HERHALINGTAXONOMIE......................................................................................................................127CONTEXTUELEFILTER...........................................................................................................................128

LES12..........................................................................................................................................130IMAGEFIELDZOOM.............................................................................................................................130OEFENING..........................................................................................................................................130SHUFFLEGRID.....................................................................................................................................136WATERFALLENEVA............................................................................................................................138

LES13..........................................................................................................................................141VOORBEREIDING.................................................................................................................................141ACHTERGRONDAFBEELDINGMETBACKGROUNDIMAGEFORMATTER...........................................................142

Alsveld........................................................................................................................................142Alsblok.......................................................................................................................................144Oplossingbanner........................................................................................................................147

MASONRY..........................................................................................................................................147Overzicht.....................................................................................................................................147

OPDRACHT.........................................................................................................................................148@FONT-YOUR-FACE.............................................................................................................................149OEFENING..........................................................................................................................................152

LES14..........................................................................................................................................154EENVOUDIGCONTACTFORMULIER..........................................................................................................154BEVEILIGENMETHONEYPOT..................................................................................................................158ADDANOTHER....................................................................................................................................159IMAGEPIN..........................................................................................................................................160IMAGEKICK.........................................................................................................................................162HERHALINGSOEFENINGEN.....................................................................................................................164

Oefening1..................................................................................................................................164Oefening2..................................................................................................................................164Oefening3..................................................................................................................................167Oefening4..................................................................................................................................167


Les1Kennismaking

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

WatisDrupal?

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: www.drupal.org

Jouwhosting

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:


cursist1.drupallessen.be ⇒ cursist2.drupallessen.be ⇒ cursist3.drupallessen.be ⇒ cursist4.drupallessen.be ⇒ cursist5.drupallessen.be ⇒ cursist6.drupallessen.be ⇒ cursist7.drupallessen.be ⇒ cursist8.drupallessen.be ⇒

Anderebelangrijkesites

► www.drupalschool.be ⇒ Hierop kan je de uitgeschreven lessen raadplegen

► www.drupallessen.be ⇒ Deze website gebruik ik om de oefeningen te demonstreren in de klas

► www.drupal.org ⇒ Dé website van Drupal, hierop vind je thema's, modules en bergen informatie

► www.drupalcursus.be ⇒ 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.


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


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 :)

Modulesinstalleren

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:


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'


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.


LogoenFavicon

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.


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.

Naamenslogan

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.


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.


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


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:


• 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!

Inhoudtoevoegen

• Voeg inhoud toe van het type eenvoudige pagina:

• Zet op 'volledige HTML'


• 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:


• 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


Les2Inhoudtoevoegenenweergeven

Inleiding

Inhoud toevoegen op een Drupalsite bestaat eigenlijk altijd uit twee onderdelen:

• Inhoudstype:eenaangepastekastmakenvoorbepaaldeinhoud• Inhoudtoevoegen:deaangepastekast(=inhoudstype)opvullenmetinhoud

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

Eenvoudigepagina(BasicPage)

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. HooveroverStructuur-Inhoudstypes2. KiesnuvoorInhoudstypetoevoegen


3. Wewerkenvanafnuverderrondonseersteonderwerpvandezemodule:SchildersenSchilderijen.Wegeveninheteerstevensterdanookeenlogischetitelaanhetdeheteerstevantweeinhoudstypes:Schilders

4. BijdeBeschrijvingkanjeeenbeschrijvendeteksttoevoegen.Dezekanhandigzijnvoordeadministratorzodatdezeweetwaarvoorhetinhoudstypedient.Nietzichtbaarvoordebezoeker.

5. Deinstellingenonderaandienenweookeventeoverlopen:

• Instellingeninzendingsformulier:

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


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. KliknuopOpslaanenveldenbeheren

7. Hetveldbodyisstandaardaanwezig.Merkopdatweeerderaleenanderveldhebbengemaakt:detitel.Nietzichtbaarindezelijst.


8. Wehebbenreedseenveldvoordeuitlegoverdeschilder(=body)endenaamvandeschilder(=title).Graaghaddenwenuookeenveldvoordefotovandeschilder.Klik+Veldtoevoegen

9. EenveldvoorhettoevoegenvaneenafbeeldinghebbenwereedsgezienbijhetinhoudstypeArtikel.Hetisdaaromaanteradenditveldopnieuwtegebruiken.Ditzorgtvoormeerstructuurindedatabank.KlikdaarombijEenbestaandveldhergebruikenenkieshiervoorAfbeelding

10. 'Afbeelding'ishiereenlogischekeuzevoorhetlabel11. WegaanOpslaanendoorgaan12. Inditvolgendevensterkanjeeenhelereekszakengaanbepalen.Ikoverloopde

belangrijksteinonderstaandeafbeelding.


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. KiesvoorInhoud-Inhoudtoevoegen-Schilders

2. Bijdetiteltypjedenaamvandeeersteschilder3. BijdeBodykopieerenplakjedetekstuitdegedownloadebestanden4. Bijdeafbeeldinggajedejuistafbeeldinguploaden5. RechtsinbeeldkiesjebijMenu-Instellingenvooreenlinkinhethoofdmenu6. BijdeURL-Pad-InstellingenkiezenweeenleesbareURLvooronzeeerstenode


7. KliknuOpslaanenpubliceren8. Jezietmeteenhetresultaat.Ziejeeentypefoutofbijvoorbeeldeenverkeerde

afbeeldingdanklikjeophetpotloodjeenkiestBewerken.

9. JemerktwaarschijnlijkhetwoordAfbeeldingopbovendefoto.Omditwegtewerkenmoetenwenaardeweergaveinstellingenvanhetinhoudstype.GanaarStructuur-Inhoudstypes-Schilders-Weergavebeheren


10. ZorgervoordathetlabelbijhetveldAfbeeldingverborgenstaat

11. Sladitevenopenbekijkhetresultaat12. Nuishetaanjullie.Voegaldeschilderstoe.Datzijnerintotaalzes.

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. Maakeennieuwinhoudstypeaan:Schilderijen2. Zorgvooreenafbeeldingsveldbijditinhoudstype3. VoegnuzeskeerinhoudtoevanhettypeSchilderijen.Gebruikdeeerder

gedownloadebestanden.4. ZorgvooreenmenulinkeneenmooieURL5. Hetlabelbovendefotomagnietzichtbaarzijn6. Extra:zorgervoordatjeeerstdefotozietendanpasdetekst

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!


1. Download,installeerenactiveerdemodulePathAuto(NEEMDEDRUPAL8-VERSIE)2. Jezalmerkendatjedemodulenietkanaanzetten(??).Deredenhiervoor:PathAuto

werktnietzonderCtoolsenToken.Dezemodulesmoetjeeerstinstalleren3. Opendeinstellingenvandemodule.Ditkanoptweemanieren:

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. Bijdieinstellingenmoetweenpatroonaanmaken.EensoortvansjabloondatweindetoekomstgebruikenvooralonzeURL-aliassen

1. HetpatroontypeishierInhoud2. WemakenhetPathpatternaan,gebruikhiervoordetokens3. Wezorgendatdezevantoepassingisopalonzeinhoudstypes4. Wegevenhetpatrooneenlogischenaam:Standaard


5. Omditgeheelnuuittetestenvoegenweeenschildertoe.Haalerzelfeentjevanhetnet.


Les3Updatesvanmodulesenthema'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:

• Dekern• Modulesenthema's

Het is deze laatste die we even bekijken.

1. GanaarRapporten-Statusrapportage2. Zoekvervolgensopdeverschenenpaginanaardegeleopmerking:

3. Kliknuopdeblauwelink'beschikbareupdates'4. Vinkinhetvolgendevensterallesaanenkies'Dezeupdatesdownloaden'

5. Inhetvolgendevensterwordtuaangeradeneenback-uptenemen.Datisgoedadviesmaarinhetgevalvanonzeoefensite(nog)nietnodig.KlikDoorgaan

6. Vervolgensmoetookdedatabankopupdateswordengecontroleerd.Voerdaaromhetupdatescriptuit.LetookevenopdeURL


7. TotslotkiesjevoorVoorpaginaendeallesstaatuptodate

Opdrachten

1. Opdehuidigehome-pageziejetelkensdeteaservandeschildersenschilderijen.Merkonderaanookdevolgendeenvorigeknoppenop!

2. Zorgervoordatenkeldeteaservandeschilderijentezienis

⇒ x6

3. Opdiezelfdehomepagezienwenuenkeldeteaservandeschilderijen.Eenkleinfotootjevanhetschilderijzouleukzijn.Ditkanjeregelenbijdeweergavevanhetinhoudstype.Kieshierditkeerwelvoordeteaser:

⇒


4. DownloadeninstalleeralsstandaardhetthemaProfessionalResponsiveTheme5. Zorgervoordat

1. Ergeencopyrightofcreditswordengetoond2. Desocialemediasymbolennietzichtbaarzijn3. Hetfaviconenlogoaangepastwordt.Gebruikeventueeldezeafbeelding:

6. Deblokkenmoetenaangepastworden.Zetopautohidden:1. Breadcrumbs2. Search3. FooterMenu

7. HetblokPageTitleisopnieuwuitgeschakeld.Schakelopnieuwin8. Zorgvooreennieuweafbeeldingtervervangingvanhetblauw/zwarteraster.

Gebruikvolgendefoto:

9. VoordiegenedieinplaatsvanInhoudnogsteedsContenthebbenstaangaanditevenvertalen:

1. GanaarInstellingenenkiesUserInterfaceTranslation2. InhetverschenenvensterzoekjenaarContentenjevertaaldhetvervolgens

naarInhoud


Menuinstellen

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. GanaarStructuur-Menu's-Hoofdnavigatie

2. Jezieteenlijstmetallereedsingesteldemenulinken.Merkookdekruisjesop.Metdezekruisjeskanjedevolgordeaanpassen.Zorgervoordat'Home'opdeeersteplaatsstaat.

3. Plaatsnudeschildersenschilderijenzoalshierboven.Ditwilconcreetzeggendatwedeschilderbijzijnschilderijgaanplaatsen.

4. Methetzelfdekruisjekanjenudeschilderijenlateninspringenonderdeschilder:


5. Dooropteslaankanjehetresultaatgaanbekijken.Ditzaltegenvallen.Deschilderijenklappennietuit.Wekerenterugnaardeinstellingenvanhethoofdmenu.NaastelkeschilderdienjeopBewerkenteklikkeneneenvinktezettenbijUitgeklaptWeergeven:

6. Resultaat:

Dropdownmenu

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. LoginopCpanel2. GanaardemapThemesenopenhethuidigethema3. KieshierdemapJS4. Downloadhetbestandcustom.js5. Openhetbestand6. plaknetvoordelaatsteregelhetvolgende:

$("#main-menu li a").removeAttr("data-toggle");

7. Slahetbestandop8. Uploadnuditbestandenvervanghiermeehetoude


9. Ganaardesite10. Eventueelrefreshofeenflushvandecache11. -->probleemzouverholpenmoetenzijn

Homepageinstellen

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. MaakeennieuwenodeaanvanhettypeEenvoudigepagina.1. Titel:Welkom2. Tekst:Welkomopmijnsite

2. ZorgervoordatdeURLnietautomatischgemaaktwordtengeefdezezelfin:/welkom

3. Sladitevenop4. GanunaarInstellingen-Systeem-Basissite-instellingen

5. PasdestandaardvoorpaginaaandoordejougekozenURLintegeven:

Herhalingsoefening

In de vorige les hebben we inhoud toegevoegd in inhoudstypes. We doen dit vandaag opnieuw ter herhaling.

Download de nodige bestanden

1. Voegeennieuwinhoudstypetoe:Musea2. Vergeetnietom'Auteurendatum'uittevinken


3. Voegeennieuwveldtoe:1. Veldtype:Tekst(plat)2. Label:Adres3. Indevolgendevenstersmogendeinstellingengewoonblijvenzoalszezijn

4. Voegopnieuweenveldtoe:1. Bestaandveld:Afbeelding2. Indevolgendevenstersmogendeinstellingenblijvenstaanzoalszezijn

5. Voegnude5museatoe,gebruikhiervoordegedownloadebestanden.Letop:eenmenulinkishiervoorlopignietnodig

6. AangezienwegebruikmakenvanPathAutoBulkGeneratehoefjejeooknietdruktemakenoverdeURL.(zielager)

Nieuwveld:lijst

Bij de musea willen we graag de mogelijk om in een lijstje te kiezen in welk land de verschillende musea zich bevinden.

• OpenhetveldenbeheervanhetinhoudstypeMusea

• Voegeennieuwveldtoe:


• Voegnuhandmatigeenlijstjeinmetmogelijkelanden.Wekiezenhierlogischerwijsdelandenvanonzemusea:

• Sladitopeninhetvolgendeveldkanjeookgewoonopslaan.• Bewerknutelkensdeinhoudvandemusea.Jezalmerkendatereenveldis

bijgekomenendatjehetlandkanselecteren:

PathAutoBulkGenerate

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. OpendeinstellingenvanPathAuto2. KlikophettabbladPatronen3. BewerkhetpatroonStandaard.Zetookeenvinkbijmuseaenslaop4. KiesbovenaanhettabbladBulkGenerate

5. Vinkinhoudaan,zoweetDrupalwatjewilgaanbijwerken


6. Kiesvervolgensookwelkealiassenjewilbijwerkenen/ofaanmaken7. KlikBijwerken8. Naeenaantalsecondeneneenvooruitgangsbalkverschijntereengroenemelding

methetaantalbijgewerkteURL's.ControleermaardooreenmuseumnaarkeuzetebekijkenendeURLtechecken.

Weergavebeheren

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. GanaarStructuur-Inhoudstypen-Musea-Weergavebeheren

2. Merknaasthetafbeeldingsveldhetkleinegrijzetandwieltjeop.

3. Klikdaarevenopenjekrijgtvolgendinstellingsveld:

4. Afbeeldingsstijl:


1. Geen:hierkiesjegewoondeoriginelefoto2. Groot:eenstijldiedeafbeeldinggaatbijsnijdenop480x480pixels3. Gemiddeld:idemmaardan220x2204. Miniatuur(Thumbnail):idemmaardan100x100

5. Linkafbeeldingnaar:1. Niets:wanneerdebezoekeropdefotokliktgebeurterniets2. Inhoud:deinhoudvandefotozalgetoondworden,inditgevalgebeurter

dusnietswantjekijktalnaardeinhoud3. Bestand:defotowordtgrootgetoondineennieuwvenster

6. Testdeverschillendemogelijkhedenuit.7. KiesuiteindelijkvoorGrootenBestand8. VergeetnietomtelkensopBijwerkenteklikkengevolgddoorOpslaan

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. Downloaddepluginnaardemapdownloadenzorgdatdezemooiuitgepaktklaarstaat.

2. WedownloadenhetFTPprogrammaFileZilla3. NumakenweconnectiemetdesiteviaFTP,openhetprogrammaFileZilla4. Bovenaankanjedoorhetinvullenvandegegevensinloggen,degegevenshebje

gekregenindebevestigingsmailbijhetaankopenvanjouwdomein


5. Wanneerdeconnectieisgelukt,danziejelinksinbeelddehardeschijfvanjouwcomputerenrechtsdemappenstructuuropdeserver

6. Zorgervoordatjeinhetlinkervensterdeuitgepaktemapcolorboxzietstaan.Rechtsopenjejouwsubmap

7. Maaknuzelfeenmapaanlibraries.Dezezitnietautomatischindeinstallatie.Naardetoekomsttoezullenallepluginshierinwordengeplaatst.

8. Zorgdatinhetrechtervensterdenieuwemaplibrariesgeopendis


9. Klikrechtsopdemapcolorboxenkiesuploaden

10. Keerterugnaarjouwsite.Download,installeerenactiveerdemoduleColorbox11. Voorcolorboxietsvannutkanhebbenmoetenweereerstvoorzorgendatwewat

meerafbeeldingenhebbenbijonzeschilders:

Download deze bestanden

12. Bewerknueenschildernaarkeuzeenprobeereensomeenfototoetevoegen.Ditgaathelaasniet.

13. Openhetveldenbeheervanhetinhoudstypeschilder

14. KlikopBewerkenbijhetveldafbeelding

15. Klikinhetverschenenvensterophettabbladveldinstellingen,wenegerenderodemelding

16. Onderaanziejedatdetoegestanewaardesop1staan,weveranderenditevennaarOnbeperkt


17. Vergeetnietopteslaan18. Bewerknudeinhoudvanalleeerdertoegevoegdeschilders,gebruikvervolgensde

inhoudvandegedownloadebestandenombijelkeschildertweefoto'stoetevoegen

19. Naditwerkopenjedeweergavevanhetinhoudstypeschilder

20. Pasnuhetformaataanvanhetafbeeldingsveldnaarcolorbox


21. Kliknuophetgrijzetandwielterhoogtevanhetafbeeldingsveld22. Weoverlopenvolgendeinstellingenklassikaal:

23. KlikzekeropBijwerkengevolgddooropslaan24. Bekijkhetresultaat25. Mogelijkopmerkingen/problemen:

1. Deafbeeldingenblijkennietallemaalevengroottezijn2. Deafbeeldingenstaannietmooinaastelkaaralsjenaardenodekijkt

26. -->problemenomoptelossenindevolgendeles


Les4Voorbereidendwerk

1. InstalleerhetprogrammaFileZilla

• Klikhiervoordedownloadsite

2. Installeerdevolgendemodules:

• AssetInjector• FieldFormatterClass• Libraries• FlexSlider• SimpleGoogleMaps• FocalPoint

3. PlaatsdepluginvoordemoduleFlexSlider(klikhier)indemapLibrariesopdeserver.

4. Downloadhierextrafoto'svanPabloPicassoenvoegdezetoeindedesbetreffendenode

⇒ Je kan de vijf afbeelding in één keer selecteren en uploaden = Multiupload

3. Zetbijdeweergavedehetformaatvanhetveldafbeeldingopnieuwopafbeelding/imageendeafbeeldingsstijlgemiddeld

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. GanaarInstellingen-Media-Afbeeldingsstijlen


2. Jezieteenlijstmetreedsbestaandestijlen.Wijmakenerzelfeentje:

3. Geefdezestijleenpassendenaam.Kiessteedseenlogischenaamzodatjelaterweetwaarvoorzedientofhoezeeruitziet.

4. Vervolgensvoegenweeenbewerkingtoe.KiesSchalenenbijsnijdenindelijstenvervolgensvoorklikjeopToevoegen

5. Geefnudegewensteafmetingenop:

6. Slaallesop.OpenvervolgensdeweergavevanhetinhoudstypeschildersenpasdeafbeeldingsstijlaanvanhetveldAfbeelding.Bekijkvervolgenshetresultaat.


FocalPoint

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. BewerkdenodePabloPicasso.Wanneerjenaardeverschillendeafbeeldingenkijktdanziejeoveraleenkleinwitkruisje.DitisaanwezigsindsdeinstallatieenactivatievanFocalPoint.VoorwehiermeeverderwerkenwillenweeerstdatdekleinefotootjesvanPicassowatgroterzichtbaarzijn,hieropdeplaatswaardeadmingaatinputten.OndertussenwetenwedatditbijdeformulierweergavezitvanhetinhoudstypeSchilders.

2. Kijkevennaarhetveldafbeeldingenpasdeafbeeldingsstijlaannaargemiddeldviahettandwiel

3. OmnuhetresultaattebekijkenbewerkenweopnieuwdenodevanPicasso.Deafbeeldingenzijngroter.Hetisnueenvoudigeromhetkruisje(=focuspunt)ophetessentiëlestukvandefototeplaatsten.Inonsgevalhethoofdvandeschilder.


4. Webekijkenevenhetresultaat.Jezalziendaternietsveranderd,hoevaakjeookvernieuwdofcachesleegmaakt.Hetisnamelijkzodatfocalpointsamenwerktmeteenafbeeldingsstijldiewenogmoetenaanmaken.Omnietopnieuweenstijlaantemakengaanweonzebestaandestijlbewerken.OpendeafbeelingsstijlenenbewerkdebestaandestijlSchalenenbijsnijden250x300

5. VoegeennieuwebewerkingtoeenditkeerkiezenwevoorFocuspuntschalenenuitsnijden.Opnieuw:aanwezigdoorinstallatievandemoduleFocalPoint

6. Uiteraardzetjedeafmetingenweerop250x300.Verwijdertotslotdeeerstebewerking.

7. ControleerhetresultaatdoorPicassotebekijken.Eventueelvernieuwenofflushen.


Flexslideralternatiefvoorcolorbox

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:

• Modulegeïnstalleerd• Pluginopdeservergezet• Kijkevenbijinhoudenmerkopdatereenaantalnodeszijnbijgemaaktmeteen

voorbeeldinvanFlexslider.Ditispuurterinspiratie.

In dit verhaal gaat het weer over wat de gebruiker te zien krijgt.

1. OpendaaromdeweergavevanhetinhoudstypeSchilders.PasvervolgenshetformaatvanhetveldImageaannaarFlexSlider

2. Viahettandwielkanjeverdergaaninstellen.Bekijkzekerookeensdeanderevoorbeelden.

3. ViaInstellingen-Media-FlexSliderkanjedealgemeneinstellingenvandeflexsliderinstellen.


CSSintroductie

--> 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:

• AssetInjector• FieldFormatterClass

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. GanaarInstellingen-AssetInjector-CSSinjectoromeennieuweCSSregeltoetevoegen


2. Denaamvandergelijkeregelmaakjebeststeedslogisch.IkbeginsteedsmetCSSgevolgddoormijnobjectdatikaanpas.Inditgeval:

3. Hetvolgendevensterzaldienenomonzecodeintevoeren.Maareerstevendit:

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. KlikrechtsopeenobjectdatjegraagwilaansprekenmetCSSenkieselementinspecteren


5. Vervolgenskanjemethetkleinepijltjeinhetvierkantjelinksbenedeneenbepaaldobjectbeterbekijken.

6. Kijkdaninhetrechtervenster,scrollenismisschiennodig,enpasevendeachtergrondkleuraanvandemenubalk.

7. Ditisnatuurlijkniet"echt"wanneerjeververstdanisdesiteonveranderd.SteljevoordatjeopdezemanierdekleurenvanGoogleevenkanwijzigen...

8. DecodediejehieruittestdienjenuteplakkenindeCSSinjector.Ikhebdezecodeinstukkengekapt.Downloadzehier

9. Webesprekenditklassikaal.Uiteindelijkzietdecodeeralsvolgtuit.


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. Kopieerdevolgendecodeenplakdezeineennieuwecssregel.

.naastelkaar img { float:left; padding:10px; }

2. SlaookdezeregelopenbekijkdenodevanPablo.Erisvoorlopignietsveranderd...


Om deze code ook door te voeren moeten we de velden koppelen aan deze CSS regels. Dat kunnen we regelen bij de weergave.

3. OpendeweergavevanhetinhoudstypeSchilder.4. Kliknuophettandwielbijdehetafbeeldingsveld5. BijFieldFormatterClasstypenwenudeklasse.Wetypenhiergeenpuntje!!

6. BekijkevendenodevanPablo.Ziejehetnietmeteen,verversenofflushen.

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 GSM-hoesje, 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.

• OpenviaStructuur-Taxonomiehetjuistevenster


• Kiesvervolgensdeoptieomeennieuwewoordenlijsttoetevoegen.Hierbepalenwedusonzecategoriewaarwelaterdandejuistetermenaantoevoegen.

• KliknuopTermtoevoegenenvuldeeerstetermin.Saop.KlikopnieuwopTermtoevoegenenherhaal.Uiteindelijkmoetenonderstaandetermentezienzijn:


Nu moeten we een manier zien te vinden om de kunststromingen te koppelen aan de schilderijen.

• Openhetveldenbeheervanhetinhoudstypeschilderijen.• Voegeennieuwveldtoeenkiesalsveldtype:referentie-taxonomie

• Geefeenpassendlabel:Kunststroming• Inheteersteinstellingsveldkanjealleszolaten


• Inhettweedeinstellingsveldmoetjenudejuistewoordenlijstkiezen:

• Wanneerjeditlaatsteopslaatishetinhoudstypeschilderijenaangepast.• Numoetjeelkschilderijvoorzienvandejuistekunststroming• Bewerkeeneersteschilderij:• Hetnieuweveldkunststromingisnutezien:

• Hetaanpassenvanautomatischaanvullennaarkeuzerondjeskanjeregelenbijdeformulierweergavevanhetinhoudstype

• Bekijknueveneenschilderijenklikopdekunststroming.Jezalmerkendatalleandereschilderijenvandezelfdekunststromingookgetoondzullenworden,ditwelinteaser-vorm.

• BekijkevendeURLvandiepagina-->optelossenbijPathAuto!

SimpleGoogleMaps

Deze module zorgt ervoor dat een eenvoudig tekstveld met een ingevuld adres wordt omgezet in een bruikbare Google Maps kaart.


• Downloadenactiveereerstdemoduleo Module:SimpleGoogleMaps

• Opendeweergaveinstellingenvanhetinhoudstypemusea.• Kiesnubijhetformaatvoor'GoogleMapformone-lineaddress'

• Openmeteenevendeinstellingenvanditformaatdoorteklikkenophettandwielenstelin:

o Degroottevandekaarto Hetzoomniveauo Detaalvandekaarto Waterverschijntopdekaart

• Nadezeaanpassingenwerkjebijenslajeop• Bekijkhetresultaatdooreenmuseumnaarkeuzetebekijkenviainhoud

Opdrachten

Gebruik onderstaande opdrachten om de vorige lessen te herhalen:

1. Wijzigdenaamvansitenaar:'DrupalWetteren'2. Zorgervoordatenkeldenaamwordtgetoondopdesite(logoensloganverbergen)3. BijhetinhoudstypeArtikelvoegjeeennieuwveldtoe:

1. Veldtype:tekst(plat)2. Label:Locatie

4. VoeginhoudtoevanhettypeArtikel1. Geefdezenodedenaam'Contact'2. Indebodyvuljedecontactgegevensvandeschoolinofdievanjezelf3. Bijhetveldlocatievoegjeeenbestaandadresin,datvanjezelfofdatvande

school4. Inhetafbeeldingsveldplaatsjehetlogovandeschool


5. Zorgvooreenmenulink'Contact'inhethoofdmenu5. Zorgervoordathetkaartjegrootgenoegisendatoverbodigelabelsverborgen

worden(WeergavevanhetinhoudstypeArtikel)6. Pasdemenubalkzodanigaandaterbijdeschildersteneersteeenschilderijwordt

getoondenvervolgensookhetmuseum:1. Renoir-->MuséeD'Orsay2. Ensor-->Antwerpen3. Klimt-->Belvedere4. Picasso-->ReinaSofia5. Monet-->Marmottant6. VanGogh-->MuséeD'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.

• Opendeinstellingenvanhetblok

• Pashetnuhetmaximaleaantalaannaar3

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:

• BekijkhetMuseéD'OrsayalsnodeenkopieerdeURL

• VoegeenlinktoeinhethoofdmenuviaStructuur-Menu's-Mainnavigation-Linktoevoegen


• Geefdelinkeennaam:'MuseéD'Orsay'• PlakbijdelinkdeeerdergekopieerdeURL• KiesalsbovenliggendonderdeelhetschilderijvanVanGogh


Les5Drupalinstalleren

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 4.

1. LoginopCpanel.Inmijngevalzoudatzijn:cpanel.drupallessen.be.Degebruikersnaamenhetwachtwoordkanjeterugvindenindebevestigingsmailvandehosting.

2. ZoekdeknopSubdomains

2. Vervolgensvuljeinheteersteveldeennaaminvoorhetsubdomain.DeanderetweeveldenwordenautomatischaangevuldwanneerjeCreateklikt.

3. KeerterugnaardehomepagevanhetCpanel

4. HelemaalonderaankanjenubijdescriptskiezenvoorDrupal.MentoonthierwelDrupal7,maarjekandatzodadelijkaanpassen


5. KliknuinhetverschenenvensteropInstall.1. KiesdeDrupalversie2. KiesopwelkdomeinDrupalmoetverschijnen3. Kieshetprotocol4. Kieseennaamvoordesite5. Kieseengebruikersnaameneenwachtwoordvoor/user6. Geefeengeldige-mailadresvooro.a..updatemeldingen

6. KlikopInstall-->evengeduld-->gakijkennaarjouwnieuwewebsite

Eerstestappenopdesite

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:

• Installeerenactiveerdevolgendemodules:o PathAutoo Tokeno ChaosToolso AdminToolbaro AssetInjector

• Installeerenactiveerhetvolgendethema(Merkopdatditjouweigenhostingis,jekanookzelfeenthemakiezen)

o Drupal8ZymphoniesTheme• ViaUiterlijk-Instellingen-drupal8_zymphonies_themekanjeervoorzorgendat:

o ErgeenSocialMediaIconstezienzijno Ergeencopyrightwordtgetoondo Ergeencreditswordengetoond

• ViaStructuur-Blok-LayoutverbergjeoverbodigeblokkenenschakelPageTitleino SiteBrandingo MainNavigationo MainPageContent

• Paseventueelhetlogovandesiteaan,alsookhetfavicon• Steleenhomepageinvoorjouwsite• Pasdebanner-afbeeldingaanvandesite(viaFTP)• Voegeennieuwblokwaarinjedebezoekerverwelkomt.Plaatsditinhetblokgebied

'WelcomeBannerText'• ConfigureerdemodulePathAutozodanigdatervoordeinhoudstypesBasicPageen

ArticlegebruiksvriendelijkeURL'swordengemaakt.


⇒ 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.

CKEditoraanpassingen

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


--> 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


1. Detitelvandenode:JacksonPollock2. Indebodyplakjedetekstalsplattetekstuithetword-document3. DetussentitelswordenwordenkoptitelsvanhettypeH1(tip:broncode)4. Geefdezetussentitelseentekstkleurnaarkeuze5. DeoplijstingvandeverschillendemuseageefjedaneennummeringmetRomeinse

cijfersmee6. Voegtotslotdedefototoe(Pollock_body).Wanneerdegebruikerhieropkliktdan

krijgjeeenpop-uptezien.7. Terafwerking:indegedownloadebestandenzittennogeenaantalextrafoto'svan

Pollock.Voegdezetoeinhetafbeeldingsveld.

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,installeerenactiveerdemodule2. Demodulegebruiktdeplugin"magnific-popup"(reedsgeïnstalleerd)3. Jepastditallesuiteraardtoeopdeweergave.4. Jemaaktbesttweenieuweafbeeldingsstijlenaan.Eentjevoordethumbnailseneen

tweedediedantoegepastwordtopdegeopendepop-up


5. Bijmijplaktendefoto'swattegendeonderrandvanhetscherm.JekanditmetCSSgaanregelen.GebruikMARGIN-BOTTOM


Les6Views(deel1)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. KiesvoorStructuur-Overzichten-Eennieuwoverzichttoevoegen

2. Inheteerstebeelddatverschijntkanjeeentitelgevenen-zeerbelangrijk-aanduidenvanwelkinhoudstypejeinhoudwilgaantonen.

3. Inditgevalkiezenwealstitel:SchilderijenengevenweInhoudweervanhettypeSchilderijen

4. Vervolgensbepalenwewatwewillenmaken:eenblokofeenpagina.Indezeoefeningkiezenwevooreenpagina.Blokisvooreenanderekeer.

5. WestellenvervolgensindatweeenTabelvanveldenwillenenookgraageenmenu-linkinhethoofdmenu:


6. KiestotslotvoorOpslaanenbewerken

7. HetvolgendevenstertoontinvolornaatdemogelijkhedenvanViews(=overzichten).Jemoetwetendatweeerderhebbenbepaalddatweveldenwillenweergevenintabelvormvanhettypeschilderijen.

8. Kijkevenbijvelden,daarzaljeziendaterreedséénveldstandaardaanwezigis:Titel.Datisaltijdhetgeval.scroljeevennaarbenedendanziejeindepreviewinderdaadonzeverschillendeschilderijenstaan

(OPMERKING: op bovenstaande afbeelding zie je maar één schilderij, ik heb er op deze site ook maar één opgezet..)

9. Kliknubijveldenoptoevoegenomookdeafbeeldingvanhetschilderijtetonen:

10. Inhetvolgendeveldkanjenueenvoudigzoekennaarhetjuistevelddoorgerichttegaanzoeken.Typinhetzoekvelddenaamvanhetinhoudstype:schilderijen


11. Inhetzoekresultatenmoetwenuzoekennaardeafbeeldingdievoorkomtinschilderijen:

12. Merkhieropdatditveldookinandereinhoudstypesvoorkomt.Eerderechterhebbenwijbepaalddatweenkelinhoudwillenzienvanhettypeschilderijen.Deviewzaldusenkeldeafbeeldingentonendievoorkomenindenodesvanhetinhoudstypeschilderijen.

13. Kliknahetaanvinkenvanhetjuisteveldopveldentoevoegeneninstellen

14. Eenaantalzakenkanjehierbepalen:1. Hetiseentabel,boveneentabelstaankoppenomaantegevenwaterineen

kolomgetoondwordt.Ditishetlabel.Inditgevalveranderenwehetlabelvanafbeeldingnaarschilderij.Ditispuurvoordebezoekereenaangenaambeeldteschenken.

2. Weplaatsengeendubbelepuntnahetlabel(Bijeentabelweergaveisditsowiesonietaanwezig)

3. Deafbeeldingsstijlbepaalddegroottevandeafbeelding.Dezepassenweevenaannaarbijvoorbeeld'gemiddeld'.Niettevreden,keerlaterterugnaardezeinstellingenenpasaan.

4. Welinkendeafbeeldingooknaardeinhoud.Wanneeriemandopdefotokliktdanzullenzemeerinfozienoverhetschilderij


15. BevestignuditgeheeldooreenklikopApply

16. ScrollevennaaronderenbekijkdePreview:

17. Omnuhetfeitelijkeresultaatteziendienenwedezevieweerstopteslaan,datisniethetgeval.AlsjenudusopTerugnaardewebsitezouklikken,danbenjealleskwijt!KlikeerstopOpslaan:

18. Keernuterugnaardewebsite19. Klikinhetmenuopdenieuwelink'schilderijen'enbekijkhet(voorlopige)resultaat.:

We werken dit overzicht nu verder uit naar een mooier geheel.

20. Omeenoverzichttebewerkenkanjeeenvoudigophetpotloodjedrukkenindiendeviewinbeeldstaat.Isditniethetgeval;kiesdanStructuur-Overzichten

21. VervolgenszoekjeindelijstnaarjouwoverzichtenjekliktBewerken


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. KlikbijFormaatopdehuidigeweergave:Tabel

2. KiesvervolgensvoorRasterenApply,ookinhetvolgendevensterklikjeApply,deinstellingeninditvensterzijnvoorlater.

3. Bekijknuonderaandevoorbeeldweergave.Merkhieropdatervoordetitelvanhetschilderijendefototelkenseenlabelstaat,ditisoverbodig.

4. KlikbijdeveldeneerstopTitel

5. Vinkvervolgens'eenlabelaanmaken'uit


6. Herhaalditomookhetlabelvandeafbeeldingwegtehalen.Uiteindelijkkrijgjeditinhetvoorbeeldonderaaninbeeld:

7. Detitelvanhetschilderijmagwatmeeropvallenengaanweeenandereopmaakmeegeven.Ookdeafbeeldingmagietsgroterzijn:

8. KlikbijdeveldenopTitel9. GanuietslagerinhetvensteropzoeknaarStijlinstellingen10. ZeteenvinkbijHTMLvanhetveldaanpassenenkiesvoorH1(Header1)

11. Pasditvervolgenstoe:Apply12. Kliknuophetveldafbeelding13. PasdeAfbeeldingsstijlaannaarLarge:

14. Pasdittoe:Apply15. Totslotwillenweookdeuitlegvanhetschilderijweergeven,nietalles,eenklein

stukjevandebodyvolstaat.Dezeuitlegstaatinhetveldbody.Wemoetendusdatveldeersttoevoegen

16. Klikbijdeveldenoptoevoegen

17. InhetverschenenvensterkanjebijSearcheenvoudiggaanfilteren,typ;Bodyenzeteenvinkbijhetjuisteveld:


18. Kliknu:Veldentoevoegeneninstellen19. Inhetverschenenvensterdienenwehetvolgendeaantepassen:

1. Opmaakhulpmiddel:Samenvattingofingekortetekst2. Limietvaninkorten:bepaalhetaantaltekensdatwordtweergegeven,kijk

eensof250goedgenoegis,indienniet,pasjediteenvoudigaan

20. Uiteindelijkkrijgjeeenonderaanvolgendresultaat:

21. OPGELET!OmalsonswerknietverlorentelatengaanMOETENweeerstopOpslaanklikken,doeditnu:

22. Jekanhetresultaatbekijkenoptweemanieren:23. KlikopTerugnaardewebsiteengebruikdemenu-link

24. KlikbijdeinstellingenvanhetoverzichtopPageWeergeven


25. Dekansisgrootdatdefoto'svervormdzijn.Deredenhiervoorishetaantalkolommeninhetraster,datisstandaard4.Beterzouzijnmoestenwedeinhoudweergevenin2kolommen:

26. Gaterugnaardeinstellingenvanhetoverzicht27. Klikbijhetformaatopinstellingennaasthetraster

28. Bijhetaantalkolommenpasjeaannaar2

29. Vergeetnietopteslaanenbekijkhetresultaat.

Oefening

De volgende oefeningen gaat geheel over deze les. We maken deze individueel of klassikaal afhankelijk van de groep.

1. Maakeennieuwoverzichtaan.2. Kiesvoorinhoudvanhettypeschilder3. KiesalsformaatRastervanVelden4. Legeenmenulinkinhethoofdmenu5. Inhetoverzichtdienenvolgendeveldenaanwezigtezijn:

1. Titel:geenlabel,HTMLvanhetveld:H12. Afbeeldingvandeschilder:Geenlabel,afbeeldingsstijl:gemiddeld3. Body:ingekort300tekens,HTMLvanhetveld:H4

• Bijdeafbeeldingenzittenersomsmeerdan1,wijwillenmaar1afbeelding.• KlikophetveldafbeeldingbijMeervoudigeveldinstellingen• pasaan:

• Resultaat:


Les7Instap

Pas even de header aan van het thema en zorg ervoor dat er geen websitenaam en slogan te zien is.

CSSenviews: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. DownloadHIERdenodigecodeenanderebestanden.2. MaakeennieuweCSSregelaanopbasisvanvorigestap.3. Wanneerjedevorigestaptoteengoedeindehebtgebrachtdanhebjeduseen

nieuweCSS-regelstaan.Dezedoetechternietsalsjedezeniettoepastophetoverzicht.

4. Gaachterdeschermenvanhetoverzichtenkoppeldeverschillendeclassesaanhetjuisteveld.Denaamvandezeclasseswerdenzelfbepaaldbijhetschrijvenvandecode.DetrucisomdezenutetypenbijhetjuisteveldZONDERpuntje.Voorhetveldafbeeldingzoudatzijn:

⇒

⇒


CSSenviews: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


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:

--> je doe doet dit met de grijze kruisjes voor de afbeeldingen

CSS

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:

• Detitel• Deafbeelding• Detekst• Hetgeheleraster


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

Detitel

We willen de titel groter en in een andere kleur. De code hiervoor is niet zo moeilijk:

• Debenamingvandeclassebepaaldeikzelf• Dekleurishierbenoemd,maarkanevengoedeenHEX-codezijn• Degrotevandetekstisuitgedruktinpunten

Deafbeelding

Graag ronde hoeken:

• Alshetgaatovereenafbeeldingmoetjeduidelijkbijdeklassenoterenvandaar'img'• Metradiuswordtdestraalbedoeltvandeafronding• Doordemargeaandetopplakkenzenietmeteentegenelkaar

Detekst

De tekst is breed uitgesmeerd onder de foto, beter zou zijn om deze even breed te maken als de afbeelding:

BELANGRIJK!

• Wewerkenhiernietmeteenaangemaakteklassemaarsprekenhierrechtstreeksdeklasseparagraafaan(p).Alswedithiernietbinnenteperkenhoudendanwordtdittoegepastopalleparagrafenoponzesite.Geloofmij,datzijnerveel.DaaromgaanwedezeCSSregelenkellatengeldenwanneerdebezoekerdepaginavandeschildersbekijkt.DitkanjeonderaandeCSS-regelinstellen:


Hetgeheleraster

Een laatste optie om ons overzicht wat te verfraaien is het centreren van de inhoud in ons raster.

1. Openopnieuwdeinstellingenvanhetoverzicht2. Kliknuopinstellingennaastrasterbijhetformaat:

3. VervolgensvuljebijAangepastekolom-klassedeklasseviews-align-centerin.Ditzalervoorzorgendatallesnetjesgecentreerdwordt.Ditisietsdatjenietzomaarkanuitvinden.Dergelijkeklassesbestaan.Detrucisomdezevanafnuteonthouden...

4. Slaallesopenbekijkhetresultaat.5. Helaas,detekststaathierdoornietmeermooionderdefoto.Ditheefttemakenmet

deinstellingvandemarges.Wewillendatditgewoonautomatischgebeurd.HiervoorpasjeevendeCSSaan:

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!


1. Opendeinstellingenvanhetoverzichtschilderijen2. Wevoegeneersthetveldkunststromingtoe.Kiesdaarvoorbijdevelden

'Toevoegen'

Bij Search kan je vervolgens zoek naar het juiste veld:

3. VinkKunststromingaanenpastoe4. Bijdeinstellingenpassenwetweezakenaan:5. BijdestijlinstellingenpasjedeHTMLvanhetveldaannaarH5

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. KlikResultatenherschrijvenopen7. ZeteenvinkbijUitvoervanditveldherschrijven.8. BijTekstkanjenuschrijvenwatjewilt.Jegaatnamelijkdeuitvoerherschrijven.Typ

hierdezin'Dekunststrominghieris'.9. OmvervolgenstelkensdejuistestromingtezienmoetjedeVervangingspatronen

gebruiken.Kopieerhier{{field_kunststroming}}enplakditachterdezin(vergeetdespatieniet)

10. Sladitgeheelvervolgensop


11. Hetresultaatkantegenvallen.Inmijngevalstondhetnieuweveldhalfverborgenachterdetitelvanhetschilderij.Probeerditevenzelfoptelossenaandehandvanvolgendetips:

1. Nieuweklasseaanmaken2. Margesjuistinstellen3. Nieuweklassekoppelen4. AllesplaatsjeindebestaandeCSS-regelvandeschilderijen

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:

• Opendeinstellingenvanhetoverzicht• BijfiltercriteriaklikjeopToevoegen

• ZoekinhetSearch-veldnaarhetjuisteveldenvinkaan,gevolgddooreenklikopfiltercriteriatoevoegeneninstellen

We stellen deze filter nu stap voor stap in.


• KieseerstvooreenKeuzelijst,datisaangenamervoordegebruiker.Merkhierookopdatjenudejuistewoordenlijstmoesthebben(Taxonomie)

• Inhetvolgendevensterbepalenwedatdezefilterdoordebezoekergebruiktkanworden:

• Eenbeetjelagerpasjeookhetlabelaan,datishetgeendatverschijntbijdefilter,zichtbaarvoordegebruiker:

• Slanuallesop,ookhetoverzichtentestuit!

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. Installeerenactiveerdemodule2. Maakeenpaginaaanwaarjedegebruikernaartoestuurtalszeklikkenop'ikwens

meerinformatie'3. Ganaardeinstellingenvandemodule


4. Bijdeinstellingenhoefjemaartweezakenzekertedoen:

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?


Les8TrustedHostSettings

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. Loginopdeserverviahetcpanel.2. Openvervolgensdefilemanager

3. Opendemapvanjouwsubdomein.4. Opennudemapsites.5. Pasdeschrijfrechtenaanvandemapdefaultnaar0755

6. Opendemapdefault7. Pasdeschrijfrechtenaanvanhetbestandsettings.phpnaar07558. Zorgdathetbestandsettings.phpgeselecteerdstaatenkiesbovenaandeCode

editor,klikdanindepop-upopEdit

9. Hetbestandsettings.phpgaatopen!10. Gaopzoeknaardetrustedhostsettings(Ctrl+F)


11. Jemerktdatdecodeineengroenekleurstaat,ditwilzeggendatdezenietwordttoegepast.Verderisditookeenvoorbeelddatwenudienenomtevormenvooronzesite.Wanneerikdatzoudoenvoorwww.drupalacht.drupallearning.bedanzoudecodeeralsvolgtuitzien:

12. Pasdecodeaan,toegepastopjouwsite.Sladitvervolgensopnadatjealleseentweedekeerhebtgecheckt!

13. Watonsnunogrestishetopnieuwaanpassenvandeschrijfrechten.Ditvoorsettings.phpmaarookvoordemapDefault.Pasaannaar0555/0444

14. Sluitvoorlopignietsaf.Keerterugnaarjouwsiteenbekijkdestatusrapportage:


Views(Deel3)

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.

Inhoudstypeaanpassen

1. Opendehetveldenbeheervanhetinhoudstypeschilderijen

2. Wevoegeneenveldtoe

3. Dekeuzevanonsveldtypeishierbelangrijk.Wewillenrefererennaarbestaandeinhoud.KiesdaaromdusvoorReferentie-Inhoud

4. GeefeenpassendlabelenklikOpslaanendoorgaan


5. Heteersteinstellingsveldgeeftonsdekanseventuelefoutenrechttezettenenjebepaaldookhetaantaltoegestanewaarden.Inditgevalisermaar1schilderperschilderij.

6. Inhetvolgendevensterbepalenwevervolgenswelkeinhoudergebruiktkanworden:

7. Naopslaanzienweonsresultaat.Merkopdatweinditinhoudstypeookreedseenreferentienaareentermhebben.Dezewerdgebruiktomtecategoriserenvolgenskunststroming.

Inhoudaanpassen

De kast is reeds voorzien van een nieuwe 'lade'. Nu is het aan ons om de bestaande inhoud (lees: schilderijen) aan te passen.

1. Openeenschilderijnaarkeuze,gebruikdemenulink

2. Klikbovenaanopdeknopbewerken(enkelaanwezigindieningelogd)


3. Merknuopdatjeonderaaneennieuwveldhebtbijgekregen:Schilder

4. Hetnadeelhierisdatditingesteldstaatalsautomatischaanvullen.Probeermaareensmetdeeerstelettervaneenschilder.Hierisdatopzichgeenprobleem,maaralshetgaatover100schildersdanisditnietzohandig.Wepassenditevenaaninhetinhoudstype.OpendeinstellingenvanhetinhoudstypeSchilderijenenkiesbovenaanvoorFormulierweergavebeheren.Datisnamelijkdeplaatswaarjekaninstellenopwelkemanierdedatamoetwordeningevoerd.

5. InhetverschenenvensterpasjenuhetveldschilderaanvanautomatischaanvullennaarKeuzevakjes/keuzerondjes

6. Sladitevenopenbewerkopnieuweenschilderijnaarkeuze.Merkopdathetveldaangepastis,jekannueenvoudigerdeschilderbepalen

7. Nuiserevenwatwerk.Elkschilderijmoetnuwordenvoorzienvanzijnschilder.Gebruikonderstaandelijst:

1. DeRust⇒VanGogh2. BalduMoulindelaGalette⇒Renoir3. DerKuss⇒Klimt4. Impression,soleillevant⇒Monet5. DeIntrige⇒Ensor6. Guernica⇒Picasso


Relatietoevoegen

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. Opendeinstellingenvanonsoverzichtschilderijen

2. Klikdeoptiesonderuitgebreidopen

Klik bij de relaties op toevoegen

3. Kiesnuvoordejuisterelatie,letop,vergissenishierbestmogelijk.Wedienenhiertekiezenvooreenrelatiewaarerverwezenwordtnaarietsandersvanuithetveldschilderdatvoorkomtindenodeschilderijen.

4. VoegdezeeventoeeninhetvolgendevenstermagjegewoonApplyklikken

5. Wevoegennuopnieuwveldentoe.Bijdeveldenklikjeoptoevoegenenjekiestvoorhetveldtitel.Hetisbelangrijkdatjenubijhetinstellingsvenstervanditveldderelatielegt.Doordezerelatietegebruikenzalnietdetitelvanhetschilderijverschijnenmaarweldetitelvandegerefereerdeschilder.Inonsgevaldusdenaamvandeschilder.


6. Voegnuopnieuweenveldtoe:afbeelding.Legookhierderelatieengebruikonseerdergemaakteafbeeldingsstijl

Grafischeaanpassingen

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. Klikophetveldtitel(metderelatie)1. Haalhetlabelweg2. KiesbijdestijlinstellingenvoorHTMLvanhetveldaanpassenenopteervoor

H33. Herschrijfderesultatenzodateruiteindelijkverschijnt:'Geschilderddoor

<naamvandeschilder>'

2. Voordeafbeeldingmakenweeersteennieuweafbeeldingsstijl:

3. Keerterugnaardeinstellingenenpashetveldaanmetdefotovandeschildernaaronzenieuweafbeeldingsstijl


4. Opdeafbeeldingvanhetschilderijzienwewatschaduw.Zorgervoordatdezeschaduwooktezienisopdefotovandeschilder

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. Voegeennieuwoverzichttoe

2. Gebruikonderstaandechecklistvoordeinstellingen

o Titel:Museao Inhoudvanhettypemuseao Paginamakeno Onopgemaaktelijstvanveldeno Menulinkinmain-navigation/hoofdnavigatie

3. Standaardziejeonderaanhetvoorbeeldstaan,hettitelveldisreedsaanwezig.Kliknubijveldentoevoegen

4. Gebruikhetsearchveldomtefilteren('musea')envinkdenodigeveldenaan:


5. Wanneerjenukliktveldentoevoegeneninstellendankrijgjevensternavensterdeinstellingenvandeaangevinktevelden.Onderstaandelijsttoontdeverschillendeinstellingenvanelkveld:

o Adreso opmaakhulpmiddel:Googlemapfromone-lineaddresso breedte:280hoogte:220o zoomniveau:18

o Afbeeldingo Afbeeldingsstijl:schalenenbijsnijden200x180

o Bodyo Opmaakhulpmiddel:ingekorto 250tekens

o Titelo HTMLvanhetveld:H1

6. Verwijderhetveldadres

7. Slaallesopenbekijkhetvoorlopigeresultaat.Wemerkenopdatwehetveldbodyhebbentoegevoegdmaarwezienhiervannietsterug.Reden?Erwerdgeenbodyingevuldbijdenodes.Downloadditbestandomelkmuseumtevoorzienvaneenbody(uitleg).KlikhiervooropInhoudenbewerktelkenseenmuseum.

8. Bekijkhetoverzicht.Ditzoueenvoorlopigresultaatmoetenzijn:


9. Zorgdaterinplaatsvangewoondenaamvanhetlandverschijnt:'Gelegenin<naamvanhetland>'

10. Zorgvooreenbruikbarefilterbovenhetoverzichtzodatdegebruikerdemuseakanfilterenophetland

11. Deafbeeldingkrijgteenschaduw,ditkanjedoendoordebestaandeCSStehergebruikenmaardezeheefteenrodekleur,maakdaaromeennieuweaan(ziepunt12)meteenanderekleur.

12. Jemerktnudaterteweinigplaatsistussendeafbeeldingendebody,detekstkomtindeschaduwtestaan.Ditkanjeaanpassenbijdenieuwgemaaktecode.

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. Omhetgeheelnunogaantrekkelijkertemakenzorgenweervoordatdemuseanaastelkaarstaanendatdezeineenkaderzitten.KopieeronderstaandecodeenplakdezeineennieuweCSS-regel('CSSoverzichtmusea')

.musea{ float:left; border:4px solid #0072b0; border-radius:15px; padding:5px;


margin:10px; box-shadow: 5px 5px 10px #888888; height:420px; width:420px; text-align:center; }

14. Omditooktoetepassenkeerjeterugnaardeinstellingenvanhetoverzicht.KlikvervolgensopinstellingenbijdeonopgemaaktelijstennoteerbijderijklassendenieuwgemaakteCSS-klasse

15. Wanneerjenaarhetresultaatkijktdanzietditeralveelbeteruit.Erzitwatniveau-verschildoordelangeretitelsvansommigemusea.Ditlossenwesimpelop.Ganaardenodeenpasdetitelsaan:

• MuseoNacionalCentrodeArteReinaSofia⇒ReinaSofia• KoninklijkMuseumvoorSchoneKunstenAntwerpen⇒KoninklijkMuseum

Antwerpen

16. Maakeennieuweafbeeldingsstijlaan:

17. OpendeinstellingenvanhetoverzichtMuseaenpasbijhetveldafbeeldingdeafbeeldingsstijlaannaarschalenenbijsnijden260x220

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. GanaarveldenbeherenvanhetinhoudstypeMusea2. Voegeenveldtoe:


3. Ganuviainhoudbijelkenodevandemuseahetschilderijgaanaanvullen:

• BalduMoulindelaGalette:Museed'orsay• DeIntrige:MuseumvoorschonekunstenAntwerpen• DerKuss:Belvedere• Guernica:ReinaSofia• Impression,soleillevant:MarmottantMonet• DeRust:Museed'orsay

4. GanaardeinstellingenvanhetoverzichtMuseaenvoegeenrelatietoe:

5. Opnieuwvoegenwenubijdeveldenhetveldafbeeldingtoemaarditkeerleggenwederelatie.Deafbeeldingsstijlhierisgemiddeld220x220

6. UiteindelijkkunnenwenogdehoogtevandekadersaanpassenindeCSS,diezijnnamelijkophetrandje:

⇒ Wijzig de height naar 500px


7. Zorgnogvoordeafwerkinginhetmenu,demuseakomenalslinkentevoorschijnonderdekopMusea


Les9Inleiding

Vorige week zagen we de release van 8.4.1 (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.

Nieuwthema

Als oefening en omdat we houden van verandering passen we het thema aan van onze site. We doen dit een logische volgorde:

1. InstalleerhetnieuwethemaNewsPlusLite2. Stelhetthemainalsstandaard3. Ganaardehomepagewanneerjehetthemaalsstandaardhebtingesteld4. Ruimdeblokkenop.Sommigenzijnoverbodig,anderenstaanerdubbelopenhier

endaarpasjebestdevolgordeaan.5. Uiteindelijkhebjevolgendresultaat:

(Op bovenstaande foto staat het blok 'tabs' niet op de juiste plaats)

6. Pasdesloganaannaar'Aboutpaintersandpaintings'7. Verbergdenaamenhetlogovandewebsite8. Downloadvolgendeafbeeldingnaardehardeschijfvandecomputer:

9. Download,installeerenopenFileZilla10. GraaghaddenwehetschilderijGuernicaalsachtergrondgebruiktvoordebanner.

Helaasgaatditnietdoordefotoupteloadennaardemagimagesvanhetthema.


Welgaanwedezeuploadenbijdecss-filesomvervolgenseencssregeloptestellenbijdeinjector.

11. Volgenderegelishetsjabloonvooronzecode:

.naamvandeklasse of #id { background-image: url("paper.gif"); }

12. Laatonsbovenstaandecodeeerstevenprojecterenoponsproject.13. Klaar?Numoetjeenkelnogdeafbeeldingopdejuisteplaatskrijgenopdeserver.

OpendaarvoorFileZillaofeenanderFTP-programma14. Navigeernunaarjouwdomein/sites/default/files/asset_injector/css⇒indezemap

plaatsjenuguernica.jpg15. Controleerevenhetresultaat

16. Desloganvanonzesiteisnietechtleesbaar.Zorgdatdezewatgroterstaatendezelfdekleurkrijgtalsdemenubalk

(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. Downloadeninstalleerdevolgendemodules:

• JuiceBox• Fotorama


2. Downloadviaonderstaandelinkdenodigeplugins/thirdparty-bestandenvoordemodules,dezezullenwelatersamenopdeserverplaatsen

• klikhiervoordeplugins

2. Zorgervoordatdepluginsuitgepaktindemapdownloadsstaan

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. OpenFileZillaenloginopdeserver.Inloggegevenswordenindeklasbezorgt.

2. Zorgdatjeinhetlinkervensterdeeerdergedownloademapjes'fotorama'en'juicebox'zietstaan.Hetrechtervenstertoontdanweerdemaplibrariesopdeserver:

3. Selecteernubeidemappeninhetlinkervenster,klikrechtsenkiesvooruploaden.(NOTE:slepenkanhierook)

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. PasbijdeweergavevanhetinhoudstypeSchilderhetformaatvanhetveldafbeeldingaannaarFotorama


2. Kijkbijdeinstellingenenzorgervoordaterbovendegetoondefotothumbnailsverschijnenvandeanderefoto'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. Gaopnieuwnaardeweergave-instellingenvandeschilders.2. PasvervolgenshetformaataannaarJuicebox-gallerij

3. Sladitmeteenopenbekijkhetresultaatinhetanderevenster.4. Wanneerjenuophettandwielkliktnaasthetveldafbeeldingkrijgjeeenreeks

instellingenvoordeJuiceBox.Weoverlopendezeklassikaal,uiteindelijkzoujeonderstaandeinstellingenkunnenovernemen:


5. Hetenigewatnunogstoortisde'merknaam'inderechterbenedenhoek.Hetzouleukerzijnmoestdezenietzichtbaarzijn.Maakeennieuwecss-regelaanenplaatseronderstaandecodein:

.jb-classifier-link-wrapper + div { opacity: 0; visibility: hidden; }

YoutubeField

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. DownloadeninstalleerdemoduleYoutubeField2. GanaarhetveldenbeervanhetinhoudstypeSchildersenvoegeennieuwveldtoe.

Doordemodulekanjenukiezenvoor'Youtube-video'

⇒

3. Voorweonsnieuweveldkunneninvullenmoetenweeersteeenfilmpjehebben.4. KlikHIERvooreenfilmpjeoverPollock5. KlikrechtsophetgeopendefilmpjeenkiesVideo-URLkopiëren


6. Keerterugnaardesiteenganaarhetmuseuminkwestie.Vervolgenskanjedienodegaanbewerken.MerknuopdatjeinderdaadeenveldFilmpjehebtbijgekregen.PlakdeeerdergekopieerdeURLindatveld:

7. Slaopenbekijkhetresultaat.8. Totslotbekijkenwenogevendeinstellingenvanditveld.Ditdienjetedoenbijde

weergavevanhetinhoudstypeMusea.Klikvervolgensophettandwielnaasthetbewusteveld:

⇒ 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. Ereenveldvideo-veldwordttoegevoegdbijhetinhoudstypeMuseaB. ErminstenséénmuseumwordtvoorzienvaneenfilmpjeC. Eropdehomepagevierblokkenverschijenzoalsinonderstaandbeeld:


Les10Afwerkenles9

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. Opditmomenthebbenweéénbloksoortmetdaarinéénveld:debody

-->

2. Kliknuop+Aangepastbloktypetoevoegenomeennieuwesoortaantemaken3. Geefdezeeennaameneventueeleenbeschrijving4. Eenshetnieuweblokisaangemaaktkanjeveldenbeheren

5. Wewilleneenveldwaarinweeenadresintypenomvervolgensalskaarttelatenverschijnen.Iedereenweetdatjedaneentekst(plat)-veldmoetnemen


6. Alshetveldeenfeitis,kijkdanmeteenbijdeweergaveenpasaan

--> -->

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. GanaardeAangepasteblokken-bibliotheek

2. Verwijderhetblok'Contact'

3. Voegnueenaangepastbloktoe


4. Merkopdatjenumoetkiezenwelkesoortjewilgaanaanmaken,kiesvooronzenieuwebloksoort

5. Voegnudenodigeinfoaan,hetveldbodyhebikzelfsleeggelaten.

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


ViewsSlideshow

Met de module kan je in blokformaat een leuke slideshow maken. Deze kan je bijvoorbeeld gebruiken op de homepage als blikvanger.

1. InstalleerdemoduleViewsSlideshow,hetisthirdpartymaarikhebdepluginvoorjulliereedsopdeservergeplaatst.

2. Wemakeneennieuwoverzichtaan.Gebruikonderstaandeafbeeldingenomdeeerstestapzelfuittevoeren:


3. Voegnueersthetveldafbeeldingtoe.KiesvooreenResponsivieImageenalsstijlgajevoorWide.


4. Hetveldtitelishieroverbodig,wegaanhetuitsluitenvanweergave

5. Totslotverwijderenweookdetitelvanhetoverzicht.Ditisanderszichtbaaropheteindresultaat

6. Onderaanziejedediavoorstellingreedsinwerking.KlikevenbijInstellingennaastDiavoorstelling.Jezalziendatjenoghetéénenanderkanregelen.Weoverlopenditklassikaal.


7. Hetblokisaf.Hetenigedatwenumoetendoenisheteenplaatsgeven.Gadaarvoornaarstructuur-blok-layout

8. Gaopzoeknaarhetblokgebied'PageIntro'enkies'blokplaatsen'.


9. Gaindeverschenenlijstopzoeknaarhetzonetgemaakteblokenkies'Blokplaatsen'.

10. Wewillenlievergeentitelzien

11. Totslotbepalenweinhetvolgendevensterdatditblokenkelzichtbaarmagzijnopdefront-page:

12. Slaallesopenbekijkhetresultaat.

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. Downloadeninstalleereerstdemodule

2. JekannudeinstellingenvandeCaptcha-moduleopenen:


3. Eerderhebjetweesoortencaptchageactiveerd.Dezekanjenuinhetinstellingsveldkiezen:

4. Nudienenwedemoduleteactiverenopdeinlogpagina.DitdoejebijdeCaptchaPoints

Zoek de inlogpagina en schakel de captcha in

5. KliknuopBewerkenomdecaptchatespecificeren.Jekanhieropnieuwkiezentusseneenafbeeldingofrekensom

6. Wanneerjenuuitlogtenopnieuwgaatinloggenkrijgjeafhankelijkvandeinstellingenderekensomofafbeelding:


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. Downloaddenodigebestanden2. Schakelallemenu-linkenvanonsthemaSchildersenSchilderijenuit.Ditkanjedoen

viaStructuur-Menu's-Hoofdnavigatie.Doordehoofdlinkenuittevinkenenopteslaanverbergjemeteenookalleonderliggendelinken.

3. Indegedownloadebestandenvindjeeennieuwebannervoordefrontpage.1. Inbepaaldethema'szoujeditmetfilezillakunnenuploadenopdeserver2. Inonshuidigthemagaatdathelaasniet,zorgervoordatdebannerverschijnt

metCSS4. Desloganvandesitemagzichtbaarblijvenmaarvoervolgendeaanpassingendoor:

1. tekst:'Aboutbandsandmembers'2. Kieseenanderekleureneengroterlettertypevoordeleesbaarheid


5. Maakeennieuwinhoudstypeaan:Band.Gebruikonderstaandeafbeeldingenvoordevelden:

(--> Vergeet Auteur en datum niet uit vinken)

(--> Gebruik bij voorkeur bestaande velden)

6. VoegnuinhoudtoevanhettypeBand.Gebruikdegedownloadebestanden.1. TheBeatles+groepsfoto2. TheRollingStones+groepsfoto3. PinkFloyd+groepsfoto


7. ZetbijdeweergavehetlabelvanhetveldAfbeeldingverborgen8. Zorgervoordaterinhetmenudrielinkenterugtevindenzijn:

9. GebruikPathAutoBulkGenerateomdeurl-aliassenvandedriebandsaantepassen.Alsjekijktindeadresbalkzijndieopditmoment.../node/31bijvoorbeeld.Ditmoetworden.../band/thebeatlesbijvoorbeeld.

10. Maakeennieuweafbeeldingsstijlaan:


11. Pasdezeafbeeldingsstijltoeophetveldafbeeldingvanhetinhoudstypeband,doeditbijdeweergave.

12. Indegedownloadebestandenvindjeeenafbeeldingterug'music.gif'datiseenkleinfotootjedatwegerepeatedwillenzienverschijnenopdehomepage(ENKELopdehomepage):

13. Kijkopdehomepagemetdeelementinspectornaardenaamgevingvanditgebied.Testevenuitdoordeachtergrond-kleurtewijzigen,danweetjezekerdatjehetjuistegebiedgevondenhebt.

14. KopieerofonthouddienaamenmaakeennieuweCSS-regelaan,geefdezeeenvoorjoulogischenaam.

15. Zorgervoordatalsachtergronddeafbeeldingmusic.gifverschijnt16. Ditmagenkelopdehomepagehetgevalzijn!17. Dehomepageisnunogafgestemdoponzeschilders.Pasdaaromaanzoalsop

onderstaandeafbeelding.WiljegraagdezelfdeafbeeldingklikdanHIER


18. OmookdezelfdekleurenenopmaakteverkrijgenmoetjegaanroerenindeHTML-soep,roepdezeopmetdeknopBroncode.Devolgendescreenshottoontmijncode,nietzoproper,maarzewerktwel.

19. Opdehomepagestaatonsblokmetschilderijennogtedraaien.Wegaanditvervagendoorhetzelfdemaardanmetdebandleden.

1. Verbergeersthetblokmetdeschilderijen2. Gebruiknudelesinhoudvanheteerstedeelvandezelesomeenblokte

makenmetdaarineendiavoorstelling.DezekomtopdeFrontPage.Eenaantaltips:

1. Hetgaathierovereenoverzichtvanhetinhoudstypebands,geenpagina,weleenblok

2. Plaatshetblokindehetjuisteblokgebied3. HetblokisenkelzichtbaaropdeFrontPage4. Jezaleennieuweafbeeldingsstijlmoetenaanmaken


OPMERKINGEN:

1. Ophetmomentvanschrijvenwerkenwemetversie8.4.22. FocalPointwerkthiervoorlopigniet3. Ikmerkdanaeenaantalcron-uitvoeringen,refreshesencacheflushesde

background-imagesverdwijnenvandeserver.


Les11Herhalingsoefening(Deel2)

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:


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:


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 1 2017-2018) 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


Herhalingsoefening(Deel3)

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:


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:


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:


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:


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.

NavigatieMenu

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.


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:


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:


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.sf-menu.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 }


14. Resultaat:

HerhalingTaxonomie

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.


Contextuelefilter

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 450 6. 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


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


Les12ImageFieldZoom

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. DownloaddepluginvoorImageFieldZoomenplaatsdezeindemaplibraries2. DownloadeninstalleerdemoduleImageFieldZoom3. OpendeweergavevanhetinhoudstypeBands4. VeranderhetformaatvanhetveldafbeeldingnaarImageZoom

5. KlikvervolgensophettandwielvoordeinstellingenvanImageFieldZoom.Webesprekendezeklassikaal.

Oefening

1. Maakeennieuwinhoudstypeaan.Gebruikonderstaandeafbeeldingenomdattoteengoedeindetebrengen:


2. InonderstaandeafbeeldingziejehetveldBand.Ditiseenreferentienaarinhoud,meerbepaald'Band'.

3. BijdeFormulierweergavepasjehetveldBandaan:

4. VoegnuvierkeerinhoudtoevanhettypeGreatestHits


• Node1:o PaintitBlacko https://youtu.be/O4irXQhgMqgo TheRollingStones

• Node2:o YellowSubmarineo https://youtu.be/vefJAtG-ZKIo TheBeatles

• Node3:o WishYouWhereHereo https://youtu.be/IXdNnw99-Ico PinkFloyd

• Node4:o HeyYouo https://youtu.be/TFjmvfRvjTco PinkFloyd

5. OmdeGreatesthitsmooiweertegevenmakenweeenoverzichtaan:


6. Voeghetveldfilmpjetoe:

7. Voegookhetveldbandtoe,pashierdeHTMLvanhetveldaannaarH1


8. KlikbijdeveldenoptitelomookhierdeHTMLvanveldaantepassen,H2

9. OmhetgeheelmooiertemakenplaatsenwewatCSSophetoverzicht.Aangezienwebezigzijnmethetoverzichtzettenweklasse,diewestraksmaken,alopdejuisteplaats:


10. MaaknueennieuweCSS-regelaan

.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:


ShuffleGrid

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. Downloadeninstalleerdemodule2. Eenpluginishierzekernodig,voordesportkrijgjepluginniet.Klassikaallossenwe

ditprobleemop.3. Maakeennieuweafbeeldingsstijlaan:

4. MaakeennieuweCSS-regelaan"CSSoverzichtmuzikanten".Plakerdevolgendecodein:

.shufflefoto img { padding:5px;


border:solid; border-color:#FF8C00; } ul.inline, ul.links.inline { display: inline; padding-left: 0; margin-left: -5%; }

5. Maaknueennieuwoverzichtaandatvoldoetaanvolgendeeigenschappen:1. Naam:Muzikanten2. Inhoudvanhettypebandleden3. Paginamaken4. Formaat:SuffleGridvanVelden5. Geenpaginering6. Menulinkinhethoofdmenu

6. Voegnuhetveldafbeeldingtoemetalsstijlfocalpoint250x350enlinknaardeinhoud

7. Openeensdeinstellingenvandeshufflegrid.Onderaanstaatzeerinteresantelectuur!

8. Blijkbaarkanjeautomatischfilterenindieneraaneenaantalvoorwaardenwordtvoldaan:

1. Ermoeteenveldmetreferentienaarinhoudzijntoegevoegd2. Datveldmoetmeervoudigzijnendeseperatormoeteenverticalelijnzijn

à

9. Voeghetveldinstrumenttoe10. Zetdemeervoudigeveldinstellingenjuist11. Verberghetveldinstrument12. Verbergookhetveldtitel13. KeerterugnaardeinstellingenvandeShuffleGridensteljuistin14. Opennogevendeinstellingenvanhetafbeeldingsveldenvuldecssklasseaan

(shufflefoto)


WaterfallenEVA

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 Veldtoevoegenaaninhoudstypeo Inhoudtoevoegenbijdebandso EenoverzichtmakeneninstellenvanhettypeWaterfallo Zorgendatdieviewzichtbaarwordtbijdeband(EVA)o Zorgendaterenkelefoto'svandebandsdiebekekenwordtzichtbaaris

(contextuelefilter)

En nu concreet:

1. Downloaddeextraafbeeldingennaardecomputerenpakzeuit2. DownloadeninstalleereerstdemoduleEVA:EntityViewsAttachementenViews

WaterfallDisplay3. MaakeennieuwveldaanbijhetinhoudstypeBand:

1. Extraafbeeldingen,waardesonbeperkt2. Uitgeslotenvanweergave

4. Bewerktdeinhoudvandeverschillendebandsenvoegdeextraafbeeldingentoe,lethierbijophetvermeldenvandetitelendealt-tekst

5. Maakeennieuwoverzichtmetvolgendekenmerken:1. Naam:extraafbeeldingenbands2. Inhoudvanhettypebands3. Paginamaken4. WaterfallDisplayvanvelden5. Geenmenulink6. Geenpaginering

6. Voegnuhetveldafbeeldingtoebijdeveldenenstelin:


7. Uiteindelijkhebjetweevelden,verbergnuooktitel

8. Opditmomenthebbenweweleenwerkendoverzichtmaarhetisnognietzichtbaarvoordebezoeker.Hetisdanookeenspeciallekeomdatwegeenmenu-linkleggenenwemakenerookgeenblokvan.EVAkomthieropdeproppen.

9. Viadeknop+ToevoegenkanjeEVAtoevoegen


10. Concreetmerkjenunietzoveelverschil.BovenaanhebjedepageendaarnaastdeEVA.Beideweergavenhebbenexactdezelfdeinstellingen.Zeergoed.

11. DeEVAmoetnuwelnogconcreetaanhetjuisteinhoudstypegekoppeldworden:

12. Slaallesopenopendeweergavevanhetinhoudstypeband,jemerktdaareennieuwveldop.Controleerevenofdezenietbijdeuitgeschakeldestaat:

13. Bekijkéénvandebands,jemerktdatdefoto'szichtbaarzijn.Maarhelaas,hetzijnALLEfoto'sennietenkeledievandebandwaarjenaarkijkt.

14. OpendeinstellingenvanhetoverzichtbijdeEVA-weergavevoegenweeencontextuelefiltertoe:


Les13Voorbereiding

1. PlaatsDEZETWEEPLUGINSopdeserverindemaplibraries.DezeisnodigvoordewerkingvanMasonryViewsenMasonryAPI

2. SchakeldemodulesMasonryViewsenMasonryAPIin.Ditzijngeencore-modules,eveninstallerendus.

3. Download,installeerenactiveerdemoduleBackgroundImagesFormatter4. Download,installeerenactiveerdemodule@font-your-face

OPMERKING: bij het inschakelen van @font-your-face kan je mogelijks een foutmelding krijgen, keer met de browserpijlen een pagina terug, zou vervolgend geen probleem mogen zijn.

5. Maakeennieuwecssregel:


Label:

CSS block achtergrond gerelateerd

Code:

.block { padding:0; }

Kenmerk:

Enkel van toepassing op de homepage

AchtergrondafbeeldingmetBackgroundImageFormatter

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. Wegaanineersteinstantiezorgenvooreenblijvendeachtergrondvanmuzieknotenopdefrontpage.Plaatsvolgendefotoevenopdehardeschijf:

2. OnzehomepageisvanhettypeEenvoudigpagina.Wemakeneennieuwveldaanbijditinhoudstype:

3. Voegeenafbeeldingsveldtoe,alt-veldentitel-velduitschakelen4. Deweergaveishierbelangrijker:

5. Klikopdetandwielen,weoverlopenklassikaal:


6. Bewerknudeinhoudvandehomepage,voegdemuzieknotentoealsachtergrondafbeelding.

7. Wezijnerbijna.WegebruikennuwatCSSomdathetkan:

(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:


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. Downloaddefoto's.Dezehebiknamelijkopvoorhandaleenbeetjedoorzichtiggemaakt.

2. Navigeernaardejuisteplaatsomditallemaalteregelen:Structuur-Blok-layout-Soorten

3. Voegeennieuwsoortbloktoe:

4. Geefdatnieuwsoortbloknueentiteleneventueeleenbeschrijving


5. Inhetvolgendebeeldkanjebijnahetverschilnietzientussenhetmakenvaneeninhoudstypeofdatvaneenbloktype.Voegdusopdegekendewijzehetveldafbeeldingtoe.

6. PasbijdeweergavehetformaatvanditveldaannaarBackgroundImage.Kijkhierondervoordeinstellingen


⇒ De size drukken we hier uit in procenten om de afbeelding responsive te maken. 120 % is misschien te veel, experimenteer gerust!

7. Slaallesop.Denieuwebloksoortiseenfeit.8. Voegeennieuwbloktoe.Jezalmerkendatjeditkeermoetkiezenwelkesoortblok

jewiltoevoegen:

9. Voegnueennieuwachtergrondblok,ditdoejedusdriekeer,voorelkeband:1. Blokbeschrijving:achtergrondbandnaam2. Body:leeglaten(ditveldmagduseigenlijkverwijderdworden)3. Achtergrondfoto:bladernaardegewenstefotovoordeachtergrond

⇒ Ga verder naar het volgende beeld

13. Titel:nietweergeven14. Pagina's:enkeletonenopdepaginavandedesbetreffendeband15. Gebied:inhoud

⇒ Opslaan en controleren


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 CSS-code:

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. Maakeennieuwoverzichtmetdevolgendekenmerken:1. Naam:Foto's2. InhoudvanhettypeBands3. Eenpaginamaken4. Masonryvanvelden5. Menulinkinhethoofdmenu

2. Velden:1. Titel:uitsluitenvanweergave2. Extraafbeeldingen:


3. Zorgdatalleitemswordenweergegeven,doeditbijpaginering:

4. Testuit!5. UiteraardishetresultaatnetnietperfectenishetgebruikvanCSSopnieuw

onvermijdelijk.Ukanvolgendecodegebruiken:

.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'


@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. Nadatjedemodulehebtgeïnstalleerdkrijgjebijhetuiterlijkeennieuwmenu-item.Klikdaarevenop.

2. Eerstmoetenwedefontsimporteren.Hetzijnereenhoop,meerdan4000wezullenhierduswatgeduldmoetenhebben.

3. KlikjenubijBrowsedanziejedeverschillendefonts.Klikerenkeleaandiejewilgebruiken.Letop,nietteveelwantalleingeschakeldefontswordengeladenindesite.Eengrotehoeveelheidzoudusdesnelheidvandesitekunnenbeïnvloeden.


4. Klikjenuopdetitelvanhetlettertypedanverkrijgjedecss-code.

5. MetdeCSSinjectorkanjedezenugaanimplementeren.Jekandezecodenuoveralgaantoepassen,vaneentiteltotdedoorlopendetekstindebody

6. Kopieer(ziestap4)decodevanhetlettertypedatjegraagwilgebruiken.7. Wijgaandemenulinkeninonzemenubalkvoorzienvaneenlettertypenaarkeuze.

Hiermoetenmeteennadenkenwantwekijkenhiernietnaareen'normaal'menu.WewerkenmetSuperfish.Openeensdeinstellingenvandatspecifiekeblok

8. DoorhetgebruikvanSuperfishzijndeinstellingenbijzonderuitgebreid.WijzoekenhiernuspecifieknaareenplaatswaarweCSS-klassenkunnentoevoegen.Kijkeensonderaanbijdegeavanceerdeinstellingen.


(in bovenstaand voorbeeld gebruik ik lettertype als klasse, deze heb ik zo gekozen en vervolgens bij de CSS-injector aangemaakt)

9. Bijdedrieverschillendeoptiestypenwenudezelfdeklasse,wewillennamelijkvoorallemogelijkemenu'shetzelfdelettertypegebruiken.

10. SlaallesopenopendeCSS-injector.Daarmakenweeennieuweregelaan.Afhankelijkvanjouwgekozenlettertypezaldieernuandersgaanuitzien.Inmijngevalhebikdit:

11. Bekijkhetresultaat


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. Zorgvooreenoverzichtdatdeverschillendeschilderijentoont,ditoverzichtkanjeoproependooreenmenulinkinhethoofdmenu

2. Bovenhetoverzichtmoetendeverschillendekunststromingenzichtbaarzijn,jekandaarvervolgensmeegaanfilteren

(op bovenstaande afbeelding is het resultaat reeds te zien van opdrachten die hieronder pas beschreven staan)

3. DeeerderingesteldeCSS-regeldievooreendoorzichtigeachtergrond(lichtgrijs)zorgtmagnietvantoepassingenzijnoponsoverzicht.

4. Zoekeenafbeeldingophetnetdiejegaatinstellenalsachtergrondophetoverzicht.Zoekeentjevanhettypebackgroundrepeat.Geeninspiratie?Gebruikdeze:


5. Zorgernuvoordatdeafbeeldingalsachtergrondverschijntophetoverzichtvandeschilders,hierzijneenaantalmethodenvoormaarikzoujullieaanradenhiervooreennieuwebloksoorttemaken

6. [email protected]. MaakgebruikvanCSSom

1. detitelendeverschillendekunststromingencentraalbovenhetoverzichtweertegeven

2. ruimtetecreërentussendeverschillendeschilderijen,dezeplakkennuwattegenelkaar

3. destorendelijnonderaandepaginawegtewerken

(KLIK HIER om een afgewerkt voorbeeld van de CSS-regel te bekijken.)


Les14Eenvoudigcontactformulier

In de core van Drupal 8 zit er reeds een eenvoudig contactformulier ingebouwd. Zeer handig om de bezoeker van jouw site een e-mail 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. Voegeenveldtoebijhetinhoudstypeeenvoudigepagina.WegebruikenhiereeneerstekeerhetveldtypeLink

2. OmdezeknopnietalseendrogelinkweertegevenopdesitemaaralseenmooieknopgebruikenweDEZEsite.

3. Wanneerjedecodeophetklembordhebtstaan,keerjeterugnaarjouwsiteenjemaakteennieuwecssregel.Belangrijkhierisdatjedeklassediedoordesitewerdaangemaaktevengaataanpassennaareenvoorjoulogischebenaming

4. UiteindelijkkeerjeterugnaardeweergavevanhetinhoudstypeEenvoudigepaginaenjepasthetLink-veldaanviahettandwiel:


5. VoegnuinhoudtoevanhettypeEenvoudigePagina.GebruikonderstaandvoorbeeldenkijkzekerbijdeURL-alias,wegaandezeditkeernietautomatischlatengenereren:


6. Bekijkuiteraardhetresultaatendanvooralonzeknop!

⇒ 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. VoegeennieuwcontactformuliertoeviaStructuur-Contactformulieren-Contactformuliertoevoegen

2. Vuldegewensteveldenin.Letop,nietalleszalhiernodigzijn:1. HetLabeliszoalsdetitelvaneennode,zichtbaarvoordegebruiker2. Ontvangersisdeplaatswaaruhetmailadresnoteertvandiegenediede

vraagvanhetformuliermoetontvangen3. Berichtisnietnodigdaarwijeenpaginaaangemaakthebben4. HetDoorverwijspadishieruiteraarddeaangemaaktepagina5. Automatischantwoordenvullenweooknietin


3. VergelijkeenContactformuliergerustmeteeninhoudstype,hetwerktookmetveldenendeweergaveervan.Letwel.Hierisdeformulierweergavehetbelangrijksteluiknatuurlijk.Inonderstaandeoefeninggaanwehetveldonderwerpvervangendooreenkeuzelijstje.Veelaangenamervoordegebruiker.

1. VoegeenveldtoebijhetContactformulier'Uwvraag'2. VeldtypeishierLijst(tekst)3. Labelisonderwerp4. Hetiseenverplichtveld!5. Toegestanewaardenzijn:Trappisten,Schilders,MuzikantenenFietsen6. Bijdeformulierweergavekiezenwevoorkeuzerondjesofkeuzevakjesen

zettenwehetoorspronkelijkeveldOnderwerpbijuitgeschakeld.4. Zorgnogevenvooreenlinkinhethoofdmenu!5. Testhetuiteindelijkeresultaatuit(gebruikeenanderebrowserwaarinjenietbent

aangemeld):


BeveiligenmetHoneypot

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. InstalleerenactiveerdemoduleHoneypot

2. RoepdeinstellingenvanHoneypotop


3. Steldeinstellingencorrectin,weoverlopenklassikaal

⇒ Sla alles op en jouw site is beveiligd, eenvoudig en efficiënt!

Addanother

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. DownloadeninstalleerdemoduleAddanother


2. Ganunaardeinstellingenvanbijvoorbeeldhetinhoudstypebandsbijvoorbeeld.Onderaanhebjenueennieuweoptie:

3. Allesstaatstandaardaangevinkt,datisookdebedoeling.Slahetinhoudstypeopenleegdecashes.

4. Voegnuinhoudtoevanhettypebandenkijkmeteenonderaannaarhetresultaat

Imagepin

Een kleine maar leuke module om tekst op een afbeelding te laten verschijnen wanneer je een bepaald gebied aanwijst.

1. InstalleerdemoduleImagepin2. Ganaardeweergavevanhetinhoudstypebandenpasdaarhetveldafbeeldingaan:


3. BewerknudenodevanTheBeatles,merkdenieuweknopopbijhetafbeeldingsveld:

4. Wanneerjeopdezeknopkliktdankanjeonderaanteksttoevoegen5. Sleepvervolgenshetbolletjeopdeafbeelding6. Geefhetbolletjeeenjuisteplaats7. Houhierrekeningmethetfeitdatdetekstonderhetbolletjezalverschijnenenniet

buitendefotowilgaan8. Bekijkhetuiteindelijkeresultaat:

(in bovenstaande figuur ben ik niet zeker van de 'wie is wie')


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. InstalleerenactiveerdemoduleImagekick2. OmdemoduleookechttekunnengebruikenmoetjeviaInstellingen-Media-

BeeldverwerkingstoolkitdeImagekickimagemanipulationtoolkitactiveren

⇒

3. Dezeoptieisechternietvoorhandenalsjeopdeserverdejuistephp-extensieniethebtingeschakeld.Waarwenunaartoegaanistevensookdeplaatsomdiewaarschuwingwegtewerken

4. GanaarhetCpanelvanjouwsiteenzoekdeSelectPHPVersion-knop


5. Jekrijgtvervolgensdeoptieomdephp-versieaantepassen,maarvooralookdemogelijkheidomextensiesaantevinken.Wijvinkenertweeaan.

--> zorgt ervoor dat we de zojuist geïnstalleerde module imagekick kunnen gebruiken

--> hiermee geven we gehoor aan de waarschuwing die op dit moment te zien is bij de statusrapportage

6. Sladezeveranderingop

7. Bekijkhetresultaatopdevolgendemanieren:1. Bekijkdestatusrapportageengenietvanhetfeitdatergeenenkelefoutof

waarschuwingzichtbaaris!2. Pasdeinstellingenbijdebeeldverwerkingstoolkitaanentesteensuitdoor

eentest-afbeeldingsstijlaantemaken

--> het aantal opties is sterk gegroeid. Ik heb nog niet de tijd genomen om elke optie te gaan uittesten


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:

• Eentitel• Driefoto'svandefietsinkwestie• Eenkeuzelijstjemetdamesofheren(Taxonomie!)• Eenprijs• Eenwitte,zwarte,grijzeofgroenefiets(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• Eenbeetjeuitlegindebody(zieword-documentje)• Afbeeldingen• Damesofheren• Prijs(magjezelfkiezen)• Dekleur

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:

• InhoudvanFietsen• Onopgemaaktelijstvanvelden• Menulinkinhethoofdmenu

De titel is als veld standaard aanwezig.


Voeg het veld afbeelding bij, hou rekening met:

• Afbeeldingsstijl:focalpoint260x260(dezestijlzaljemoetenaanmaken)• Wanneerjenietsonderneemtzullenerpernodedriefoto'sverschijnen,omervoor

tezorgendatermaar1fotozichtbaariskijkjeevenbijdemeervoudigeveldinstellingen:

• Wegeven1waardeweertestartenvanafnul(Drupalgebruiktnulalsindicatievanheteersteitem)

Voeg ook het veld prijs toe:

• Schalen:0

Tot slot ook het veld geslacht

• Uitsluitenvanweergave

We gaan er nu voor zorgen dat de mensen kunnen filteren op dames-fietsen of heren-fietsen:

• Bijfiltercriteriavoegjeereentjetoe:Geslacht• Kiesdejuistewoordenlijstenvooreenkeuzelijst• Zorgervoordatdefilterzichtbaarisvoordegebruiker.

Ik geef hieronder het uiteindelijke resultaat (zonder CSS):


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:

• Voegeenbloktoebijdebestaandeview'fietsen'• ToepassenopDezeWeergave• Geefdezedeopmaak'diavoorstelling'


• Verwijderalleoverbodigeveldenzodoendedaterenkeleeenfotowordtgetoond• Zorgdatvandedriefoto'spernodemaareentjewordtgetoondmaarwelineen

randomvolgorde.

• Hetblokisenkelzichtbaarbijdehetoverzichtvandefietsen• Hetblokkomtinhetfootermenu

Drupal Basis – 2017-2018 sem1... Drupal Basis 2017-2018 sem. 1 Lander Carrijn

Documents

Transcript of Drupal Basis – 2017-2018 sem1... Drupal Basis 2017-2018 sem. 1 Lander Carrijn