Webp afbeeldingen gebruiken in Drupal

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.

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.

Jssor List Slider

Een mooie voorstelling (met of zonder autoplay) van afbeeldingen in een afbeeldingsveld van een inhoudstype. De afbeeldingen worden getoond met links de miniaturen van enkele andere afbeeldingen. Ik gebruik de Alt en Title van de afbeelding om de tekst en beschrijving weer te geven. De afbeelding zelf dient als link naar de node. De miniaturen linken naar de overeenkomstige afbeelding. Als je een miniatuur aanwijst stopt de slideshow en kan je rustig de afbeelding bekijken.