Full screen slideshow met Adapativetheme, flexslider en views

Fotografen of ontwerpbureau's pakken graag uit met een full screen slideshow op de voorpagina van hun website.

Hieronder volgt een omschrijving van hoe je zo'n full screen slideshow kunt maken met Drupal 8, Adaptivetheme en flexslider.

Begin met een thema te gebruiken die zich leent om zoiets te maken. Bijvoorbeeld Adaptive Theme.

Installatie van het thema

Installeer het adaptivetheme basis thema
Maak een subthema met AT Tools zoals hier beschreven en stel het in als standaard thema

CSS Editor

Het kleinere broertje van de CSS injector (onderdeel van de Asset injector). Deze CSS wordt toegekend per thema. Je kunt het niet per pagina, inhoudstype,... instellen. Het is altijd voor gans het thema.

Bij de instellingen van een thema kan je de CSS plaatsen en activeren. Normaal gezien is er een autopreview om het resultaat te zien. In drupal 8 werkt dit (nog) niet.

Screen000407.png
 

 

Bootstrap Library

Bootstrap is een opmaak systeem met CSS en javascript. Het komt er op neer dat je kant en klaar CSS classes kunt aanspreken, als je weet hoe ze heten uiteraard. Op het net vind je uitgebreide handleidingen.

Drupal8_001940.png

Link class

Deze simpele module doet wat ze zegt. Je kunt aan een link een CSS klasse toekennen. Handig om verschillende knoppen op één pagina te hebben.

Je krijgt een mogelijkheid bij

Drupal8_001919.png

Waar je van alles kunt instellen. Standaard, een keuzelijstje met mogelijkheden of op het moment zelf een klasse toekennen.

Drupal8_001920.png

 

Field Formatter Class

In Drupal 7 was dit afhankelijk van Field Formatter Settings. Nu niet meer. Het zorgt voor een mogelijke toekenning van een CSS klasse aan een veld. Zeer praktisch.

Bij elk veld kan je nu via de configuratie (een tandwieltje) een CSS klasse declareren.

Drupal8_001844.png

Je plaats nu de nodige CSS

Drupal8_001847.png

@font-your-face

Wil je eens een ander lettertype dan gewoonlijk... een probleem. De lettertypes die je wilt gebruiken op je site moeten ook in de browser aanwezig zijn van de bezoeker van je site.

Dit kan je oplossen door een lettertype te nemen dat meegeleverd wordt met de pagina die men bezoekt. De module @font-your-face zorgt daar voor. Je kunt kiezen uit verschillende leveranciers. Sommigen zijn betalend. Ik neem het gratis Google Fonts. De basismodule moet je ook activeren.