Background Scale Hover Effect

Trefwoorden

Kenmerken

Deze zelfgemaakte module (All credits to Mary Lou from Codrops. I turned the scripts into a Drupal 8 module) maakt het mogelijk om een knappe fullscreen menu weer te geven van een door jou gekozen inhoudstype. Alle nodes van dit inhoudstype worden getoond met een link, een subtitel én een achtergrondafbeelding die bij aanwijzen (hover) wijzigt.

Zo zie je op onderstaande print 5 nodes die een sport voorstellen. Als je Kayaking aanwijst met de muis krijg je deze foto.

Bij Football krijg je dan dit.


Werkwijze

In een gewenst inhoudstype voeg je 2 velden toe. Een afbeeldingsveld beperkt tot 1 afbeelding en een tekstveldje voor wat info boven de link van de node. (In the pool, Teamsport,...). Er is met de module ook een voorbeeldinhoudstype aangemaakt. Je kunt dus desnoods deze velden gebruiken.


Je maakt nu nodes aan zoals gewoonlijk, en vult telkens deze 2 velden in.

Nu moeten we nog de pagina maken die deze gegevens verzamelt... Daarvoor kies je een node (geen view!) van het inhoudstype Background Scale Hover Effect. Ik heb deze naam behouden uit respect van de makers van de scripts.

Je vult de velden in om de gegevens te verzamelen. Welk inhoudstype wil je als menu? Wat is de naam van je afbeeldingsveld en tekstveld?


Tenslotte zijn er nog extra velden om te maken dat je geen CSS nodig hebt voor de opmaak en afmetingen van je links. Zo kan je de kleur van de links kiezen, de hoverkleur en de breedte van de links. Deze laatste wordt uitgedrukt in procenten van de breedte van het scherm. Heb je veel nodes dan kan je dit dus kleiner maken...



Installatie en uitvoering

1) Activeer het Stark thema en schakel daar alle blokken uit behalve de main content. De fullscreen presentatie kan enkel als er geen andere blokken aanwezig zijn. Het systeem switcht naar dit Stark thema als een node van het inhoudstype wordt getoond. Schrik dus niet als je als admin niets ziet. Je moet uitloggen om het resultaat te zien!

2) Installeer de module zoals gebruikelijk

3) Test desnoods eens uit door nodes aan te maken van het inhoudstype fullscreen. Maak dan de menupagina door een node aan te maken van het type Background Scale Hover Effect.