Kop 1

tagline

Doel

Een reeks van afbeeldingen zal toch zo overzichtelijk mogelijk in een overzichtspagina op een webpagina geplaatst moeten kunnen worden.
In deze training zie je wat CSS Grid daarvoor allemaal in huis heeft.

We herhalen veel van CSS Grid en voegen daar wat nieuwe mogelijkheden aan toe.
Voor testdoeleinden is er een JavaScript dat de afbeeldingen uit een array van url's haalt.
Dat doet het scriptje in een random volgorde zodat je kunt zien wat er gebeurt als je geen grip hebt op wat de gebruiker aan afbeeldingen toevoegt.
Wat we hier nog tekort komen is een mogelijkheid om het grid te laten anticiperen op staande, vierkante of liggende afbeeldingen. Daarvoor zou een array van objecten een oplossing kunnen bieden. Als daar behoefte voor is gaan we dat in een andere tutorial nog eens onderzoeken.

Werkwijze

Doe deze training met veel afbeeldingen van verschillende verhoudingen.
Gebruik er minimaal 20! (het moet wel een galerij worden!!)
Een voorbeeld voor deze instructie heb ik gevonden op https://medium.com/deemaze-software/css-grid-responsive-layouts-and-components-eee1badd5a2f die kun je ook als tainingsmateriaal gebruiken in plaats van de tweede video.

Gebruik zoveel mogelijk class- en variabele-namen die afwijken van de instructie! Daarmee laat je zien wat de onderlinge samenhang is in deze training.
Aarzel niet om zelf variaties aan te brengen en commentaar toe te voegen.

Link naar de presentatie

Leerdoelen

  • herhaling DOM bewerkingen met JS:
    • document.createElement();
    • .className
    • .append()
  • de for-lus voor het array (en dat zie je hier achterstevoren)
  • opfrissen CSS Grid:
    • grid-template-columns
    • grid-column
    • repeat()
    • auto-fill
    • minmax()
  • object-fit
  • grid-auto-flow: dense;
  • grid-auto-rows
  • :nth-child-selector

Foto galerij met CSS Grid 1: foto's laden in willekeurige volgorde (00:14:55)

Om een galerij te kunnen maken laden we met JavaScript de foto's in willekeurige volgorde in. Daarmee kun je dan je grid beter testen voor omgevingen waar je geen controle hebt over de afbeeldingen die een gebruiker er in plaatst.
De url's van de foto's staat in een array en we maken ook een variabele, dei het DOM element bevat waar de foto's in geplaatst worden.
We maken een functie die de url als parameter heeft.
Hij maakt 2 DOM-elementen met document.createElement().
Je kunt ze het beste beide een class-naam geven met .className
met .append() wordt de gemaakte afbeelding in de gemaakte div geplaatst, die op zijn beurt in het document wordt geplaatst.

De functie kan je al in de console uitproberen!!
Met een for-lus kun je dan het hele array doorlopen en alle foto's in de pagina plaatsen.
We willen het echter in een andere volgorde en we draaien de lus dan als het ware om: hij wordt aflopend!

Eerst wordt er uit de array een willekeurig element geselecteerd met Math.random() en Math.floor(). Deze wordt geplaatst met onze functie en daarna wordt met .splice() het gekozen item uit de array verwijderd. Die wordt dan ingekort voor de volgende iteratie en de geplaatste afbeelding wordt niet voor een tweede keer gekozen.

Foto galerij met CSS Grid 2: galerij met CSS Grid (00:15:25)

Met CSS Grid zetten we een en ander in het gelid. (eerst even een passend font voor de kop)
Zoals altijd kiezen we de container en geven deze display: grid;
Daarna kun je je met repeat() eerdere kolommen maken. Dat geeft nog niet het gewenste resultaat omdat de afbeeldingen te groot zijn.
Selecteer deze en geef ze een breedte van 100%. Kies een tussenruimte met grid-gap.

De rijen worden automatisch gegenereerd en de hoogte wordt door de hoogste afbeelding.
Met grid-auto-rows maken we zoveel rijen als er nodig zijn, maar geven we in dit geval afwisselende hoogten mee zodat het dynamischer oogt. Veel afbeeldingen gaan over de ingestelde hoogtes heen.
Als de afbeeldingen nu een hoogte ingesteld krijgen blijven ze binnen de ingestelde waarden. Ze worden dan wel gestretcht en daarom snijden we ze bij met object-fit: cover.

Alles ziet er dan wel strak uit, maar het kan speelser.
We kiezen de eerste omhullende div om deze over 2 rijen en 2 kolommen uit te strekken met span 2.
Ook kiezen we om afbeeldingen om de 4 over 2 kolommen uit te strekken. Selecteer met :nth-child().
Dan blijken er gaten te vallen, die met grid-auto-flow: dense worden opgevuld door kleinere elementen.
Tot slot geven we elk vijfde element extra kolom-hoogte met grid-row: span 2.

Foto galerij met CSS Grid: bonusopdracht

Dit ligt meer op het gebied van JavaScript:
kun je de array in plaats van strings opbouwen uit objecten en die zo inzetten dat elke afbeelding zijn eigen alt-tekst heeft??

Inleveren

  • Na afloop plaats je deze training online in je bewijzenmap;
  • Valideer jouw pagina's op Markup Validation Service van W3C.
  • Maak een footer en plaats daarin de volgende markup: (uit https://github.com/Theo-denBlanken/validatie-W3C ) 
    <a href="http://validator.w3.org/check?uri=referer" target="_blank">
  <img src="https://blanken5.home.xs4all.nl/afb/valid-html5-blue.png" alt="Valide HTML5">
  </a>
<a href="http://jigsaw.w3.org/css-validator/check/referer" target="_blank">
    <img src="http://jigsaw.w3.org/css-validator/images/vcss-blue.gif" alt="Valide CSS">
</a>
  • Plaats jouw code op in een aparte repositry op GitHub en plaats jouw uitwerking online;
  • Maak in jouw GitHub-repo een README.md met daarin temnminste een link naar jouw online uitwerking.
  • Plaats de GitHub-link in ELO Magister bij de FRO-opdracht foto galerij

Checklist