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.

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:

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.

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.

Content Slider

Mooie voorstelling van de meest recente bijdragen van een inhoudstype. Ik heb de originele code drastisch herwerkt (All credits to Christine Wenniger). Het is een onderdeel van een 'onepage theme' van haar, waar ik het eerste gedeelte van gehouden heb.

Jssor image gallery

Op het net zijn er fantastische tools te vinden (Codrops, Jssor,...) die niet voor een CMS geschikt zijn. Het is een uitdaging om deze scripts aan te passen voor Drupal 8. Zo kan men gebruik maken van de structuur van de CMS.

Intense

Heeft hetzelfde effect op een afbeelding als Zooming. Bij klikken krijg je nu ineens afbeelding op ware grootte en je kunt met de muis navigeren.

De verkleinde afbeeldingen

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.

Blazy

Dit is een module die wordt gebruikt om het laden van afbeeldingen geordend te laten verlopen. Het wordt veel gebruikt in combinatie met andere modules.

Screen002011.png

Responsive kolommen

Afbeeldingen in een view responsive voorstellen is makkelijk... Je zet de view op onopgemaakte HTML en je maakt dat het afbeeldingsveld floating staat. Wil je andere velden integreren, dan kan je dit doen via het herschrijven van het afbeeldingsveld.

Image with Title

Een simpele maar zeer bruikbare module die er voor zorgt dat de titel van een afbeelding onderaan de afbeelding wordt getoond. Je hebt er dus geen extra veld voor nodig. Maak enkel dat je de titel kunt invullen. 

Text2Image

Een module waarbij je eerst moet nadenken over het nut er van... Het zet tekstvelden (ook titelveld) om naar een afbeelding (in png). Je kunt achtergrond- en letterkleur instellen. Met de module komen er ook een aantal lettertypes mee, maar je kunt er zelf nog toevoegen.

Image effect

We hebben reeds een aantal modules gezien die het mogelijk maken om speciale afbeeldingsstijlen (vb Focal Point, Imagick,...) aan te maken. Deze module is interessant omdat het bij het schalen en daarna 'speciaal resizen' toelaat.

Media watermark

Knappe module die een watermerk afbeelding toevoegt aan een afbeelding. Dit gebeurt op bestandsniveau.

Je maakt eerst een watermerk (je kunt er verschillende maken) en bepaalt de plaats op de toekomstige figuur. (-50px verticaal = naar boven)

Taggd

Eigenlijk gemaakt om gezichten te taggen in afbeeldingen, maar je kunt het ook als info bij een afbeelding gebruiken. Gebruik het nieuw veld.

Screen000345.png

Shuffle

Toch wel een ontdekking... Deze third party module geeft in een view een mooie responsive voorstelling van de afbeeldingen.

Installeer de third party. Neem enkel wat nodig is. De download bevat veel meer.

Inline Responsive images

Deze module laat je toe om met de ingebouwde uploadmanager in de CKEditor, een afbeeldingsstijl te kiezen.

Je moet dit bij de teksteditor instellen bij bvb Full HTML. Kies één van de 2. Ofwel de gewone stijlen, ofwel responsive. De 2 samen gaat (voorlopig) niet.

Inline Image Attach

Dit is het omgekeerde van de Insert module. Met deze module kan je namelijk de afbeeldingen in je tekstveld automatisch opslaan in een afbeeldingsveld.

Je geeft aan in het inhoudstype welke velden je wilt gebruiken.

Filebrowser

Module die toelaat aan de administrator om bestanden weer te geven (desnoods ook aan bezoekers) via een soort verkenner.

Het is een structuur op node basis. Je maakt een node aan per geheel van bestanden.

Swiper

Een mobile first module die toelaat om een afbeeldingsgalerij te maken met swipe functie.

Je kunt een swiper type aanmaken. 

Screen000098.png

Imagick

Deze module laat je toe een hele reeks andere effecten toe te voegen aan een afbeelding, zoals blur, spiegelen, ronde hoeken, ....

Image Replace

