Les 2

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.

floating menu

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

resultaten foto wedstrijd

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

flip met logo

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.

teaser schilders

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.

menu schilders

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

pdf versie