Elke kleur in Smart Image kan vast zijn of worden aangestuurd door een Smart Message. Een vaste kleur is bij elk bericht hetzelfde. Een dynamische kleur wordt voor elk bericht opnieuw berekend, zodat een artikel over politiek en een artikel over sport vanuit één sjabloon verschillende kleuren kunnen krijgen.
1. Welke velden een dynamische kleur accepteren#
Zes velden: Overlay color (overlaykleur), Text color (tekstkleur), Text shadow color (kleur van de tekstschaduw), Highlight (markering), Underline (onderstreping) en Decoration (decoratie). Elk veld wordt afzonderlijk geconfigureerd, zodat u de overlay kunt aansturen met de kleuren van uw rubrieken terwijl de tekst wit blijft.
De optie verschijnt alleen als uw merk ten minste één Smart Message-sjabloon heeft. Als u er geen heeft, blijft het veld een gewone kleurkiezer.
2. Schrijf een Smart Message die een kleur teruggeeft#
Open het hamburgermenu, ga naar Brands (merken), selecteer uw merk, open dan de sectie Smart message templates en maak een sjabloon aan. De variabelen die u kunt testen, zoals de genormaliseerde categorieën in organic.category, staan vermeld in Welke Twig-variabelen zijn beschikbaar in Nonli?.
De regel moet een hexadecimale kleurcode teruggeven en niets anders. Geen omringende tekst, geen regeleinde, geen spatie aan het einde. Gebruik de vormen {%- ... -%} en {{- ... -}}, zodat Twig de witruimte voor u verwijdert.
Hier is een regel die elke rubriek een eigen kleur geeft:
1{%- set categories = organic.category ?? [] -%}2{%- if 'politique' in categories -%}3{{- '#E50032' -}}4{%- elseif 'international' in categories -%}5{{- '#2377FA' -}}6{%- elseif 'rugby' in categories -%}7{{- '#16A34A' -}}8{%- elseif 'hippisme' in categories -%}9{{- '#9333EA' -}}10{%- elseif 'sports' in categories -%}11{{- '#F97316' -}}12{%- else -%}13{{- '#6F819D' -}}14{%- endif -%}De categorienamen komen uit de taxonomie van uw eigen site, dus gebruik de slugs die uw artikelen daadwerkelijk hebben.
Sluit altijd af met een tak {%- else -%}. Een regel die niets teruggeeft voor een artikel zonder categorie, zou het veld leeg laten.
Een naamgevingsconventie helpt: zet het voorvoegsel [COLOR] voor deze sjablonen, bijvoorbeeld [COLOR] Section color. Het vervolgkeuzemenu voor de kleurregel toont elke Smart Message van het merk, dus met een voorvoegsel zijn de kleursjablonen gemakkelijk te herkennen.
3. Zet het veld op Dynamic#
Een kleurveld begint als een gewoon kleurvlak, zonder zichtbare modusschakelaar.
Klik op het kleurvlak van het veld dat u wilt aansturen. Het kleurvenster opent met twee tabbladen, Static (statisch) en Dynamic (dynamisch). Klik op Dynamic.
Het venster blijft open en toont direct de regel die voor u is geselecteerd, zodat u die meteen kunt aanpassen.
4. Kies de regel en een terugvalkleur#
Color rule (kleurregel) is de Smart Message die de kleur teruggeeft. Fallback color (terugvalkleur) is wat Smart Image gebruikt als de regel mislukt, niets teruggeeft of iets teruggeeft dat geen geldige hexadecimale kleurcode is.
Kies een terugvalkleur die op zichzelf goed leesbaar blijft. Dit is wat uw publiek ziet wanneer een artikel geen categorie heeft, dus beschouw deze als de neutrale kleur van uw merk en niet als een bijzaak.
Na de configuratie toont de rij in het formulier het kleurvlak, een markering {} en de naam van de regel. Aan die rij ziet u in één oogopslag dat het veld dynamisch is en niet vast.
Om terug te gaan naar een vaste kleur, opent u het venster opnieuw en klikt u op Static. De terugvalkleur wordt dan de nieuwe vaste kleur.
5. Meer voorbeelden van regels#
Eén kleur per sociaal netwerk
1{%- if social_network == 'facebook' -%}2{{- '#1877F2' -}}3{%- elseif social_network == 'linkedin' -%}4{{- '#0A66C2' -}}5{%- elseif social_network == 'instagram' -%}6{{- '#C13584' -}}7{%- else -%}8{{- '#111827' -}}9{%- endif -%}Een sterkere kleur bij linkberichten
1{%- if post_type == 'link' -%}2{{- '#E50032' -}}3{%- else -%}4{{- '#111827' -}}5{%- endif -%}Een accentkleur wanneer de titel urgentie aangeeft
1{%- if title matches '/(breaking|live|urgent)/i' -%}2{{- '#DC2626' -}}3{%- else -%}4{{- '#1F2937' -}}5{%- endif -%}Twee kleuren die per dag afwisselen
1{%- if 'now' | date('N') in ['6', '7'] -%}2{{- '#7C3AED' -}}3{%- else -%}4{{- '#111827' -}}5{%- endif -%}6. Goede praktijken#
Houd één regel per doel aan. Een enkel sjabloon dat tegelijk de overlay, de tekst en de onderstreping bepaalt, kan niet worden hergebruikt, omdat een kleurregel precies één kleur teruggeeft.
Controleer het contrast voordat u live gaat. Een dynamische overlay verandert de achtergrond achter uw tekst, dus een kleur die in de ene rubriek goed leesbaar is met witte tekst, is dat in een andere rubriek misschien niet. Bekijk een voorbeeld van enkele artikelen uit verschillende rubrieken voordat u de configuratie opslaat.
Gebruik dezelfde regel voor meerdere velden wanneer u wilt dat ze samen veranderen. Door zowel de markering als de onderstreping naar dezelfde Smart Message te laten verwijzen, blijven ze consistent zonder dat u de logica dupliceert.
7. Als de kleur niet verandert#
Controleer of de regel een kale hexadecimale waarde teruggeeft. Een losse spatie of een regeleinde is de meest voorkomende oorzaak, en daarom gebruiken de bovenstaande voorbeelden de Twig-tags die witruimte verwijderen.
Controleer of het artikel daadwerkelijk de gegevens bevat die uw regel leest. Een regel op basis van organic.category valt terug op uw terugvalkleur bij een bericht dat handmatig is aangemaakt zonder onderliggend artikel.
Als de Smart Message is verwijderd, toont het veld Rule to be chosen (te kiezen regel) en gebruikt Smart Image de terugvalkleur. Open het venster en selecteer een bestaande regel.