Niettegenstaande zijn complexiteit is dit er toch eentje om te onthouden.. Je kunt per breekpunt (schermbreedte) een andere afbeelding tonen. Ideaal om grote foto's door telkens kleinere te vervangen al naar gelang je tablet of smartphone gebruikt.

 

PC.

Colorbox Zoom

Een Colorbox voorstelling waar je met de muis kunt inzoomen... Na activeren van de module krijgen alle voorstelling met de Colorbox deze mogelijkheid. Simpel, maar kan een nadeel zijn als je dit niet altijd wilt.

Image Resize Filter

Een module die verplicht zou moeten zijn voor elke Drupal site. Als je met CKEditor een afbeelding verkleint, dan worden er geen pixels weggefilterd. De afbeelding blijft even groot qua bestandsgrootte. Deze module filtert de overbodige pixels weg.

Bx Slider

Eén van de vele diavoorstellingen in Drupal. Deze is wel heel vriendelijk voor smartphone en tablets door zijn swipe mogelijkheden.  Installeren met third party bestanden.

Drupal8_002661.png

Auto image style

Bij afbeeldingen kan je bij de weergave een afbeeldingsstijl kiezen. Handig. Sommige bestanden zijn echter verschillende qua breedte-hoogte verhouding. Portret of landschap noemt men dit. Deze module laat je toe om 2 stijlen toe te kennen.

Insert

Je wilt afbeeldingen met je CKEditor invoegen tussen tekst, maar je wilt toch gebruik maken van een afbeeldingsstijl? Het kan met deze module.

Na activeren van de module moet je bij de instellingen kiezen welk tekstformaat je zult gebruiken.

jCarousel

Eenvoudige module die zorgt dat je verschillende afbeeldingen compact kunt weergeven.

Je kunt onder andere instellen hoeveel afbeeldingen je wilt zien in de voorstelling.

CKEditor Upload Image

Je bent aan het werken in de CKEditor en je wilt een afbeelding van je computer invoegen.... gewoon plakken. Het programma laadt de afbeelding automatisch op. Op dit ogenblik lukt dit niet om een webpagina te kopiëren en te plakken met de afbeeldingen.

Masonry API

Masonry heeft de mogelijkheid om lege ruimtes op te vullen. Niet enkel met afbeeldingen maar met volledige blokken. Het past de grootte van de divs aan, aan de beschikbare ruimte én tijdens het wijzigen van de schermgrootte krijg je nog een mooie transitie er bij..

Focal Point

Focal Point laat u toe het belangrijkste gedeelte van een afbeelding te specifiëren, interessant wanneer je een afbeelding wil schalen en bijknippen.

Installeer de module zoals gewoonlijk.

Image Widget Crop

Hier heb je 2 modules voor nodig. Image Widget Crop en de Crop module zelf. Je kunt er een afbeeldingsveld mee bijsnijden. Tal van instellingen.. Kijk desnoods ook naar de Engelstalige handleiding van de module zelf.

Na installatie krijg je Crop Types bij Structuur.

Views Slideshow

Deze module kan van elke view een slideshow maken.  Dus niet alleen van afbeeldingen maar ook van tekst. Alles wat er in een view zichtbaar is, kan dus roterend worden weergegeven. Zowel horizontaal als verticaal roterend.

Afbeeldingsstijlen

Afbeeldingsvelden in inhoudstypes en views kunnen een specifieke stijl meekrijgen. Drupal 8 voorziet nu ook in responsive stijlen waarbij breekpunten worden ingesteld, om naargelang de breedte van het venster, de afbeeldingen in een bepaald formaat weer te geven.

Colorbox

Colorbox is een 'third party' module. Het heeft dus ook nog bestanden nodig die je manueel moet uploaden.

Zet ze in de juiste map.

Drupal8_001467.png

IMCE

IMCE zou eigenlijk overbodig moeten zijn nu de CKEditor (nu in de kern) ook een multi-upload mogelijkheid voorziet. Handig, maar het verbleekt tegenover de mogelijkheden van de nieuwe IMCE. Hieronder zie je de ingebouwde tool om met de CKEditor afbeeldingen up te loaden en te selecteren.