Oefeningen
Download de nodige bestanden HIER
Oefening 1
Maak een pagina aan die te bereiken is via de menubalk. Wanneer de pagina opent zien we twee motoren. Ga je met het pijltje over een foto, dan draait deze weg en krijg je de specificaties te zien.
Afgewerkte oefening: https://cursist6.drupalfun.nl/nl/motoren-flip
Werkwijze: Flip Effect
Oefening 2
Voeg zes schilders toe en hun schilderij. Dat mag in één inhoudstype zitten.
De schilders zijn terug te vinden via een dropdown-menu
De afbeelding van de schilder is links weergegeven als een blok. Uiteraard zie je enkel de schilder naar wie je op dat moment kijkt.
Afgewerkte oefening: https://cursist6.drupalfun.nl/nl/schilders/van-gogh
Oefening 3
Indien dat nog niet gebeurd zou zijn: los de foutmelding 'vertrouwde host-instellingen' op
Werkwijze: https://drupalschool.be/nl/drupal-basis/les-8
Oefening 4
Configureer de module Flexslider
Maak een blok aan die alle afbeeldingen van de schilderijen toont
Plaats dit blok in het gebied 'geaccentueerd'
Zorg dat deze regio de volledige breedte van het scherm in beslag neemt
Oefening 5
Installeer de module Floating Menu (https://www.drupal.org/project/floating_menu)
Lees aandachtig de info op de module-pagina.
Zorg dat de module op de site werkt. De iconen kan je in de gedownloade bestanden vinden.
Oefening 6
We organiseren een fotowedstrijd. Maak een inhoudstype voor deze inhoud. (een titel, de naam van de inzender en de afbeelding)
Zorg dat de inzendingen in een overzicht getoond worden.
Is er geen foto ingestuurd, dan verschijnt de standaardafbeelding (zie gedownloade bestanden).
Oefening 7
Herneem de eerste oefening.
Men vraagt nu om ook het logo een plaats te geven in dit overzicht. Probeer het logo te integreren in het Flip-Effect
Oefening 8
Pas de homepage aan.
Enkel de schilders mogen hier vertegenwoordigd zijn.
Gebruik het standaardsysteem van Drupal: Teasers
We willen de afbeelding van de schilder, het schilderij en de body
Met de nodige CSS zorg je voor een leuke weergave. Ik heb het schilderij als achtergrond ingesteld.
Oefening 9
Maak een menu aan dat enkel verschijnt als je naar een schilder kijkt.
De menu komt rechts te staan.
In de menu zitten de linken naar de andere schilders.
Maar als je bijvoorbeeld naar Monet kijkt, dan mag Monet niet te zien zijn in het menu.
Oefening 10
Zorg ervoor dat er bij elke schilder een knop komt te staan die de gebruiker in staat stelt om de tekst als pdf te downloaden. Steek hier ook de foto's bij.
Om de knop te ontwerpen kan je gebruik maken van deze CSS-generator: https://enjoycss.com/
De module IMCE kan hier handig zijn