Tekstvelden met opmaak

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. 

De auteur kan makkelijk de kleur kiezen... Zowel voor de tekst als de achtergrond.

Hoe doen we dat? 

We maken gebruik van de Color Field module (https://www.drupal.org/project/color_field) om de kleuren te kiezen. Met PHP (https://www.drupal.org/project/php) gaan we dit dan herschrijven met de opmaak erbij. 

Eerst maken we een paragraaftype aan met de nodige velden. De body zal de originele tekst bevatten De Script zal dit herschrijven en de opmaak toevoegen. Bij de weergave gaan we dus de body, de kleurvelden, verbergen en de enkel de script weergeven.

 

Zet bij de input, de kleurvelden op Color HTML5. Deze velden kunnen ook transparantie weergeven. Ik gebruik dit hier niet.


De paragraaf moet natuurlijk in een inhoudstype worden ondergebracht. Ik beperk me hier tot het paragraafveld. Dit kan uitgebreid worden.



De kern van deze bijdrage zit hem natuurlijk in de PHP die dit alles mogelijk maakt. Dit moet standaard in het scriptveld van de paragraaf worden aangebracht. De vier eerste regels verwijzen naar de naam van de gebruikte velden en paragraaftype. Je moet die aanpassen, tenzij je knal dezelfde veldnamen zou gebruiken... Merk op dat ik een global php variabele gebruik om te tellen over de meerdere paragrafen heen, welke paragraaf we moeten herschrijven. Deze zet ik niet op nul. Anders zou het tellen altijd van nul beginnen bij elke paragraaf. Ik maak gebruik van de php instelling dat een variabele, standaard op nul staat. Met $tekstparagrcount++; wordt deze dan telkens met 1 verhoogd.

Voor de rest is het principe als volgt. Open de paragrafen die horen bij de node in een lus ($paragraphs = $node->field_tekst_met_kleur->getValue();) . Kijk welke soort het is (je kunt andere soorten paragrafen gebruiken if ($type==$naam_paragraaftype){). Als het van het juiste type is en het de juiste volgorde heeft (if ($count==$tekstparagrcount){) , dan neem je de kleurvelden en herschrijf je de output. Je ziet dat ik ook 10 px padding heb gebruikt. Dit is aanpasbaar natuurlijk.

<?php
// vul deze gegevens in

$naam_paragraaftype="tekst_met_kleurkeuze";
$naam_tekstkleurveld="field_tekstkleur";
$naam_achtergrondkleurveld="field_achtergrondkleur";
$naam_tekstveld="field_body_met_kleurkeuze";

// hierna moet je niets wijzigen
global $tekstparagrcount;
$tekstparagrcount++;
$nid = \Drupal::routeMatch()->getRawParameter('node');
$node = \Drupal::entityTypeManager()->getStorage('node')->load($nid);

use Drupal\file\Entity\File;
use Drupal\image\Entity\ImageStyle;
use Drupal\paragraphs\Entity\Paragraph;

$paragraphs = $node->field_tekst_met_kleur->getValue();
$count=0;
foreach ( $paragraphs as $paragraph) {
$p = \Drupal\paragraphs\Entity\Paragraph::load( $paragraph['target_id'] );
$type = $p->getType();
if ($type==$naam_paragraaftype){
$count++;
if ($count==$tekstparagrcount){
$tekstkleur= $p->$naam_tekstkleurveld->getString();
$achtergrondkleur= $p->$naam_achtergrondkleurveld->getString();
$inhoud=$p->$naam_tekstveld->value;
echo "<div style='color:$tekstkleur;background:$achtergrondkleur;padding:10px;'>$inhoud</div>";
}// welke paragraaf
}// welk paragraaftype
}//lus paragrafen
?>