responsive

Views responsve columns

Het ingebouwde roostersysteem (grid) van views in niet echt responsive, dit wel.

Je stelt zelf in volgens de breedte van het scherm, hoeveel kolommen je wilt. Het systeem heeft zelf ingebouwde breekpunten.

Zeer breed scherm

Screen000585.png

Tablet
Screen000586.png

Jquery Carousel

Nog een galerij voor afbeeldingen in een afbeeldingsveld die meervoudig staat. Volledig responsive en swipen maar...of kijk naar de automatische voorstelling.

Screen000435.png

Je kunt deze makkelijk verticaal zetten.. Misschien een blokveldje maken...

Screen000440.png

Kijk eens wat je allemaal kunt instellen...

jQuery Auto Height

Als je floating blocks (een beetje CSS ) gebruikt in je node of view, dan zijn ze meestal niet van dezelfde hoogte. Dit is soms storend omdat je lege plaatsen krijgt.

Deze module kijkt per rij wat de hoogste inhoud is en past de hoogte van alle andere blokken in de rij aan. Ook als je dezelfde rij in een ander scherm bekijkt waar er dan meer of minder items worden getoond, blijft het programma kijken naar de hoogste inhoud.

Screen000374.png

CKEditor Responsive Plugin

Deze plugin laat je toe om snel kolommen aan te maken in een tekstveld. Ze zijn responsive als je er ook zelf de CSS bij maakt.

Eerst moet je in je tekstformaat de knop actief zetten.

Screen000276.png

Bij klikken kan je kiezen uit verschillende layouts.

Screen000282.png

Enkele voorbeelden

Owl Carousel (Owl)

Een speciale module... Owl carousel heeft een Drupal 8 release, die (nog) niet werkt. Er bestaat wel een Owl module die wel werkt maar die je niet via drupal.org vindt..

Als je de Owl Carousel installeert (werkt niet) krijg je bij de help te zien dat je de Owl module moet installeren..

Screen000237.png

De Owl module moet via de link van Github downloaden en installeren.

Shuffle

Toch wel een ontdekking... Deze third party module geeft in een view een mooie responsive voorstelling van de afbeeldingen.

Installeer de third party. Neem enkel wat nodig is. De download bevat veel meer.

Screen000218.png

Maak een inhoudstype aan met een afbeeldingsveld en een meervoudig referentieveld (bijvoorbeeld naar een taxonomieterm). Het moet meervoudig zijn.

Maak nu de view aan

Inline Responsive images

Deze module laat je toe om met de ingebouwde uploadmanager in de CKEditor, een afbeeldingsstijl te kiezen.

Je moet dit bij de teksteditor instellen bij bvb Full HTML. Kies één van de 2. Ofwel de gewone stijlen, ofwel responsive. De 2 samen gaat (voorlopig) niet.

Screen000164.png

Je kunt zelfs de preview bekijken..


Screen000165.png

Swiper

Een mobile first module die toelaat om een afbeeldingsgalerij te maken met swipe functie.

Je kunt een swiper type aanmaken. 

Screen000098.png

De module gebruikt css klassen die meekomen met de third party.


Screen000099.png

Haal de bestanden en mappen van hun site en zet ze in libraries.

Drupal 8 MegaMenu

Deze responsive menu heeft de mogelijkheid om kolommen en zelfs blokken in een menu te gebruiken. Er zijn wat elementaire standaardkleuren en instellingen meegeleverd. Afwerken naar smaak...

Kijk zeker naar de bijgeleverde handleiding. Stap voor stap uitgelegd.. een zeldzaamheid.

Je krijgt bij de instellingen van het menu (via Structuur) een voorbeeld. Van hieruit doe je alle instellingen. Klik op wat je wilt wijzigen.

Abonneer op responsive