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.

Screen002006.png

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

Screen002005.png

 

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.

Screen001967.png

Screen001965.png

Plaats de inhoud in de libraries map.

Screen001964.png

Activeer...

Screen001969.png

Laat ons eerst een inhoudstype maken met een meervoudig afbeeldingsveld.

Screen001976.png

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

Screen001975.png

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.

Screen001978.png

Ik stel natuurlijk de input in op Focal Point.

Screen001977.png

Een voorbeeldje...

Screen001979.png

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

Screen001972.png

Je krijgt enkele roosters te zien.

Screen001973.png

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

Screen001992.png

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

Screen001993.png

Screen001995.png

Onderaan staat de min breedte van het scherm. 

Screen002002.png

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

Screen002004.png

Onder een bepaalde breedte geen grid meer...

Screen002001.png

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

GridStack_0.gif

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

Screen001994.png

Zo heb ik dus voor een breed scherm.

Screen002003.png

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

Screen001989.png

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

Screen001980.png

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

Screen001981.png

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.

Screen001988.png

 

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

Screen001990.png

Yep

Screen001991.png

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

Screen001985.png

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

Screen002010.png

Screen002009.png

Ook hier kan je Colorbox integreren.


Screen002007.png


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.

Screen001974.png