2. Download via onderstaande link de nodige plugins/third party-bestanden voor de modules, deze zullen we later samen op de server plaatsen

Transcriptie

1 Les 9 Afbeeldingsgallerijen In dit eerste onderdeel bespreken we een aantal modules om afbeeldingen op een elegante manier te vertonen op een website. Je zal hiervoor modules moeten installeren die vaak ook niet werken zonder een plugin of third party. Voorbereiding 1. Download en installeer de volgende modules: JuiceBox Libraries (hier moet je de dev nemen) Fotorama 2. Download via onderstaande link de nodige plugins/third party-bestanden voor de modules, deze zullen we later samen op de server plaatsen klik hier voor de plugins 2. Zorg ervoor dat de plugins uitgepakt in de map downloads staan 3. Open in een andere browser (bijvoorbeeld Google Chrome of Firefox of Edge) jouw website zonder in te loggen. Deze gaan we telkens gebruiken om het resultaat te bekijken. Dit zorgt ervoor dat we minder klikwerk hebben nadat we een instellingen aanpasten. Gebruik dan de ingebouwde Windows 10-tool om de twee vensters vervolgens naast elkaar te plaatsen. 4. Zorg dat je bij minstens twee schilders meer dan 1 afbeelding hebt van de schilder Colorbox Revisisted Eerder bekeken we reeds de module colorbox. Een manier om foto's op een aangename manier weer te geven op een site. Deze module bekijken we in dit onderdeel nog net iets beter. Hierdoor zal blijken dat Colorbox meer in zich heeft dan dat je zou gedacht hebben. 1. Ga even naar het veldenbeheer van het inhoudstype Schilders 1

2 2. Pas het label van de afbeelding aan naar: (klik op de foto foor meer afbeeldingen). We doen dit omdat we zo meteen bij de instellingen van Colorbox initieel maar 1 foto gaan tonen, de rest wordt pas zichtbaar als de bezoeker op die ene zichtbare foto klikt. 3. Bij de weergave ga je nu het label zichtbaar maken (boven) 4. Bekijk dit resultaat al even in de andere browser door de site daar te vernieuwen. 5. Ga verder op de ingelogde site in de andere browser en kijk opnieuw bij de weergave van het veld afbeelding. Staat de op Colorbox? Klik daarna op het tandwiel voor de specifieke instellingen. We overlopen deze klassikaal. 2

3 6. Bekijk het resultaat, na grondig opslaan, in het andere venster. 7. Naast de instellingen bij de weergave heeft Colorbox nog een hele resem aan opties. Zo kan je het uiterlijk van de colorbox aanpassen maar je kan de colorbox ook automatisch afspelen. Dit en meer kan je terugvinden door de instellingen van de module ColorBox te openen: 8. Verander om de te beginnen eens de stijl van de colorbox. Kies een stijl, sla onderaan op, leeg de caches en bekijk het resultaat in het andere venster. 3

4 9. De andere instellingen overlopen samen. Specifiek leg ik hier de nadruk nog even op het feit dat je de colorbox ook automatisch kan laten afspelen. Test wat dingen uit en bekijk telkens het resultaat in het andere venster. Plugins Voor JuiceBox en later ook Fotorama heb je plugins nodig. In dit stuk bespreken we nog eens die werkwijze. 1. Open FileZilla en log in op de server. Inloggegevens worden in de klas bezorgt. 2. Zorg dat je in het linkervenster de eerder gedownloade mapjes 'fotorama' en 'juicebox' ziet staan. Het rechtervenster toont dan weer de map libraries op de server: 4

5 3. Selecteer nu beide mappen in het linkervenster, klik rechts en kies voor uploaden. JuiceBox JuiceBox is een alternatieve module oor Colorbox. Je zal merken dat deze module de foto's ook op een aantrekkelijke manier kan weergeven, zij het lichtjes anders dan Colorbox. 1. Ga opnieuw naar de weergave-instellingen van de schilders. 2. Pas vervolgens het formaat aan van Colorbox naar Juicebox-gallerij 5

