Les 15

Uitsmijter: Automatisch toepassen views filter

Wanneer je een filter op een view plaatst dan zal je een knop toepassen ontdekken. De gebruiker stelt dus zijn waarde in en de filter doet vervolgens zijn werk een klik op de knop Toepassen. Ook mogelijk is om de filter automatisch te laten toepassen. Veel aantrekkelijker.

Zorg ervoor dat je bij de bestaande View 'greatest hits' kan filteren op de band

Vervolgens kan je bij uitgebreid klikken. Kies nu Instellingen bij 'Stijl van zichtbaar formulier'

In het verschenen venster zet je nu onderaan de vink aan:

Vanaf nu zal de filter automatisch zijn werk doen.

Herhalingsoefeningen

Oefening 1

Maak 5 nieuwe nodes aan van het type Article. Van alle velden bij het Artikel hoef je enkel de titel in te vullen. Zorg ervoor dat je uiteindelijk een menu-structuur verkrijgt zoals in onderstaande afbeelding:

Oefening 2

  • Maak een nieuw blok aan.
  • Bekijk het voorbeeld (zie hieronder) voor de opmaak
  • Wanneer op er op het facebook-symbool geklikt wordt:
    • Een nieuw venster gaat open in een nieuw tabblad
    • Een website naar keuze wordt geopend (die mag jouw Facebook zijn, maar kies gerust iets anders)

Oefening 3

Maak een nieuw inhoudstype aan. Geef dit de titel 'Fietsen'

Zorg voor de nodige velden om volgende gegevens weer te geven:

  • Een titel
  • Drie foto's van de fiets in kwestie
  • Een keuzelijstje met dames of heren (Taxonomie!)
  • Een prijs
  • Een witte, zwarte, grijze of groene fiets (Taxonomie!)

Voeg nu drie keer een fiets toe. Gebruik hiervoor deze bestanden. Zorg dat volgende velden worden aangevuld:

(een menu-link is niet nodig)

  • Titel
  • Een beetje uitleg in de body (zie word-documentje)
  • Afbeeldingen
  • Dames of heren
  • Prijs (mag je zelf kiezen)
  • De kleur

Voorlopig hoef je ook geen rekening te houden met de weergave, dat komt straks.

Oefening 4

We maken van ons nieuwe inhoud een view, wat had je gedacht?

Hou bij het aanmaken rekening met volgende eigenschappen:

  • Inhoud van Fietsen
  • Onopgemaakte lijst van velden
  • Menulink in het hoofdmenu

De titel is als veld standaard aanwezig.

Voeg het veld afbeelding bij, hou rekening met:

  • Geen label
  • Afbeeldingsstijl: vierkant 260 x 260 (deze stijl zal je moeten aanmaken)
  • Wanneer je niets onderneemt zullen er per node drie foto's verschijnen, om ervoor te zorgen dat er maar 1 foto zichtbaar is kijk je even bij de meervoudige veldinstellingen:
  • We geven 1 waarde weer te starten vanaf nul (Drupal gebruikt nul als indicatie van het eerste item)

Voeg ook het veld prijs toe:

  • Geen label
  • Schalen: 0

We gaan er nu voor zorgen dat de mensen kunnen filteren op dames-fietsen of heren-fietsen:

  • Bij filtercriteria voeg je er eentje toe: Geslacht
  • Kies voor een keuzelijst (als er vervolgens geen instellingsvenster verschijnt moet je eerst het veld geslacht toevoegen bij de velden en dit vervolgens uitsluiten van weergave)
  • Zorg er voor dat de filter zichtbaar is voor de gebruiker.
  • De filter moet automatisch worden toegepast, een knop toepassen mag dus niet zichtbaar zijn.

Ik geef hieronder  het uiteindelijke resultaat (zonder CSS):

Onderstaande afbeelding toont de view met CSS:

Dit is de code van bovenstaande CSS

Zorg dat deze code wordt toegepast op de View

Pas de CSS zodanig aan dat deze niet meer dezelfde is als op de bovenstaande foto. Kies dus zelf kleuren en dergelijke...

Merk op: De afbeelding van de fiets 'gazelle bloom' is aangepast. Dit kan je doen door de volgorde van de afbeeldingen aan te passen bij de node

Oefening 5

  • Maak een nieuw overzicht aan met de volgende eigenschappen:
    • Inhoud van het type fietsen
    • Editable Table van Velden
    • Menulink in het hoofdmenu
    • Enkel zichtbaar als je bent ingelogd als administrator
    • Velden:
      • Titel
      • Afbeelding (enkel de eerste en Thumbnail)
      • Body (ingekort, 100 tekens)
      • Aanpasbaar prijsveld

Oefening 6

Voeg inhoud toe van het inhoudstype Artikel

Geef een titel: Kies een fiets!

Voeg deze afbeelding toe:

Zorg ervoor dat de gebruiker kan klikken op één van de drie fietsen en vervolgens wordt doorverwezen naar de node van die fiets.

Geef deze node ook een menulink die uitklapt wanneer er met de muis over de link 'fietsen' (van het overzicht ) wordt 'gehooverd'.

Oefening 7

Zorg voor een menulink 'contact'. Wanneer de gebruiker hierop klikt wordt onderstaande zichtbaar:

Concreet:

  • Voeg bij het inhoudstype 'eenvoudige pagina' een veld toe om de kaart weer te geven --> weergave: Simple Google Maps
  • Voeg inhoud toe van het type eenvoudige pagina
  • Vul de body aan zoals bovenstaand voorbeeld (gebruik aub fictieve gegevens)
  • Zorg in de node voor de link naar het contactformulier
  • Vul tenslotte het veld voor de kaart aan met bijvoorbeeld het adres van de school

Oefening 8

We werken even verder met ons inhoudstype van de de fietsen.

Wanneer gebruiker met zijn muisaanwijzer over de link van het overzicht fietsen hoovert moet hij/zij een keuze krijgen tussen de drie fietsen en de eerder gemaakt oefening 'kies een fiets':

Wanneer een fiets wordt aangeklikt moet de gebruiker volgend(e) beeld(en) krijgen:

 

Kenmerken:

  • Je ziet een verticale tabsgroup
    • Foto's toont een JuiceBox
    • Omschrijving toont de body
    • Bij Specificaties zie je de kleur, het geslacht en de prijs

Oefening 9

We maken een blok dat enkel verschijnt wanneer het overzicht van de fietsen bekeken wordt:

Kenmerken:

  • Voeg een blok toe bij de bestaande view 'fietsen'
  • Toepassen op Deze Weergave
  • Geef deze de opmaak 'diavoorstelling'
  • Verwijder alle overbodige velden zodoende dat er enkele een foto wordt getoond
  • Zorg dat van de drie foto's per node maar eentje wordt getoond maar wel in een random volgorde.

  • Het blok is enkel zicht baar bij de het overzicht van de fietsen
  • Het blok komt in de second sidebar