Maak layout-paragraphs kleurrijk

English flagDrupal 9

Layout paragraphs is de nieuwste loot aan de module boom om een grote diversiteit van layouts te maken. Het zou beter zijn dan de voorgangers: panels, display suite en de core module layout builder. Met layout paragraphs zijn inderdaad indrukwekkende layouts te maken.
In de instructie video’s worden verschillende voor- en achtergrondkleuren gebruikt, maar hoe dat wordt gerealiseerd is op internet niet te vinden. Hoewel: in één video van de makers wordt verteld dat daar extra code voor nodig is. Maar waar is die?

We hebben de website www.promes.nl omgebouwd. Hierin waren meerdere horizontale tekstblokken en enkele kolommen nodig. Het oogde wat saai, dus kleur toevoegen, maar hoe? Voor een eenmalige aanpassing is css voldoende, maar we wilden dat redacteuren zelf kleuren konden kiezen.
We vonden een artikel van Joris Snoek van Lucius Digital, gebaseerd op kleur in paragrafen van de paragraph module (een noodzakelijk onderdeel van layout paragraphs) op deze url:
www.lucius.digital/en/blog/drupal-paragraphs-let-content-managers-easily-choose-color-background-and-text-each.

Deze methode is als basis gebruikt. Omdat we een paragraph binnen een layout paragraph gebruiken en één-, twee- en driekoloms layouts wensten moesten we aanpassingen doen en de doelstelling iets beperken. Zo is het wel mogelijk om de tekst in een blok een achtergrond te geven, maar alleen het deel waarin tekst staat en niet het gehele blok. De consequentie is als er een tweekoloms blok is opgegeven, die beide een achtergrondkleur krijgen, dan is de kleur per kolom niet altijd even hoog op verschillende apparaten (zie de voorpagina van www.promes.nl). Afhankelijk van de schermbreedte wordt de tekst iets anders verdeeld over de beschikbare kolombreedte waardoor de ene kolom iets hoger kan worden dan de andere en daarmee de kleur. Met het aanpassen van de tekst kan hier wel wat aan gedaan worden, maar dat is uitproberen.
Maar als we ons, zoals Joris, beperken tot blokken zonder kolommen, werkt alles prima.

Benodigdheden

De aanpassing in het wrapper html element, zoals Joris dat heeft beschreven, is niet nodig. Er zijn ook nog andere versimpelingen.

Installeer de modules op de gebruikelijke manier, bij voorkeur met composer.

Toevoegen van de kleurvelden

Voeg in de paragraph twee kleurvelden toe: één voor de voorgrond kleuren en de ander voor de achtergronden. Noem deze respectievelijk FG color en BG color, zodat de veldnamen field_fg_color en field_bg_color worden. De titel (label) kan daarna bij de instellingen eventueel worden aangepast aan de gewenste naam. Maar de veldnamen hebben we later nodig, dus moeten gestandaardiseerd zijn.

Voeg een nieuw kleurveld toe
Voeg een bestaand kleurveld toe

Bij de instellingen kan worden opgegeven of het een verplicht veld is. Ik raad aan om dit niet verplicht te maken, anders moet er iedere keer weer een kleur geselecteerd worden. Tevens is er de mogelijkheid om de lichtondoorlatendheid vast te leggen (Record opacity). Deze wordt niet gebruikt, dus niet aanvinken. In de meeste websites is het verstandig om als standaardkleur de ‘geen kleur’ knop te kiezen: het witte vierkantje met rode dwarsstreep.

Instellingen van een kleur

Als we naar de formulierweergave beheren (Form display) gaan dan staan er bij beide kleurvelden al een aantal kleuren gedefinieerd. Beperk het aantal tot de gewenste kleuren (zie ook verderop). Dit kan later worden aangepast. Houdt er rekening mee dat de kleurcode altijd in 7 tekens moet worden ingevoerd: # + 6 hexadecimale tekens (0 t/m 9 en a t/m f). Hoofd- en kleine letters worden identiek beschouwd.
Bij de instellingen kan worden opgegeven hoe de kleurcode in de database opgeslagen moet worden. De keuze maakt voor deze toepassing niet uit.

Bij het toevoegen van tekst in een paragraph zien de ingestelde, te kiezen, kleuren er als volgt uit:

De keuzeballken met de beschikbare achter- resp. voorgrondkleuren

Aanpassen THEME_preprocess_paragraph()

Attentie: als een door Drupal meegeleverd thema wordt gebruikt, zal de code in het bestand themanaam.theme worden overschreven bij een volgende update van het thema. Het is dan ook verstandig van het gebruikte thema eerst een subthema te maken en dat te installeren en als thema te gaan gebruiken. Een subthema wordt nooit automatisch overschreven! Hoe maak je een subthema? Zie:
www.drupal.org/docs/theming-drupal/creating-sub-themes.

