Varje färg i Smart Image kan antingen vara fast eller styras av ett Smart Message. En fast färg är densamma i alla inlägg. En dynamisk färg beräknas på nytt för varje inlägg, så att en politikartikel och en sportartikel kan få olika färger med en och samma mall.
1. Vilka fält som kan ha en dynamisk färg#
Det gäller sex fält: Overlay color (överlagringsfärg), Text color (textfärg), Text shadow color (färg på textskugga), Highlight (markering), Underline (understrykning) och Decoration (dekoration). Varje fält konfigureras separat, så du kan styra överlagringen med färgerna för dina sektioner och samtidigt behålla vit text.
Alternativet visas bara om ditt varumärke har minst en mall för Smart Message. Om du inte har någon förblir fältet en vanlig färgväljare.
2. Skriv ett Smart Message som returnerar en färg#
Öppna hamburgermenyn, gå till Brands, välj ditt varumärke, sedan avsnittet Smart message templates och skapa en mall. Variablerna du kan testa, till exempel de normaliserade kategorierna i organic.category, finns listade i Vilka Twig-variabler finns i Nonli?.
Regeln måste returnera en hexfärg och ingenting annat. Ingen omgivande text, ingen radbrytning och inget avslutande mellanslag. Använd formerna {%- ... -%} och {{- ... -}} så tar Twig bort blankstegen åt dig.
Här är en regel som ger varje sektion en egen färg:
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 -%}Kategorinamnen kommer från taxonomin på din egen webbplats, så använd de slugs som dina artiklar faktiskt har.
Avsluta alltid med en {%- else -%}-gren. En regel som inte returnerar något för en artikel utan kategori skulle lämna fältet tomt.
En namngivningskonvention hjälper: inled de här mallarna med [COLOR], till exempel [COLOR] Section color. Rullgardinsmenyn för färgregler listar alla Smart Messages för varumärket, så ett prefix gör det lätt att hitta färgmallarna.
3. Ställ om fältet till Dynamic#
Ett färgfält visas först som en vanlig färgruta, utan någon synlig lägesväxling.
Klicka på färgrutan för det fält du vill styra. Färgpanelen öppnas med två flikar, Static (statisk) och Dynamic (dynamisk). Klicka på Dynamic.
Panelen förblir öppen och visar direkt den regel som har valts åt dig, så att du kan ändra den på en gång.
4. Välj regeln och en reservfärg#
Color rule (färgregel) är det Smart Message som returnerar färgen. Fallback color (reservfärg) är den färg som Smart Image använder om regeln misslyckas, inte returnerar något eller returnerar något som inte är en giltig hexfärg.
Välj en reservfärg som fungerar bra på egen hand. Det är den färg som din publik ser när en artikel saknar kategori, så behandla den som ditt varumärkes neutrala färg och välj den inte i förbigående.
När allt är konfigurerat, visar raden i formuläret färgrutan, en {}-markör och regelns namn. Raden visar med en blick att fältet är dynamiskt och inte fast.
Om du vill gå tillbaka till en fast färg, öppna panelen igen och klicka på Static. Reservfärgen blir då den nya fasta färgen.
5. Fler exempel på regler#
En färg per socialt nätverk
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 -%}En starkare färg på länkinlägg
1{%- if post_type == 'link' -%}2{{- '#E50032' -}}3{%- else -%}4{{- '#111827' -}}5{%- endif -%}En accentfärg när rubriken signalerar att det är bråttom
1{%- if title matches '/(breaking|live|urgent)/i' -%}2{{- '#DC2626' -}}3{%- else -%}4{{- '#1F2937' -}}5{%- endif -%}Två färger som växlar beroende på dag
1{%- if 'now' | date('N') in ['6', '7'] -%}2{{- '#7C3AED' -}}3{%- else -%}4{{- '#111827' -}}5{%- endif -%}6. Goda råd#
Ha en regel per syfte. En enda mall som bestämmer överlagringen, texten och understrykningen på en gång går inte att återanvända, eftersom en färgregel returnerar exakt en färg.
Kontrollera kontrasten innan du tar konfigurationen i bruk. En dynamisk överlagring ändrar bakgrunden bakom texten, så en färg som fungerar bra mot vit text i en sektion gör det kanske inte i en annan. Förhandsvisa några artiklar från olika sektioner innan du sparar konfigurationen.
Återanvänd samma regel i flera fält när du vill att de ska ändras tillsammans. Om både markeringen och understrykningen pekar på samma Smart Message, håller de sig konsekventa utan att logiken behöver dupliceras.
7. Om färgen inte ändras#
Kontrollera att regeln returnerar ett rent hexvärde. Ett överblivet mellanslag eller en radbrytning är den vanligaste orsaken, och det är därför exemplen ovan använder Twig-taggarna som tar bort blanksteg.
Kontrollera att artikeln faktiskt innehåller de data som din regel läser. En regel som bygger på organic.category faller tillbaka på din reservfärg för ett inlägg som har skapats manuellt utan någon artikel bakom.
Om ditt Smart Message har tagits bort, visar fältet Rule to be chosen (regel ska väljas) och Smart Image använder reservfärgen. Öppna panelen och välj en befintlig regel.