Integratie van code in Drupal 8

Moeilijkheidsgraad
trefwoorden

Er bestaan afbeeldingsgalerijen, formulieren, presentaties, pagina's... die in pure HTML/CSS/Javascript geschreven zijn en die beter voor Dreamweavers weggelegd zijn dan voor CMSers. Zeker niet voor Drupallers met hun veldstructuur.

Zo kan je afbeeldingen mooi voorstellen met bvb Swiper of een code voor een ruitvormige structuur van het net halen. Als je deze code gebruikt in een CKEditor tekstveld, kan je dan dit evenaren. Je ziet HTML, CSS en Javascript. Er worden hier vbv figuren als achtergrond gebruikt om de galerij te vormen.

Screen000480.png
Screen000481.png

Hier een print van het resultaat:

Screen000482.png

Je moet dus in de code de URL's van de afbeeldingen inbrengen. Iets waar de doorwinterde Drupaller geen moeite mee heeft, maar eigenlijk is dit geen Drupal. Als je een site maakt voor een winkelier, dan wil die persoon niet in de code werken..

Kan men codepagina's integreren in Drupal velden?

Jazeker....Je kunt vb een afbeeldingsveld en een veld voor de grootte van de afbeeldingen maken. Daarna is het voor een programmeur een koud kunstje om dit in PHP code om te zetten op basis van de oorspronkelijke HTML pagina. Ik heb deze format echter uitgewerkt zonder dat je PHP pagina's nodig hebt. Ik maak gebruik van de token filter (https://www.drupal.org/project/token_filter) module.

Daarmee kan je de afbeeldingen in een afbeeldingsveld aanspreken zoals elk ander veld in de node. Als voorbeeld heb ik een body (voor de code), een afbeeldingsveld en een numeriek veld voor de afbeeldingsgrootte.

Screen000483.png

De integratie in de code. Kijk naar de vierkante haakjes. Zie de nummering van de afbeeldingen. Het vervangt de naam van de geuploade afbeelding.

Screen000484.png

Ook  in CSS is dit te gebruiken. Hier ga ik de grootte van de afbeelding vanuit het veld overnemen.


Screen000485.png

Eens we dit kunnen zijn we vertrokken.. Je stelt de scripting als standaard voor het body veld in je nhoudstype en verbergt het voor de input. Omgekeerd zet je het body veld als enige in de weergave en verbergt de rest. Wat CSS om de zaak mooi te houden en klaar. Een gebruiker kan nu afbeeldingen in het veld toevoegen, de grootte kiezen. Opslaan en kijken naar het resultaat.

Zijn er nadelen.. Jazeker. Ik heb een afbeeldingsveld voor 10 afbeeldingen aangemaakt. Als ze niet alle 10 worden ingevuld zie je een lege plaats. PHP kan dit oplossen door een lus in te bouwen. Zonder PHP kan je dit desnoods oplossen door bvb paragraaftypes aan te maken.. Eentje voor bvb 5, 7 en voor 10 afbeeldingen..

Test maar eens uit op http://project1.drupal8school.be/nl/node/add/swiper_coverflow_integratie

Ik heb er zelfs voor gezorgd dat de Swiper coverflow voor smartphones overgaat naar de kubus voorstelling. Coverflow is voor smartphones niet ideaal...(Als je dit uittest moet je bij resizen van je scherm wel eventjes vernieuwen.)

Een print van de PC weergave

Screen000479.png

Een print van de smartphone weergave.
Screen000478.png

Het beste van de code programmeurs verenigd in de voordelen van de Drupal structuur... (Alle afbeeldingen zijn bvb nu ook in views te gebruiken) Beter kan het niet worden...