Les 3 Updates van modules en thema's Drupal is een CMS die constant evolueert. Performance en veiligheid worden steeds opnieuw bijgesteld. Daarom is het ook nodig dat de Drupal installatie up to date blijft. Er zijn twee soorten updates: De kern Modules en thema's Het is deze laatste die we even bekijken. 1. Ga naar Rapporten - Statusrapportage 2. Zoek vervolgens op de verschenen pagina naar de gele opmerking: 3. Klik nu op de blauwe link 'beschikbare updates' 4. Vink in het volgende venster alles aan en kies 'Deze updates downloaden' 5. In het volgende venster wordt u aangeraden een back-up te nemen. Dat is goed advies maar in het geval van onze oefensite (nog) niet nodig. Klik Doorgaan 6. Vervolgens moet ook de databank op updates worden gecontroleerd. Voer daarom het updatescript uit. Let ook even op de URL 1
7. Tot slot kies je voor Voorpagina en de alles staat up to date Opdrachten 1. Op de huidige home-page zie je telkens de teaser van de schilders en schilderijen. Merk onderaan ook de volgende en vorige knoppen op! 2. Zorg ervoor dat enkel de teaser van de schilderijen te zien is x6 3. Op diezelfde homepage zien we nu enkel de teaser van de schilderijen. Een klein fotootje van het schilderij zou leuk zijn. Dit kan je regelen bij de weergave van het inhoudstype. Kies hier dit keer wel voor de teaser: 2
4. Download en installeer als standaard het thema Professional Responsive Theme 5. Zorg ervoor dat 1. Er geen copyright of credits worden getoond 2. De sociale media symbolen niet zichtbaar zijn 3. Het favicon en logo aangepast wordt. Gebruik eventueel deze afbeelding: 6. De blokken moeten aangepast worden. Zet op autohidden: 1. Breadcrumbs 2. Search 3. Footer Menu 7. Het blok Page Title is opnieuw uitgeschakeld. Schakel opnieuw in 8. Zorg voor een nieuwe afbeelding ter vervanging van het blauw/zwarte raster. Gebruik volgende foto: 9. Voor diegene die in plaats van Inhoud nog steeds Content hebben staan gaan dit even vertalen: 1. Ga naar Instellingen en kies User Interface Translation 2. In het verschenen venster zoek je naar Content en je vertaald het vervolgens naar Inhoud 3
Menu instellen In de vorige les hebben we reeds menu-linken voorzien voor al onze schilders en schilderijen. We merken op dat het menu zonder aanpassingen een beetje druk begint te worden. We kunnen dit oplossen door uitklapbare menu's te creëren. 1. Ga naar Structuur - Menu's - Hoofdnavigatie 2. Je ziet een lijst met alle reeds ingestelde menulinken. Merk ook de kruisjes op. Met deze kruisjes kan je de volgorde aanpassen. Zorg ervoor dat 'Home' op de eerste plaats staat. 3. Plaats nu de schilders en schilderijen zoals hierboven. Dit wil concreet zeggen dat we de schilder bij zijn schilderij gaan plaatsen. 4. Met hetzelfde kruisje kan je nu de schilderijen laten inspringen onder de schilder: 4
5. Door op te slaan kan je het resultaat gaan bekijken. Dit zal tegenvallen. De schilderijen klappen niet uit. We keren terug naar de instellingen van het hoofdmenu. Naast elke schilder dien je op Bewerken te klikken en een vink te zetten bij Uitgeklapt Weergeven: 6. Resultaat: Dropdown menu Probleem: wanneer je klikt op een schilder verschijnt de pagina niet, de link lijkt dood te zijn. Dit is een probleem in een javascript bestand. Stap voor stap werken we naar de oplossing: 1. Log in op Cpanel 2. Ga naar de map Themes en open het huidige thema 3. Kies hier de map JS 4. Download het bestand custom.js 5. Open het bestand 6. plak net voor de laatste regel het volgende: $("#main-menu li a").removeattr("data-toggle"); 7. Sla het bestand op 5
8. Upload nu dit bestand en vervang hiermee het oude 9. Ga naar de site 10. Eventueel refresh of een flush van de cache 11. --> probleem zou verholpen moeten zijn Homepage instellen Wanneer je de website niet voorziet van een eigen ingestelde Homepage of Frontpage dan zal Drupal automatisch teasers tonen van als jouw toegevoegde inhoud. Dit is handig voor een blog, niet meteen voor ons. 1. Maak een nieuwe node aan van het type Eenvoudige pagina. 1. Titel: Welkom 2. Tekst: Welkom op mijn site 2. Zorg ervoor dat de URL niet automatisch gemaakt wordt en geef deze zelf in: /welkom 3. Sla dit even op 4. Ga nu naar Instellingen - Systeem - Basis site-instellingen 5. Pas de standaardvoorpagina aan door de jou gekozen URL in te geven: Herhalingsoefening In de vorige les hebben we inhoud toegevoegd in inhoudstypes. We doen dit vandaag opnieuw ter herhaling. Download de nodige bestanden 1. Voeg een nieuw inhoudstype toe: Musea 6
2. Vergeet niet om 'Auteur en datum' uit te vinken 3. Voeg een nieuw veld toe: 1. Veldtype: Tekst (plat) 2. Label: Adres 3. In de volgende vensters mogen de instellingen gewoon blijven zoals ze zijn 4. Voeg opnieuw een veld toe: 1. Bestaand veld: Afbeelding 2. In de volgende vensters mogen de instellingen blijven staan zoals ze zijn 5. Voeg nu de 5 musea toe, gebruik hiervoor de gedownloade bestanden. Let op: een menulink is hier voorlopig niet nodig 6. Aangezien we gebruik maken van PathAuto Bulk Generate hoef je je ook niet druk te maken over de URL. (zie lager) Nieuw veld: lijst Bij de musea willen we graag de mogelijk om in een lijstje te kiezen in welk land de verschillende musea zich bevinden. Open het veldenbeheer van het inhoudstype Musea Voeg een nieuw veld toe: 7
Voeg nu handmatig een lijstje in met mogelijke landen. We kiezen hier logischerwijs de landen van onze musea: Sla dit op en in het volgende veld kan je ook gewoon opslaan. Bewerk nu telkens de inhoud van de musea. Je zal merken dat er een veld is bijgekomen en dat je het land kan selecteren: PathAuto Bulk Generate Wanneer we naar de URL van één van de musea kijken dan zien we dat we daar weer te maken hebben met.../node/4. Raar want zonet hebben we dat patroon bij PathAuto ingesteld. Nu is het zo dat dit niet automatisch met terugwerkende kracht werkt. Gelukkig bestaat er een eenvoudige oplossing. 1. Open de instellingen van PathAuto 2. Klik op het tabblad Patronen 3. Bewerk het patroon Standaard. Zet ook een vink bij musea en sla op 4. Kies bovenaan het tabblad Bulk Generate 5. Vink inhoud aan, zo weet Drupal wat je wil gaan bijwerken 8
6. Kies vervolgens ook welke aliassen je wil bijwerken en/of aanmaken 7. Klik Bijwerken 8. Na een aantal seconden en een vooruitgangsbalk verschijnt er een groene melding met het aantal bijgewerkte URL's. Controleer maar door een museum naar keuze te bekijken en de URL te checken. Weergave beheren Je hebt het misschien gemerkt maar de afbeeldingen van onze musea zijn ofwel heel erg groot ofwel aan de kleine kant. Het is voor een bezoeker veel aangenamer om deze allemaal in dezelfde grootte te zien verschijnen. 1. Ga naar Structuur - Inhoudstypen - Musea - Weergave beheren 2. Merk naast het afbeeldingsveld het kleine grijze tandwieltje op. 3. Klik daar even op en je krijgt volgend instellingsveld: 4. Afbeeldingsstijl: 9
1. Geen: hier kies je gewoon de originele foto 2. Groot: een stijl die de afbeelding gaat bijsnijden op 480x480 pixels 3. Gemiddeld: idem maar dan 220x220 4. Miniatuur (Thumbnail): idem maar dan 100x100 5. Link afbeelding naar: 1. Niets: wanneer de bezoeker op de foto klikt gebeurt er niets 2. Inhoud: de inhoud van de foto zal getoond worden, in dit geval gebeurt er dus niets want je kijkt al naar de inhoud 3. Bestand: de foto wordt groot getoond in een nieuw venster 6. Test de verschillende mogelijkheden uit. 7. Kies uiteindelijk voor Groot en Bestand 8. Vergeet niet om telkens op Bijwerken te klikken gevolgd door Opslaan Colorbox Colorbox is een leuke module voor het weergeven van foto's. Helaas dis deze module third party, dit wil zeggen dat we handmatig een plugin moeten installeren op onze server in de juiste map. Daarnaast moet ook de module zelf geïnstalleerd worden. 1. Download de plugin naar de map download en zorg dat deze mooi uitgepakt klaar staat. 2. We downloaden het FTP programma FileZilla 3. Nu maken we connectie met de site via FTP, open het programma FileZilla 4. Bovenaan kan je door het invullen van de gegevens inloggen, de gegevens heb je gekregen in de bevestigingsmail bij het aankopen van jouw domein 10
5. Wanneer de connectie is gelukt, dan zie je links in beeld de harde schijf van jouw computer en rechts de mappen structuur op de server 6. Zorg ervoor dat je in het linker venster de uitgepakte map colorbox ziet staan. Rechts open je jouw submap 7. Maak nu zelf een map aan libraries. Deze zit niet automatisch in de installatie. Naar de toekomst toe zullen alle plugins hierin worden geplaatst. 8. Zorg dat in het rechter venster de nieuwe map libraries geopend is 11
9. Klik rechts op de map colorbox en kies uploaden 10. Keer terug naar jouw site. Download, installeer en activeer de module Colorbox 11. Voor colorbox iets van nut kan hebben moeten we er eerst voor zorgen dat we wat meer afbeeldingen hebben bij onze schilders: Download deze bestanden 12. Bewerk nu een schilder naar keuze en probeer eens om een foto toe te voegen. Dit gaat helaas niet. 13. Open het veldenbeheer van het inhoudstype schilder 14. Klik op Bewerken bij het veld afbeelding 15. Klik in het verschenen venster op het tabblad veldinstellingen, we negeren de rode melding 16. Onderaan zie je dat de toegestane waardes op 1 staan, we veranderen dit even naar Onbeperkt 12
17. Vergeet niet op te slaan 18. Bewerk nu de inhoud van alle eerder toegevoegde schilders, gebruik vervolgens de inhoud van de gedownloade bestanden om bij elke schilder twee foto's toe te voegen 19. Na dit werk open je de weergave van het inhoudstype schilder 20. Pas nu het formaat aan van het afbeeldingsveld naar colorbox 13
21. Klik nu op het grijze tandwiel ter hoogte van het afbeeldingsveld 22. We overlopen volgende instellingen klassikaal: 23. Klik zeker op Bijwerken gevolgd door opslaan 24. Bekijk het resultaat 25. Mogelijk opmerkingen / problemen: 1. De afbeeldingen blijken niet allemaal even groot te zijn 2. De afbeeldingen staan niet mooi naast elkaar als je naar de node kijkt 26. --> problemen om op te lossen in de volgende les 14