6 3. Sla dit meteen op en bekijk het resultaat in het andere venster. 4. Een klein detail misschien, maar verberg het label van het veld afbeelding bij de weergave. Dit heeft bij JuiceBox namelijk geen zin. 5. Wanneer je nu op het tandwiel klikt naast het veld afbeelding krijg je een reeks instellingen voor de JuiceBox. We overlopen deze klassikaal, uiteindelijk zou je onderstaande instellingen kunnen overnemen: 6. Het enige wat nu nog stoort is de 'merknaam' in de rechterbenedenhoek. Het zou leuker zijn moest deze niet zichtbaar zijn. Maak een nieuwe css-regel aan en plaats er onderstaande code in:.jb-classifier-link-wrapper + div { opacity: 0; visibility: hidden; } 6

7 Youtube Field Iets helemaal anders. We bekijken in dit stuk de mogelijkheid om een filmpje van Youtube weer te geven op de website. Het voor deel hier is dat het filmpje niet op de server komt te staan. Dit zal resulteren in een lichtere site. 1. Download en installeer de module Youtube Field 2. Ga naar het veldenbeer van het inhoudstype Musea en voeg een nieuw veld toe. Door de module kan je nu kiezen voor 'Youtube-video' 3. Voor we ons nieuwe veld kunnen invullen moeten we eerste een filmpje hebben. Open daarom een nieuw tabblad en surf naar youtube.com 4. Zoek vervolgens een filmpje over één van onze musea. Ik koos hier voor 'Belvedere Wien' 5. Klik rechts op het geopende filmpje en kies Video-URL kopiëren 6. Keer terug naar de site en ga naar het museum in kwestie. Vervolgens kan je die node gaan bewerken. Merk nu op dat je inderdaad een veld Filmpje hebt bijgekregen. Plak de eerder gekopieerde URL in dat veld: 7

8 7. Sla op en bekijk het resultaat. 8. Tot slot bekijken we nog even de instellingen van dit veld. Dit dien je te doen bij de weergave van het inhoudstype Musea. Klik vervolgens op het tandwiel naast het bewuste veld: Zoals je kan zien heb ik bepaald dat er geen titel of andere info van de uploader te zien is, er is geen play-knop te zien wanneer de video afgespeeld wordt en er verschijnen geen annotaties op het filmpje. Merk ook op dat je de afmetingen van het filmpje kan aanpassen. Field group Wanneer we naar één van de musea kijken dan kan je opmerken dat er nogal veel info opstaat en bovendien niet echt gestructureerd. Met de module Field Group kan je dit een beetje in goede banen leiden. 1. Download en installeer de module Field Group 2. Open na de activatie de weergave-instellingen van het inhoudstype Musea. Je merkt hier iets op: 4. Met deze knop kan je nu groepen toevoegen. We gaan een aantal velden groeperen onder een tabblad. 5. Klik op de knop Groep toevoegen 6. In eerste instantie bepalen we de algemene soort van veldengroep. We kiezen in dit eerste voorbeeld voor tabs en geven dit een naam: Veldengroep 8

9 7. In het volgende beeld moet je nu bepalen of dit horizontale of verticale tabs moeten zijn. Kies horizontaal 8. Uiteindelijk ziet u volgend resultaat: 9. De volgende stap is het toevoegen van de verschillende tabs. Zo willen we bijvoorbeeld de body onder een tab 'informatie', de afbeelding onder een tab 'foto' en het adres onder een tab 'locatie' 10. Klik hiervoor opnieuw op Groep toevoegen. Kies dit keer voor tab (enkelvoud) en geef dit het label 'Info'. 9

10 11. Het volgende venster hoeft niet aangepast te worden. Uiteindelijk zie je nu jouw nieuwe groep staan in de veldenlijst. Zorg er nu voor door de vorige 2 stappen te herhalen dat alle tabs worden toegevoegd: 12. Wanneer we nu naar het resultaat zouden kijken zal er niets werken. De velden moeten eerst nog op hun plaats worden geschoven. Onderstaande afbeelding toont het doel. Verschuif de velden door het kruisje ervoor vast te pakken. Let hier op het inspringen! 10