Les 12

Printvriendelijke versie

Display Suite

Voorbereiding

Modules inschakelen

  1. Display Suite bestaat sinds kort ook voor Drupal 8. Deze krachtige module geeft je de mopgelijkheid om nodes te gaan schikken volgens jouw wensen. We werken een concrete oefening uit.
  2. Schakel eerst de kern-module Layout Discovery in

  1. Installeer en activeer de volgende twee modules:

File metadate manager

Image Effects

  1. Installeer en activeer de module Diplay Suite

Inhoud aanmaken

  1. We moeten wat werk verrichten voor het aanmaken van onze inhoud. We werken rond 'Beroemde fotografen'
  2. Maak een nieuw inhoudstype aan: Beroemde Fotografen - Gebruik onderstaande afbeeldingen voor het aanmaken van de velden:

  1. Voeg twee keer inhoud toe van het type Beroemde Fotografen. De bestanden kan je hieronder downloaden

KLIK HIER voor BEROEMDE FOTOGRAFEN

Weergave

  1. Maak twee nieuwe afbeeldingsstijlen aan:

bijsnijden

  1. Ga naar de weergave van het inhoudstype 'Beroemde fotografen' en pas aan:
    1. Alle labels verborgen
    2. Veld afbeeldingen: stijl Focal point 260 x 260
    3. Afbeelding fotograaf: Focal Point 260 x 300

DS toepassen

  1. Blijf bij de weergave van het inhoudstype. Je zal merken dat je onderaan extra mogelijkheden hebt bijgekregen:

  1. Kies voor Fluid two column stacked layout

  1. Wanneer je nu gaat opslaan worden de weergavemogelijkheden uitgebreid. Schuif de verschillende velden op hun plaats:

  1. Zorg er tot slot voor dat de paginatitel niet zichtbaar is op de pagina's van de beroemde fotografen

Afwerking met CSS

Hieronder kan je de nodige CSS code downloaden. Deze code is echter niet af. Aan jullie om het gevraagde aan te vullen. Uiteraard zal je de code ook moeten koppelen aan de pagina's in kwestie. Denk ook even na of je de code al dan niet tot bepaalde pagina's beperkt? Tip: laat de commentaar in de code staan.

KLIK HIER OM DE CODE TE DOWNLOADEN

Blok toevoegen_herhaling

Om af te sluiten willen we bij elke node een weergave van de andere fotografen in onze databank. Hiervoor maken we best een overzicht aan met een contextuele filter.

  1. Maak een nieuw overzicht aan:

  1. Om het blok nu te koppelen aan ons inhoudstype nemen we er een module bij uit Drupal Basis: EVA. Installeer deze module eerst even
  2. Voeg een EVA toe aan het overzicht
  3. Koppel EVA aan het juiste inhoudstype
  4. Het blok bestaat verder uit twee velden:
    1. Link naar de inhoud (Verborgen): link als tekst weergeven
    2. Titel: herschreven, als een link weergeven, linken naar de juiste node met behulp van het vervangingspatroon
  5. De titel van het blok willen we niet zien. Deze titel heeft hier niets te maken met het veld titel, dit ter verduidelijking
  6. Het veld titel vervolgens geef ik de klasse mee die je kan terugvinden in de reeds ontvangen CSS code
  7. Om een titel te geven aan het blok, die we gemakkelijk kunnen aanpassen, voeg je een kop toe.
  8. Kies voor Tekst en vul de titel in, gebruik dan HTML om de juiste klasse (zie css) te koppelen
  9. Voeg een contextuele filter toe. We willen bijvoorbeeld Carol niet tussen de opties terwijl we naar Carol kijken
  10. De laatste stap is vervolgens het EVA-field een juiste plaats gaan geven bij het inhoudstype

andere fotografen

Afwerking

  1. Zorg voor een nieuw afbeeldingsveld bij het inhoudstype Beroemde fotografen
  2. Stel bij de weergave in dat het hier over een achtergrond afbeelding gaat
  3. Download HIER de achtergrondfoto's
  4. Plaats bij elke fotograaf de correcte achtergrondfoto
  5. Zorg voor afgeronde hoeken bij de drie foto's bij elke fotograaf
  6. Zorg voor aangepaste border-radiussen bij de labels
  7. Voeg een fotograaf naar keuze toe en geniet van de magie van Drupal

Uitsmijter

Installeer de module Entity Toolbar. Deze module geeft je een extra knop op de beheerswerkbalk. Al jouw inhoudstypes worden handig in alfabetische volgorde getoond. Handig.

entity toolbar