Honeycomb grid

De module is een integratie van de script op https://www.jqueryscript.net/layout/jQuery-Plugin-For-Responsive-Hexagon-Grid-Layout-Honeycombs.html. Ik heb die geïntegreerd in Drupal.

De module (=Honingraat rooster) geeft de afbeeldingen weer van een gekozen afbeeldingsveld van een inhoudstype naar wens. De Alt en Title van de afbeelding zorgt voor de tekst bij aanwijzen. Bij klikken op de afbeelding komt men op de node van de afbeelding terecht.

 

Fotorama text

De Fotorama module die wordt aangeboden op drupal.org heeft enkele tekortkomingen. Dit is jammer want volgens de pure code op fotorama.io (all credits to Art Polikarpov) zijn er wel veel mogelijkheden.

De Fotorama huidige drupal.org module (12/4/20)

Views PgwSlider

Met deze module kan je een view maken die de titels en afbeeldingen in een galerij weergeeft.

Responsive.


Je kiest een titel- en afbeeldingsveld. Zo kan je bepalen of de miniaturen links of rechts komen. Er is ook een slideshow mogelijk.


Photobox

Het is zelden dat ik een module bespreek die nog niet op drupal.org beschikbaar is, maar voor deze wil ik best een uitzondering maken. Photobox is één van meest geavanceerde afbeeldingsgalerijen. Tot hiertoe enkel in Drupal 7 beschikbaar. Dank zij Balint Csuthy (Pasqualle) is er nu op Github een Drupal 8 versie beschikbaar.

Je installeert het door de module te downloaden (zie link) en de zip te installeren. Via de composer instructies van de auteur kan je ook de third party installeren.

Flipping Gallery

Deze galerij werd oorspronkelijk gemaakt door [Pete R.](http://www.thepetedesign.com), Founder of [BucketListly](http://www.bucketlistly.com). Ik heb deze verwerkt in de Drupal 8 structuur.

Je kunt er meerdere afbeeldingen in en node mee presenteren op een mooie manier. Je kunt navigeren door klikken en scrollen (niet voor kleine schermen). Ik heb de galerij ook responsive gemaakt. Er werd een inhoudstype aangemaakt waar je afbeeldingen met hun Alt tekst kunt mee instellen. De Focal Point module kan je gebruiken om desnoods de focus te verleggen.

Fast Hover Slideshow

Een handige module die afbeeldingen in een node compact voorstelt in een slideshow. Deze slideshow wordt gestart door met de muis over de afbeelding te gaan (=aanwijzen). Bij kleine schermen is dit klikken.

Je kunt kiezen tussen landschap- en portretweergave:

Landschap

Portret

Horizontal Slide Out Menu

Een module die een view genereert van een geselecteerd inhoudstype met een afbeeldingsveld. Het afbeeldingsveld kan meerdere afbeeldingen bevatten. Er wordt gefilterd op een taxonomieveld. Per term wordt er een menulink aangemaakt, samen met een algemeen overzicht. Nodes die met meerdere termen getagd zijn, komen in elk van de menulinks voor.

De afbeeldingen worden met hun alt getoond en linken naar een node of naar een colorbox voorstelling. Tevens kan je de kleur van de menubalk via een kleurveldje kiezen.

Loading Effects for Grid Items

Masonry gecombineerd met een keuze van effecten bij het laden van de afbeeldingen. Mary Lou (Codrops) heeft dit gemaakt en ik heb dit grondig herwerkt in een Drupal 8 module en gebruiksvriendelijk gemaakt.

Je kunt instellen 

  • welk inhoudstype je gebruikt en welk afbeeldingsveld.
  • welk effect je wilt tijdens het laden

Animated Responsive Image Grid

De code van Codrops (credits to Mary Lou) dateert van 2012 maar blijft aantrekkelijk. Ik dit herwerkt en geïntegreerd in een Drupal 8 module.

De originele code bevat  5 demo's waar ik het beste heb uitgepikt. Het principe is als volgt...Je kiest een vast aantal rijen en kolommen. Dit geeft je vast een aantal afbeeldingen. Als je meer afbeeldingen hebt dan dit vast aantal, verschijnen de anderen door de vorige te vervangen. Dit in een oneindige lus. Zo komen alle afbeeldingen zichtbaar. Het vervangen gebeurt met willekeurige animaties. Er zijn er een tiental verschillende. 

Thumbnail Grid with Expanding Preview.

 Thumbnail Grid with Expanding Preview (Drupal 8 integration by Dirk Bernaert. Original code by Mary Lou (Codrops).)

Er werd een inhoudstype aangemaakt waarmee je kunt inhoud toevoegen. Kies een titel, inhoudstype, afbeeldingsveld en tekstveld dat je wilt gebruiken. 

Je krijgt een mooi rooster met vierkantjes. Installeer desnoods Focal Point om de focus te verleggen op je afbeelding.