afbeeldingen

Deze galerij werd oorspronkelijk gemaakt door [Pete R.](http://www.thepetedesign.com), Founder of [BucketListly](http://www.bucketlistly.com). Ik heb deze verwerkt in de Drupal 8 structuur.

Je kunt er meerdere afbeeldingen in en node mee presenteren op een mooie manier. Je kunt navigeren door klikken en scrollen (niet voor kleine schermen). Ik heb de galerij ook responsive gemaakt. Er werd een inhoudstype aangemaakt waar je afbeeldingen met hun Alt tekst kunt mee instellen. De Focal Point module kan je gebruiken om desnoods de focus te verleggen.

Een handige module die afbeeldingen in een node compact voorstelt in een slideshow. Deze slideshow wordt gestart door met de muis over de afbeelding te gaan (=aanwijzen). Bij kleine schermen is dit klikken.

Je kunt kiezen tussen landschap- en portretweergave:

Landschap

Portret

Een module die een view genereert van een geselecteerd inhoudstype met een afbeeldingsveld. Het afbeeldingsveld kan meerdere afbeeldingen bevatten. Er wordt gefilterd op een taxonomieveld. Per term wordt er een menulink aangemaakt, samen met een algemeen overzicht. Nodes die met meerdere termen getagd zijn, komen in elk van de menulinks voor.

De afbeeldingen worden met hun alt getoond en linken naar een node of naar een colorbox voorstelling. Tevens kan je de kleur van de menubalk via een kleurveldje kiezen.

Een mooie voorstelling (met of zonder autoplay) van afbeeldingen in een afbeeldingsveld van een inhoudstype. De afbeeldingen worden getoond met links de miniaturen van enkele andere afbeeldingen. Ik gebruik de Alt en Title van de afbeelding om de tekst en beschrijving weer te geven. De afbeelding zelf dient als link naar de node. De miniaturen linken naar de overeenkomstige afbeelding. Als je een miniatuur aanwijst stopt de slideshow en kan je rustig de afbeelding bekijken.

Masonry gecombineerd met een keuze van effecten bij het laden van de afbeeldingen. Mary Lou (Codrops) heeft dit gemaakt en ik heb dit grondig herwerkt in een Drupal 8 module en gebruiksvriendelijk gemaakt.

Je kunt instellen 

• welk inhoudstype je gebruikt en welk afbeeldingsveld.
• welk effect je wilt tijdens het laden

Mooie voorstelling van de meest recente bijdragen van een inhoudstype. Ik heb de originele code drastisch herwerkt (All credits to Christine Wenniger). Het is een onderdeel van een 'onepage theme' van haar, waar ik het eerste gedeelte van gehouden heb. De laatste zes bijdragen worden getoond aan de hand van een titel en afbeelding. Ik heb ook een knop voorzien om naar de oudere bijdragen te gaan. Deze link moet ingevuld worden en verwijzen naar de view die de oudere bijdragen toont. Deze view maak je zelf.

De code van Codrops (credits to Mary Lou) dateert van 2012 maar blijft aantrekkelijk. Ik dit herwerkt en geïntegreerd in een Drupal 8 module.

De originele code bevat  5 demo's waar ik het beste heb uitgepikt. Het principe is als volgt...Je kiest een vast aantal rijen en kolommen. Dit geeft je vast een aantal afbeeldingen. Als je meer afbeeldingen hebt dan dit vast aantal, verschijnen de anderen door de vorige te vervangen. Dit in een oneindige lus. Zo komen alle afbeeldingen zichtbaar. Het vervangen gebeurt met willekeurige animaties. Er zijn er een tiental verschillende. 

 Thumbnail Grid with Expanding Preview (Drupal 8 integration by Dirk Bernaert. Original code by Mary Lou (Codrops).)

Er werd een inhoudstype aangemaakt waarmee je kunt inhoud toevoegen. Kies een titel, inhoudstype, afbeeldingsveld en tekstveld dat je wilt gebruiken. 

Je krijgt een mooi rooster met vierkantjes. Installeer desnoods Focal Point om de focus te verleggen op je afbeelding.

Nog een mooie voorstelling van afbeeldingen gecombineerd met tekst en een link naar de node. Oogt ook mooi op smartphone. De node die je aanmaakt neemt van een zelf gekozen inhoudstype, een afbeeldings- en een tekstveld. Ik heb de code zo aangepast dat de 'categorie', de node wordt. Per node wordt er dus een label aangemaakt. Het afbeeldingsveld dat gebruikt wordt is enkelvoudig. Je kunt natuurlijk in je inhoudstype nog extra velden aanmaken. 

Desktop presentatie

Mooie voorstelling van afbeeldingen... Bij scrollen of slepen komt de volgende afbeelding in twee helften tevoorschijn. De ene helft komt van boven, de andere van onder.

Ik heb de bestaande script van Fabio Ottaviani aangepast en herwerkt naar de veldstructuur van Drupal 8. De module bevat veel code maar is geen third party. Ik heb ook op elke afbeelding een link gelegd naar de node, anders kon je niet navigeren.