Les 2

Iets met vogels

Thema

Voorbereiding:

  1. Installeer het thema AdaptiveTheme
  2. Installeer de module AT Tools
  3. Installeer de module Image Effect
  4. Installeer de module Views Waterfall Display

Werken met Adaptive Theme

Het fijne aan de manier van werken is dat je de volledige controle kan behouden over het uitzicht van het thema. Je bouwt een eigenlijk zelf een thema op.

  1. Ga naar Uiterlijk
  2. Kies voor AT Theme Generator

at

  1. Geef jouw thema een naam
  2. Laat alle andere instellingen staan en sla op
  3. Kijk nu bij het overzicht van de thema's. Het nieuwe thema kan geïnstalleerd worden. Dat mag meteen als standaard ingesteld worden
  4. Voor het gemak van werken schakel je enkele blokken uit:
    1. User menu
    2. Breadcrumbs
    3. Help
    4. Search
    5. Tools
    6. User login
    7. Footer menu
  5. Ga naar de instellingen van het thema
  6. Kies voor The Good Earth als kleurenschema van het thema
  7. Onder layouts kan je zelf bepalen hoe breed alles moet zijn. Bovendien kan je ook de volgorde aanpassen.
  8. Zet de menubalk bovenaan

volgorde

  1. Bij de opties kan je de maximale breedte overschrijven. Ik heb deze op 200 gezet. De website zal nu de volledige breedte van het venster in beslag nemen

breedte

Inhoud

  1. Maak een nieuw inhoudstype (Tuinvogels) met één meervoudig afbeeldingsveld; body mag verwijderd worden
  2. Voeg DEZE inhoud nu toe in een nieuwe node van het type Tuinvogels

Uitzicht

Om nu elke foto even groot weer te geven, zonder dat er aan de foto wordt gesneden (fotografen vinden dat niet leuk) kan je Image Effect gaan gebruiken.

  1. Maak een nieuwe afbeeldingsstijl:

afbeeldingsstijl tuinvogels

  1. De Advance Resize zorgt er voor dat de hoogte en breedte kloppen zonder te snijden aan de foto. De achtergrond die overblijft wordt wit opgevuld.
  2. Pas deze stijl nu toe op het afbeeldingsveld van het inhoudstype Tuinvogels
  3. Maak een overzicht aan (Tuinvogels). Waterfall van velden. Leg ook een link in het menu.
  4. Voeg het veld Afbeeldingen toe
  5. De titel moet niet zichtbaar zijn

Afwerking en CSS

Zaken die we willen realiseren:

  • Bij het hoveren over de foto moet deze in kleur verschijnen. Standaard zijn de afbeeldingen zwart-wit
  • Wanneer je met het pijltje over de afbeelding gaat verschijnt de naam van de vogel
  1. Ik heb mijn inspiratie voor het hovereffect gevonden op deze website: https://codepen.io/nxworld/pen/ZYNOBZ
  2. Je mag binnen deze effecten zelf eentje kiezen die u aanspreekt.
  3. Kopieer de code en pas deze toe op het overzicht. De kans is groot dat je een beetje moet sleutelen aan de code om deze goed te doen werken.
  4. Om de naam van de vogel te laten verschijnen heb je twee opties: gebruik het Alt-veld als dit werd ingevuld of gebruik de bestandsnaam. In beide gevallen zal je eerst een relatie moeten leggen bij het overzicht.
  5. Herschrijf na het toevoegen van de nodige velden het veld afbeeldingen, gebruik de tokens.
  6. Het waterfall-gegeven toont een raar wit vakje boven elke foto. Ik heb dat kunnen verdoezelen met CSS, maar niet volledig weggekregen.

relatie

velden

url

herschrijven