Een vriend vroeg mij om een systeem te bedenken om tekstvelden van een tekst- en achtergrondkleur te voorzien. Dit zou moeten gebeuren zonder dat de gebruiker CSS moet gebruiken. De persoon die inhoud op de site plaats is geen webdesigner...Vandaar.
Het spreekt voor zich dat we gebruik gaan maken van paragrafen. Zo kan men meerdere tekstvelden aanbrengen, al dan niet in combinatie met andere paragrafen (vb afbeeldingvelden)
Een voorbeeldje van één paragraaf.
Zeer simpele module die toelaat aan de bezoeker om het lettertype te vergroten of te verkleinen. Je krijgt drie letters: één om te vergroten, één om de originele grootte weer in te stellen en één om te verkleinen. Je moet het blokje een plaats geven en desnoods wat CSS toepassen.
Om velden onderling te schikken op een pagina zijn er veel mogelijkheden (Display Suite, Panels, Panopoly, Layout Builder, CSS met kolommen,...)
We gaan echter zelf, stapsgewijs, een gebruiksvriendelijke tool maken om 4 velden ordentelijk te positioneren. Andere velden in het inhoudstype kunnen in combinatie gebruikt worden en zullen de volledige breedte innemen van het scherm (boven en onder deze 4).
Codrops heeft zeer mooie scripts om afbeeldingen met hun titel en alt voor te stellen. Ik heb deze scripts geïntegreerd in een Drupal 8 inhoudstype. Alle credits gaan naar Codrops. De module is afhankelijk van de Asset injector en de PHP filter module.
Er is een inhoudstype bijgekomen. Image view. Hiermee maak je de nieuwe inhoud aan.
Een blok of een view (pagina of blok), al of niet weergeven op desktop, tablet of mobiele telefoon... Je kunt het met CSS, maar deze module detecteert het toestel automatisch.
Als voorbeeld ga ik de 'branding' verbergen op mobiles en tablets.
Desktop
Mobile
In combinatie met de module 'Mobile Device Detection' kan je hiermee van thema veranderen al naar gelang het toestel (phone, tablet, desktop).
Handig want niet alle thema's zijn mobiel vriendelijk en anderzijds zijn niet alle mobiele thema's knap op een desktop.
Eerst maak je een 'rule' aan:
Geef het een naam en kies een (actief) thema. Je kunt hier ook bijkomende voorwaarden voor pagina's instellen. Met een * geef je weer dat je alle pagina's wilt aanspreken.
Dit is er eentje waar je niet aan begint als je niet veel tijd hebt.. Ik heb er zowat een halve dag aan gespendeerd om alle mogelijkheden te overlopen...
In je inhoudstype (dat je zelf kiest) wordt een bodyveld omgetoverd tot een soort paragraafsysteem waar je tekst, video's, afbeeldingen, afbeeldingsgalerijen,... kunt mee maken. Je kunt in dit zelfde inhoudstype ook andere velden gebruiken, maar dit is niet echt de bedoeling.
Na installatie gebruik je drie onderdelen.
Deze module voegt aan lange tekst velden zoals body een instelling toe die het mogelijk maakt om de tekst uit- en inklapbaar te maken indien deze langer is dan gewenst. Het is in principe vergelijkbaar met Expanding Formatter, maar werkt op een andere manier. In plaats van te trimmen op basis van een aantal tekens, gebruikt deze module een specifieke (instelbare) hoogte om de tekst bij te snijden. Dit resulteert in een voorspelbare lay-out.
Een knappe module... Zorgt er voor dat je bij scrollen wat animaties kunt voorzien. Bekijk het overzicht van de mogelijkheden op hun site. De codes die je dan ziet moet je toepassen op je div's. dit kan je door bvb in een view de velden te herschrijven.
Ik heb een animatie gezet op dit overzicht:
Je ziet natuurlijk op deze print geen beweging.
Vanaf Drupal 8.5 zit deze module in de kern. Het is eigenlijk een vervanger van Panels.
Activeer de module
Vanaf nu kan je bij een inhoudstype de layout beheren. Er is ook een optie voorzien om per node dit te overrulen indien nodig.
Je krijgt dan bij een node de optie layout te zien.
