Les 8

Inleiding

In dit hoofdstuk bekijken we views slideshow, een zeer interessante module die ons de optie biedt om inhoud in een diavoorstelling weer te geven. Steek dat bijvoorbeeld in een blok en je hebt meteen een blikvanger op jouw site. Verder bespreken we de instellingen van Fancybox. Een module die hard lijkt op de Colorbox maar meer opties aanbiedt.

Views Slideshow

Met Views Slideshow kan je overzichten automatisch laten wisselen. Wanneer je van dit overzicht een blok maakt krijg je veel mogelijkheden. Zo zou je bepaalde zaken op de homepage kunnen laten opvallen zoals komende activiteiten of aanbiedingen. Binnen ons verhaal van de schilderijen willen we deze module gebruiken om de schilderen te laten 'sliden' op onze homepage.

We hebben de module Views Slideshow nodig. Deze zit niet in de distributie. Opzoeken, koppeling kopiëren, installeren en activeren is de boodschap.

Let op! Deze module is Third Party. Je moet in de map libraries een plugin installeren. Deze zit wel reeds in de distributie.

(Indien ooit nodig: hier kan je de plugin downloaden)

  1. Ga naar de instellingen van het overzicht van de schilderijen. En voeg een onderdeel toe:

  1. Merk op dat het blok alle instellingen overneemt van de Page. Dit wil dan ook zeggen dat wanneer we hier instellingen aanpassen dat we moeten opletten dat we dit enkel op het blok toepassen en niet op de pagina. Dit is een fout die iedereen wel eens zal maken.
  2. Verander om te beginnen het formaat, we gebruiken dit keer geen raster, maar een diavoorstelling. Deze is nu beschikbaar omdat we de module hebben geactiveerd.

  1. Merk op dat je nu bovenaan kan bepalen op welk onderdeel deze aanpassing van toepassing is. VERGEET DIT NIET AAN TE PASSEN!
  2. Klik nu onderaan op Toepassen (deze weergave)
  3. Bij de instellingen van dit formaat kan je allerlei zaken gaan instellen.
    1. De manier waarop de slides moeten verschijnen
    2. De snelheid van de slideshow
    3. Extra knoppen zoals vorige en volgende
    4. ...
  4. Test er een paar uit en bekijk het resultaat.
  5. Wat we hier niet nodig hebben is de titel bovenaan. Dit veld gaan we niet verwijderen uit het overzicht maar uitsluiten van weergave.

  1. Aangezien we in het zelfde overzicht iets hebben toegevoegd werden alle instellingen overgenomen. Dit wil dus zeggen dat ons veld afbeelding nog is ingesteld op de Fancybox. We passen dit even aan.

  1. Opgelet, opnieuw enkel toepassen op het blok en niet op de page.
  2. Ons blok is klaar voor gebruik. Het enige dat we moeten doen is deze een plaats geven.
  3. Via Structuur - Blokken is dit mogelijk
  4. Wij plaatsten het blok nu in de Kop. Probeer eens een andere locatie uit.
  5. Let wel, het blok mag enkel zichtbaar zijn op de frontpage:

<front>

  1. Een probleem. De titel van het overzicht is zichtbaar en eigenlijk storend.
  2. Ga opnieuw naar de instellingen van het overzicht en verwijder de titel bij het blok.

Oefeningen

Bovenstaande gieten we even in een oefening:

  • Zorg ervoor dat wanneer je de node van een schilder bekijkt er een menuutje te zien is die de gebruiker eenvoudig naar een andere schilder laat springen.
  • Concreet: Voeg bij het overzicht schilders een blok toe die de titel weergeeft. Het blok komt in de First Sidebar en enkel op de pagina's van de schilders.
  • Ik heb de HTML van het veld aangepast naar H3

  • Maak bij het overzicht van de schilders een twee blok aan. Dit keer willen we de afbeelding van de schilders zien in een slideshow. Het blok komt ook in de 'First Sidebar' en is enkel zichtbaar wanneer er naar de inhoud van een schilder wordt gekeken. Maak hiervoor ook een nieuwe afbeeldingsstijl aan. Maak iets van 250 op 300 met afgeronde hoeken.
  • Voor de rappe: geef deze afbeelding een schaduw.

Contextuele filter

In de bovenstaande oefening hebben we nu telkens een soort van extra menu bij elke node van de schidlers. Om dit beter te maken gaan we ervoor zorgen dat wanneer Van Gogh bekeken wordt, deze niet 'kiesbaar' is in het menu. Dit doen we met een contextuele filter.

Pas de instellingen aan van het overzicht.

Les op: we passen maar één deel aan, dus alles dat je opslaat moet op 'deze weergave' staan.

  1. Ga bij uitgebreid
  2. Kies 'toevoegen' bij contextuele filter'
  3. Voeg 'Inhoud: NID' toe (=node ID)

  1. Stel de filter als volgt in:

  1. Onderaan moeten we aanvinken dat wanneer er aan de filter wordt voldaan, de waarde moet worden uitgesloten van het overzicht.

Oefening

Gebruik opnieuw een contextuele filter die ervoor zorgt dat de foto van de bekeken schilder niet wordt getoond in de slideshow onder het navigatiemenuutje.

Instellingen Fancybox

De Fancybox wordt op dit moment gebruikt op ons overzicht van de schilderijen. We overlopen de instellingen.

  1. Ga naar de modules en zoek op fancybox.
  2. Kies instellingen

  1. De kans is groot dat de Jquery Update voor het beheersthema zal moeten worden verhoogd naar 1.7
  2. We overlopen de instellingen klassikaal.
  3. Autoplay
  4. Snelheid bepalen

  1. Thumbnails plaatsen
  2. Bedieningsknoppen

  1. Manieren van openen, sluiten en overgang bepalen