afbeeldingen

Photobox is één van de knapste voorstellingen (credits to http://yaireo.github.io/photobox/) van afbeeldingen en wordt niet ondersteund door een Drupal 9 module. Vandaar dat ik er zelf één gemaakt heb. Tevens heb ik er voor gezorgd dat de afbeeldingen die in miniatuur worden getoond, responsive en zonder 'wezen' worden voorgesteld. Een weesafbeelding is een afbeelding die onderaan een rooster staat te bengelen zonder de volledige breedte van het scherm in te nemen. Bij deze voorstelling is het rooster altijd gevuld.

We gaan Photobox integreren in Drupal. Een zwakte van Photobox is dat ze voor de initiële voorstelling van de afbeeldingen, geen rooster voorzien. Dit moet je zelf doen. De sterkte van Photobox is de slideshow met miniaturen. Als we dus een knap rooster maken, dan hebben we een knappe combinatie.

Maar...

We kennen het allemaal. Afbeeldingen schikken zich naast elkaar maar de laatste afbeeldingen vullen de laatste rij niet. Zulke afbeeldingen noem ik 'wezen'. Ze zijn afhankelijk van de breedte van het scherm en zeer storend.

Er bestaat een open source script van Hoang Tran waarbij afbeeldingen als een 3D carrousel worden voorgesteld. Misschien niet de meest praktische voorstelling (voor veel afbeeldingen), maar zeker één van de mooiste.

De script heb ik bewerkt en aangepast voor Drupal. Ze is nu multidevice en multibrowser responsive. Ik heb er geen module van gemaakt omdat het best wordt weergegeven in fullscreen. Je moet dus de onnodige blokken van je thema verbergen daarvoor. Het werkt ook met deze blokken, maar is niet zo mooi. 

Unite Gallery heeft reeds jaren knappe scripts, die zelfs destijds in een Drupal 7 module gegoten werden. Vanaf Drupal 8 werd deze module betalend en in Drupal 9 is ze zelfs onbestaand.

Vandaar dat ik zelf de module heb gemaakt, Drupal 8-9 compatibel. Er werd geen PHP gebruikt, maar Twigs om dit te programmeren.

Vooreerst overlopen we kracht van deze open source scripts.. https://unitegallery.net/  (al credits and respect to Unite Gallery)

Je kan er een afbeeldingen mee voorstellen als volgt:

Steeds meer en meer worden afbeeldingen met de extensie .webp op het internet gebruikt.

Een beetje uitleg:
Een bestand met de .webp-bestandsextensie is een bestandsindeling die door Google is ontwikkeld om de bestandsgrootte van afbeeldingen te verkleinen zonder in te boeten aan kwaliteit. WebP-afbeeldingen zijn ontworpen om het web sneller te maken, met kleinere, rijkere foto's die ontwikkelaars kunnen gebruiken.

Momenteel kunnen deze nog niet worden gebruikt in Drupal zonder een kleine tussenstap.

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.

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)

Een afbeeldingsstijl voor het logo van de site.. Zo kan je zonder CSS of Photoshop je logo aanpassen. Je krijgt er bij de logo afbeelding een instelling bij.

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.

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.