In het .theme bestand van je thema moet de preprocess functie worden toegevoegd. Deze leest de inhoud van de kleurvelden field_bg_color resp. field_fg_color en zet deze om in class variabelen in de html code. De variabelen worden gevormd door achter ‘bg-’ resp. ‘fg-’ het geselecteerde kleurnummer in kleine letters te zetten. Tevens worden voor beide kleuren een extra class toegevoegd (fg-color resp. bg-color) om daarmee in de css voor alle kleuren geldende extra parameters in te stellen.

Zoals gebruikelijk moet THEME in de functienaam vervangen worden door de naam van het gebruikte thema. Mochten er meerdere thema’s worden gebruikt in de website die alle paragraphs gebruiken, dan moet onderstaande code in ieder gebruikt thema worden gezet.

De code luidt:

<?php
/**
 * @file
 * Add your custom theme override functions here.
 */
 
/**
 * Implements hook_preprocess_HOOK()
 */
function THEME_preprocess_paragraph(&$variables) {
  // Populate color classes, based on chosen color.
  $paragraph = $variables['paragraph'];
  if(!empty($paragraph->field_bg_color)) {
    $bg_color = strtolower($paragraph->field_bg_color->color);
    if (!empty($bg_color)) {
      $variables['attributes']['class'][] = 'bg-color';
      $variables['attributes']['class'][] = 'bg-' . strtolower(ltrim($bg_color, '#'));
    }
  }
  if(!empty($paragraph->field_fg_color)) {
    $fg_color = strtolower($paragraph->field_fg_color->color);
    if (!empty($fg_color)) {
      $variables['attributes']['class'][] = 'fg-color';
      $variables['attributes']['class'][] = 'fg-' . strtolower(ltrim($fg_color, '#'));
    }
  }
}

Kleuren

De gebruikte kleuren moeten in de voorgrond- en achtergrondkleur velden worden opgegeven. Alleen dan worden deze zichtbaar bij het aanmaken / wijzigen van de tekst zichtbaar. Er mogen verschillende reeksen worden gebruikt voor de voor- en achtergrondkleuren.
Nadat een tekst is aangemaakt en eventueel een voor- en/of achtergrondkleur is gekozen, dan wordt bij het opmaken van de html door de hierboven staande code het kleurnummer omgezet in een classnaam en in de html gezet.

De gebruikte kleuren moet ook in het .css bestand van het thema worden geplaatst. Daarmee kan de kleur ook worden weergegeven. Een voorbeeld van een deel van zo’n .css bestand staat hieronder. De kleuren zijn in bovenstaande code als .fg-kleurnummer resp. .bg-kleurnummer in kleine letters omgezet. Voorbeelden: .bg-2494db en .fg-ffffff. Het begint altijd met een punt (betekent dat het verwijst naar een class) en eindigt op ’ p’ dat verwijst naar de tekst van een tekstregel. Dit zou ook ‘p div’ kunnen zijn als er div’s worden gebruikt om tekstregels te scheiden en/of ’ h2’ voor kopregels 2.

Uiteraard kunnen zeer veel kleuren worden gedefinieerd in de kleurvelden en de .css. Maar slechts een beperkt aantal kleuren zal in het thema passen. Houdt het aantal kleuren overzichtelijk!

In onderstaande voorbeeld css wordt begonnen met het geven van ronde hoeken bij teksten met een achtergrondkleur ongeacht de gebruikte kleur.

Voorbeeld .css.:

.bg-color {    /* Maak ronde hoeken als een achtergrondkleur wordt opgegeven */
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}
/* Achtergrond kleuren */
.bg-333333 {    /* dark-grey */
  background-color: #333333;
}
.bg-2494db {    /* olivero blauw */
  background-color: #2494db;
}
.bg-f2f2f2 {    /*light-grey */
  background-color: #f2f2f2;
}
.bg-e8ad00 {    /* dark-yellow */
  background-color: #e8ad00;
}
.bg-5c2483 {    /* dark-purple */
  background-color: #5c2483;
}
.bg-ea560d {    /* dark-orange */
  background-color: #ea560d;
}
.bg-404d23 {    /* dark-green */
  background-color: #404d23;
}
.bg-96a499 {    /* light-green */
  background-color: #96a499;
}
/* Voorgrondkleuren */
.fg-333333 p {    /* dark-grey */
  color: #333333;
}
.fg-f2f2f2 p {    /* light-grey */
  color: #f2f2f2;
}
.fg-e8ad00 p {    /* dark-yellow */
  color: #e8ad00;
}
.fg-5c2483 p {    /* dark-purple */
  color: #5c2483;
}
.fg-ea560d p {    /* dark-orange */
  color: #ea560d;
}
.fg-404d23 p {    /* dark-green */
  color: #404d23;
}
.fg-96a499 p {    /* light-green */
  color: #96a499;
}
.fg-ffffff p,
.fg-ffffff h2 {    /* white */
  color: #ffffff;
}

Vragen? zie het contactformulier.