Les 14

Herhalingsoefeningen

Oefening 1

Maak bij taxonomie een nieuwe woordenlijst 'geslacht' aan en voeg de termen dames en heren toe.

Maak een tweede woordenlijst aan 'kleur' en voeg toe wit, zwart, grijs en groen

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

Bij de formulierweergave pas je het veld geslacht en kleur even aan naar keuzevakjes/keuzerondjes

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 2

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:

  • Afbeeldingsstijl: focal point 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:

  • Schalen: 0

Tot slot ook het veld geslacht

  • Uitsluiten van weergave

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 de juiste woordenlijst en voor een keuzelijst
  • Zorg er voor dat de filter zichtbaar is voor de gebruiker.

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 3

Zorg ervoor dat onderstaande afbeelding als achtergrond te zien is op het overzicht van de fietsen:

Oefening 4

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

Wanneer gebruiker met zijn muisaanwijzer over de link van het overzicht fietsen hovert 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 Colorbox
    • Omschrijving toont de body
    • Bij Specificaties zie je de kleur, het geslacht en de prijs

Oefening 5

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 het footer menu