Full screen slideshow met Adapativetheme, flexslider en views

Moeilijkheidsgraad

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

Tip: gebruik composer om alles in één beweging te downloaden. Het commando "composer require drupal/at_tools"
zorgt ervoor dat zowel het basis thema als de AT Tools module in de juiste mappen worden gedownload.

In AT kan je zelf bepalen hoe breed de verschillende regio's moeten zijn. Je hebt de keuze om met em, rem, vw, px en procent waarden te werken.
Standaard heeft een AT subthema een breedte van 75em

In de instellingen van het thema onder layout: zet je leaderboard op 100%. Dit doe door een vinkje te plaatsen bij "override max-widths" en "Override max-width per row".
Leaderboard zet je op 100% en klik op "Save layout settings".

Stel de breedte van het leaderbord in op 100%

 

Installatie van flexslider

Voor de slideshow kan je verschillende modules gebruiken, in dit voorbeeld werken we met Flexslider.
Installeer Flexslider en de third party zoals hier beschreven
Zorg er ook voor dat de submodule "Flexslider view style" aan staat vermits we met views gaan werken.

Maak eerst een nieuwe optionset voor Flexslider of pas de default optionset aan.
Dit doe je via instellingen -> media -> Flexslider
Geef de optionset de naam Voorpagina slider.

Om één of andere reden werkt de responsiviteit van de Flexslider enkel als je de overgang op vervagen staan. Laat daarom alles standaard staan behalve op het tabblad "Naviagtion and Control Settings" vink je Next/Previous Controles af en zet je Paging controles uit.

Sla alles op.
 

Inhoudstype aanmaken

Maak een nieuw inhoudstype aan en geeft het de naam Voorpagina slider.
Het standaard body veld mag je verwijderen
Voeg een afbeeldingsveld met de naam slide toe en beperk het toegestane aantal waarden tot 1.
Zorg ervoor dat de opgeladen afbeeldingen niet groter zijn dan 2600px x 2600px.
Dit doe je door bij "Maximale resolutie" 2x 2600 in te vullen. Dit voorkomt dat de opgeladen afbeeldingen te groot zijn.

Uiteraard moeten we ook zorgen dat de afbeeldingen niet te klein zijn. Vul daarom bij "Minimale resolutie" 2x 1200 in.

Maak nu enkele nodes aan van het inhoudstype voorpagina slider.

 

Maak een afbeeldingsstijl

Onder instellingen -> media -> afbeeldingsstijlen
Maak een nieuwe stijl aan en geef hem de naam Voorpagina slider

Bij bewerking kies je voor "schalen"
Afmeting: 2600 x 2600
 

De slideshow maken met views

Maak een nieuwe view aan met de naam Voorpagina slider
View instellingen: bij weergeven kies je voor inhoud van het type Voorpagina slider
Kies voor een blok van het weergaveformaat Flexslider en kies voor velden
Items per blok zet je op onbeperkt door er geen cijfer in te plaatsen.
 

Maak een nieuwe view aan

Dit geeft onderstaand resultaat

Overzicht view instellingen

Bij instelling van Flexslider kies je voor de optionset die we daarnet hebben aangemaakt of laat de default staan indien je deze hebt aangepast.

Flexslider settings

Onder velden toevoegen voeg je het afbeeldingsveld Slide toe. Kies als afbeeldingsstijl die we daarnet hebben aangemaakt. In ons geval is dat Voorpagina slider.
Verberg de titel
Geef de blok een naam. In ons voorbeeld opnieuw Voorpagina slider.

Sla de view op.

Vieuw overzicht compleet

 

Plaatsen van het blok op de voorpagina

Via Structuur -> Blok-layout plaatsen we het blok in het Leaderboard gebied
Verberg de titel en zorg ervoor de het blok enkel op de voorpagina zichtbaar is.

Blok plaatsen via structuur blok-layout

Verwijder het user-menu die AT standaard in het Leaderboard gebied plaatst zodat wel door niets worden gehinderd.

CSS

Als je teruggaat naar de home pagina merk je dat de slideshow er nu staat en werkt, maar uiteraard moet er nog wat css worden toegevoegd om alles mooi te laten weergeven.
Het gebied Leaderboard en de container erboven hebben beiden een standaard padding die we moeten verwijderen.
In AT zijn dat de classes .l-r en .l-rw. Deze zetten we op padding 0.

.l-r, .l-rw { padding: 0; }

Nadat de css is aangepast zal de slideshow de volle 100% van de browser breedte aannemen.

Fleslider heeft standaard een border van 4px, ook deze verwijderen we.

.flexslider{ border: 0px; }

Het enige wat we nu nog moeten doen is zorgen dat de slideshow ook de volledige hoogte van het scherm inneemt.

Dit doen door bij de hoogte de viewport op 100vh te zetten.
Viewport is eigenlijk ontwikkeld voor smartphones en tablet maar werkt ook in gewone browsers.

Met object-fit laten we de afbeelding de volledige oppervlakte van de div in beslag nemen door deze op cover in te stellen.

.flexslider .slides img{ width: 100%; height: 100vh; object-fit: cover; }

Hieronder de gebruikte css

css

Een bijkomend voordeel van deze manier van werken is dat je nog steeds kan scrollen op die pagina waar de slideshow staat.Je kan nog inhoud plaatsen onder de slider. Echter als de pagina laadt en er is nog niet gescrolled zal de slideshow de volledige hoogte en breedte van het scherm aannemen.

Dit is het eindresultaat

Eindresultaat

Er is een screencast gemaakt. Zie youtube filmpje hieronder.

Externe film