Les 8

Drupalversie: 
Drupal 7

Display Suite

Display Suite (DS) is de tegenhanger van Panels. Eigenlijk is dat een verkeerde uitspraak want in deze les gaan we beiden combineren.

Step 1: Voorbereiding

Step 2: Inhoudstype maken

Om in het thema te blijven werken we dit keer rond beroemde fotografen. Ik zeg je er nu alvast bij dat we hier zeker onze bronnen moeten vermelden...

  • Maak een nieuw inhoudstype: Beroemde fotografen. Gebruik onderstaande afbeelding:

Step 3: inhoud toevoegen

Voeg nu twee keer inhoud toe van het type Beroemde Fotografen.

Step 4: Weergave

  • Maak een Afbeeldingsstijl aan: focal point 300 x 300

  • Ga naar de weergave van het inhoudstype Beroemde Fotografen en pas aan:
    • Geen labels bij de afbeeldingen
    • Foto's krijgen afbeeldingsstijl 'Ronde hoeken fotografen'
    • Afbeelding fotograaf krijgt de stijl 'Gemiddeld'

Step 5: DS toepassen

  • Open de weergave van het inhoudstype Beroemde fotografen. Merk op dat er nu onderaan iets is bijgekomen door de module DS:

  • Kies als lay-out: Brenham (Merk hier op dat we gebruik maken van een lay-out die bij Panels hoort)

  • Wanneer je nu opslaat zal je zien dat je onder de weergave de velden nu naar de juiste gebieden kan schuiven. Doe dit zoals op onderstaand voorbeeld:

Kijk even naar het resultaat. Dat ziet er nog niet zo best uit. Eerst en vooral hebben we twee keer de titel die zichtbaar is.

  • Open de instellingen van de module DS
  • Kies vervolgens bovenaan: Extra's. Stel vervolgens in zoals hieronder getoond:

⇒ Veld-templates

⇒ Extra velden

⇒ Andere

  • Keer terug naar de weergave van het inhoudstype. Door het wijzigen van de instellingen kunnen we nu onderaan een aangepaste pagina-titel kiezen:

  • Sla alles op en bekijk het resultaat opnieuw

Step 6: Afwerken met CSS

Je hebt nu DS leren kennen. Je kan ook hier de velden op verschillende plaatsen weergeven. Helaas is dit niet voldoende. Maar met de nodige CSS krijg je uiteindelijk een mooi resultaat. Elke stukje code wordt hieronder besproken. Aan jullie om dit ook te laten werken.

Elke regel die hierna volgt kopieer en plak je in één nieuwe CSS-regel.

  • Deel 1: land

.rechtsuitlijnen{
    float:right;
    font-size:2em;
    background:#000;
    color:#a5a9b1;
    border-radius:18px;
    padding:10px;
}

  • Deel 2: body

.randje
{
     border:solid #000 2px;
     padding:10px;
     border-radius:18px;
}

  • Deel 3: titel (naam fotograaf)

h2
{
    font-size:2em;
    background:#000;
    color:#a5a9b1;
    border-radius:15px;
    padding:15px;
    margin:0 5% 10px 5%;
    text-align:center;
}

  • Deel 4: de afbeeldingen

.links img
{
    float:left;
    margin:0 2% 0 2%;
}
.links
{
   display:block;
   margin:0 5% 0 5%;
}

  • Deel 5: foto fotograaf

.fotograaf img
{
    display:block;
    margin: 0 auto;
    box-shadow: 10px 10px 5px #888888;
}

  • Extra uitleg:
    • margin: 0 5% 0 5% ⇒ De 0 staat voor geen bovenmarge, 5% rechtermarge van de container, 0 ondermarge, 5% linkermarge ten opzichte van de container.
    • margin: 0 auto ⇒ De 0 zorgt voor geen boven en ondermarge, auto zorgt ervoor dat de browser de linker en rechtermarge automatisch gelijk zet
    • Display: block ⇒ Het gegeven wordt als block ingesteld, op die manier kan je verder in de code het geheel aanspreken
    • img ⇒ wanneer het gaat over een afbeelding dan kan je een klasse kiezen voorafgegaan door het punt, door img achter deze klasse te plaatsen definieer je echter dat het hier gaat over een afbeeldingen en geen tekst

Step 7: Blok in DS

Om de mogelijkheden van DS nog duidelijker te maken plaatsen we nu een blok in één van de DS-regio's. We willen namelijk onder de fotograaf een blok maken die een link geeft naar andere fotografen.

  • Maak eerst het nodige blok.
  • Onderstaande afbeelding zou voldoende moeten zijn:

  • Het blok zelf moet voorlopig niet verder aangepast worden
  • Sla dit gewoon even op.
  • Ga terug naar de weergave van het inhoudstype
  • Kies onderaan bij aangepaste velden voor blokveld toevoegen

  • Geef het blokveld de volgende instellingen:
    • Label: andere_fotografen
    • Entiteiten: node
    • Blok: Overzicht: Andere fotografen: Block
    • Lay-out: Bloktitel en blokinhoud tonen

  • Schuif het blok tot slot op de juiste plaats:

Step 8: finetuning

  • Zorg voor wat ruimte tussen de foto van de fotograaf en de titel 'andere fotografen'. Hiervoor moet je in de CSS wat bijschrijven (tip: 25px)
  • Zorg ervoor dat de namen van de fotografen groter worden getoond (tip: H3)
  • Zorg ervoor dat de namen van de fotografen gecentreerd onder de titel komen (tip: views-align-center)
  • Zorg ervoor dat wanneer je op de één van de drie afbeeldingen klikt er een colorbox opengaat, maak indien je tijd hebt een afbeeldingsstijl voor de afbeelding in een geopende colorbox (600x400)
  • Het onderschrift van elke foto in de colorbox is 'foto: <naam fotograaf>' (tip: titel van de afbeelding)

  • Wanneer je naar één fotograaf kijkt mag je de naam van die fotograaf niet zien staan bij de 'andere fotografen' (tip: contextuele filter)
  • Raar maar waar, wanneer je uitlogt zullen bepaalde delen van de DS niet zichtbaar zijn. Er staan wat te weinig vinken bij de toegangsrechten. Los dit even op.

  • Pas de CSS zodanig aan dat de naam van de fotograaf en de titel 'Andere fotografen' een aangepaste border-radius krijgen. (tip: deze site)

Step 9: foto als background

Leuk hier is om een doorzichtige foto in te stellen als achtergrondfoto. Dit zou je eventueel met CSS kunnen doen maar er bestaat ook een leuke module voor.

  • Voeg bij het inhoudstype 'Beroemde fotografen' een veld toe:
    • Label: achtergrond
    • Veldtype: afbeelding
  • Pas de weergave aan zodat:
    • Het nieuwe veld achtergrond bij de inhoud kom te staan
    • De widget backgroundimage is

  • Via het tandwiel kan je nu de instellingen van deze achtergrond instellen. We overlopen deze klassikaal

  • Pas nu tot slot de nodes van beide beroemde fotografen aan. Voeg de achtergrondfoto toe in het desbetreffende veld. Gebruik eventueel deze foto's
  • Tot slot moet je de tekst in de body wat vergroten door een CSS-aanpassing: font-size:1.2em;
  • Heb je tijd? Voeg nu zelf een fotograaf naar keuze toe en geniet even van de magie van Drupal :)