Les 14

FooTable

Wanneer we op een tablet/smartphone onze site bekijken zal je zien dat de kaarten bij 'Last Performances' niet mooi worden getoond, ze zijn niet responsive. Met Footable kunnen we de gebruiker laten kiezen of hij/zij al dan niet de kaart wil zien.

   

Activeer de module Footable, deze zit in de distributie

Controleer of de JQuery update aanstaat (1.7 als standaard)

Pas het formaat van het overzicht Last Performances aan naar Footable

Zorg ervoor dat er geen label getoond wordt bij de kaarten

Pas de Instellingen van de Footable zodanig aan dat:

De in te klappen kolom op een phone de kaart is en dat er bij de band een symbool verschijnt om uit te klappen

Chosen

Chosen is een module die allerlei keuzelijstjes doorheen jouw site veel aantrekkelijker maken dan de standaard meegeleverde selectielijstjes.

Deze module moet je installeren en werkt niet zonder de plugin die via FTP in de map sites/all/libraries moet geraken. Doe dit eerst.

Wanneer de module is geactiveerd testen we ze uit:

Maak in bij het inhoudstype Band(s) een nieuw veldje aan, kies voor lijst (tekst) en stel een kort lijstje samen van een aantal landen waaruit je kan kiezen. Zorg dat Verenigd Koninkrijk bij de keuzemogelijkheden zit.

In het volgende instellings-venster activeer je nu de chosen-versie.

Bekijk het resultaat door één van de bands aan te passen.

Helaas, het lijstje ziet er niet uit.

We keren terug naar de instellingen van de Chosen-module en stellen de breedte beter in:

Bekijk nu het resultaat. Een aangenaam lijstje met een ingebouwde zoekfunctie.

OEFENING:

Om nu de landen aan te passen bij onze drie bands gaan we eerst een editable view maken. Op die manier hebben we minder klikwerk.

Zorg voor volgend resultaat:

Responsive Menus

Bekijk de site even op een smartphone. Je zal zien dat de meeste zaken al redelijk responsive overkomen. Wat beter zou kunnen is het menu. Een eenvoudige module is Responsive Menus, die laat het hoofdmenu automatisch inklappen en vormt het om tot een dropdown menu. We bekijken de werken.

Installeer en activeer de module

Open de instellingen van de module

Bij de stijl heb je een viertal keuzes. Voor een aantal moet je eerst een plugin installeren. We doen dit even via FTP.

Bij de instellingen kan je nu alle mogelijkheden testen. Vergeet niet om eerst de css selector in te vullen. Op die manier wordt de instelling toegepast op het juiste element van de pagina:

Om het resultaat te bekijken neem je best je smartphone bij de hand.

Image Hotspots

Met Image HotSpots kan je linken leggen op een afbeelding. Een leuke tool die de site interactiever maakt.

Installeer en activeer de module

Ga naar het veldenbeheer van het inhoudstype Bands

Bewerk de instellingen van het veld afbeelding:

Open nu een node naar keuze in de bewerkingsmodus

Om efficiënt te werken is het aan te raden om eerst de absolute URL van een bandlid te kopiëren:

Bekijk de opties bij het veld afbeelding:

Eerst trek je een kader rond een bepaald gebied op de foto waar op geklikt kan worden

Geef dit gebied een Titel, dit verschijnt als men hoovert

Optioneel kan je een beschrijving toevoegen

Bij de Link plak je de absolute URL van het bandlid in kwestie

Je zal waarschijnlijk een raar resultaat krijgen, het kader dat je hebt gemaakt krijgt een schitterend kleurtje :)

We passen dit aan bij de instellingen van de module:

Standaard staat er 0.3 bij de dekking, plaats je dit op 0 dan heb je geen gekleurd kader meer.

Contact

We bespreken hier een module die reeds in de kern aanwezig is. Een contactformulier. Iedereen weet wat het idee is natuurlijk. We werken een voorbeeld uit:

Activeer de module

Merk op dat je onder structuur - inhoudstype een nieuw inhoudstype hebt bijgekregen

Je zal bij de instellingen standaard een categorie zien staan. Wij maken er eentje bij: 'Vraag'

Wanneer je bovenaan leest dan staat er dat er bij het navigatiemenu een link is bijgekomen die naar het Contact-formulier doorverwijst.

Zorg er nu voor dat dit contactformulier een link krijgt in het hoofdmenu.

Test vervolgens uit door eens een vraag in te dienen.

Afsluiters

Opdracht 1:

Zorg ervoor dat deze bestanden op een duidelijke en overzichtelijke manier worden getoond op de site

Opdracht 2:

Om even de magie van Drupal te aanschouwen en ter controle van de velden en instellingen voegen we een band toe.

Kies een band naar keuze

Tip: neem een solo band of een band met twee leden :)