GridStack

Een module met veel instellingen... die afbeeldingen in een rooster voorstelt. Dit rooster is volledig in te stellen en dit per breekpunt qua schermbreedte... Het kan gebruikt worden in afbeeldingsvelden in nodes en in een view. De module biedt enkele voorbeelden aan, om mee te starten.

Bij een kleiner scherm... Let op de andere indeling van het rooster.

 

We beginnen met de installatie. Gridstack maakt gebruik van BLazy. Gelieve voor deze installatie en werking te kijken naar de bespreking van deze module.

Gridstack is een third party. Kies de juiste versie die de module voorstelt. Bij dit schrijven is het de v0.4.0.. en klik op Source code.

Plaats de inhoud in de libraries map.

Activeer...

Laat ons eerst een inhoudstype maken met een meervoudig afbeeldingsveld.

Ik neem een veld voor 9 afbeelding. Ik heb namelijk een rooster voor 9 afbeeldingen.. Meer afbeeldingen steek ik desnoods in een ander veld...

Ik ga ook gebruik maken van Focal Point. Hiermee kan je de focus plaatsen per afbeelding. In het rooster komen de afbeeldingen namelijk in alle formaten voor en ik wil altijd het belangrijkste zien, ook al staat dit niet in het centrum.

Ik stel natuurlijk de input in op Focal Point.

Een voorbeeldje...

OK. Laat ons eens kijken wat de module als voorbeeldrooster meelevert. Bij structuur is er een menu item bijgekomen.

Je krijgt enkele roosters te zien.

Tagore is er eentje van en bevat 9 afbeeldingen. We bekijken de instellingen.

Bij de instellingen zie je dat je per schermbreedte een rooster krijgt. Je kunt zelfs de pixels instellen en zelf de breekpunten bepalen.

Onderaan staat de min breedte van het scherm. 

Er zijn ook algemene instellingen. Onder de min width wordt er geen grid meer getoond.

Onder een bepaalde breedte geen grid meer...

Tijd nu voor some magic.. Je bepaalt zelf door slepen en resizen hoe je rooster er uit ziet (en dit per breekpunt)

Je kunt zelfs per item een aparte afbeeldingsstijl instellen. Ik heb dit niet gedaan en werk met Focal Point.

Zo heb ik dus voor een breed scherm.

En voor iets smaller. Merk de verschillen op in het rooster. Je moet wel telkens je venster vernieuwen...als je dit uittest.

Je moet natuurlijk eerst in je inhoudstype kiezen voor deze weergave.

Je krijgt hier de keuze van enkele roosters. Niet allemaal. Later ga ik daar verder op in.

Je krijgt dan tal van instellingen. Je kunt ook de Colorbox combineren (eerst Colorbox kiezen, bijwerken en opnieuw openen) Lightbox image style geldt ook voor Colorbox.

 

Er komt nu een kruis te voorschijn bij het aanwijzen van elke afbeelding.

Yep

De instellingen van de weergave zien er bij mij zo uit.

Ook in views kan je Gridstack gebruiken. Hier wordt elke eerste afbeelding van elke node gebruikt.

Ook hier kan je Colorbox integreren.





Tenslotte... Er werden enkele voorbeelden meegeleverd van rooster die afhankelijk zijn van Bootstrap of Foundation. Daarom zag je die niet in de keuze. Wil je dit gebruiken moet je ook deze libraries installeren.