Hver farve i Smart Image kan enten være fast eller styret af en Smart Message. En fast farve er den samme på alle opslag. En dynamisk farve beregnes på ny for hvert opslag, så en artikel om politik og en artikel om sport kan få forskellige farver ud fra samme skabelon.
1. Hvilke felter der accepterer en dynamisk farve#
Det gør seks felter: Overlay color, Text color, Text shadow color, Highlight, Underline og Decoration. Hvert felt konfigureres for sig, så du kan styre overlayet ud fra dine sektionsfarver og samtidig beholde hvid tekst.
Muligheden vises kun hvis dit brand har mindst én Smart Message-skabelon. Hvis du ikke har nogen, forbliver feltet en almindelig farvevælger.
2. Skriv en Smart Message der returnerer en farve#
Åbn burgermenuen, gå til Brands, vælg dit brand, gå derefter til sektionen Smart message templates, og opret en skabelon. De variabler du kan teste, fx de normaliserede kategorier i organic.category, står i Hvilke Twig-variabler findes der i Nonli?.
Reglen må kun returnere en hexfarve og intet andet. Ingen omgivende tekst, intet linjeskift, intet afsluttende mellemrum. Brug formerne {%- ... -%} og {{- ... -}}, så Twig fjerner mellemrummene for dig.
Her er en regel der giver hver sektion sin egen farve:
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 -%}Kategorinavnene kommer fra dit eget websteds taksonomi, så brug de slugs dine artikler faktisk har.
Afslut altid med en {%- else -%}-gren. En regel der ikke returnerer noget for en artikel uden kategori, vil efterlade feltet tomt.
En navnekonvention hjælper: sæt præfikset [COLOR] foran disse skabeloner, fx [COLOR] Section color. Rullemenuen med farveregler viser alle brandets Smart Messages, så et præfiks gør farveskabelonerne lette at få øje på.
3. Skift feltet til Dynamic#
Et farvefelt starter som en almindelig farveprøve uden nogen synlig tilstandsvælger.
Klik på farveprøven i det felt du vil styre. Farvevinduet åbnes med to faner, Static og Dynamic. Klik på Dynamic.
Vinduet forbliver åbent og viser straks den regel der blev valgt for dig, så du kan rette den med det samme.
4. Vælg reglen og en reservefarve#
Color rule er den Smart Message der returnerer farven. Fallback color er den farve Smart Image bruger hvis reglen fejler, ikke returnerer noget eller returnerer noget der ikke er en gyldig hexfarve.
Vælg en reservefarve der også er læsbar i sig selv. Det er den farve dit publikum ser når en artikel ikke har nogen kategori, så behandl den som din neutrale brandfarve og ikke som en eftertanke.
Når feltet er konfigureret, viser formularrækken farveprøven, en {}-markør og regelnavnet. Den række viser dig med ét blik at feltet er dynamisk og ikke fast.
Hvis du vil tilbage til en fast farve, skal du åbne vinduet igen og klikke på Static. Reservefarven bliver den nye faste farve.
5. Flere eksempler på regler#
Én farve pr. socialt netværk
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 stærkere farve på linkopslag
1{%- if post_type == 'link' -%}2{{- '#E50032' -}}3{%- else -%}4{{- '#111827' -}}5{%- endif -%}En accentfarve når titlen signalerer at det haster
1{%- if title matches '/(breaking|live|urgent)/i' -%}2{{- '#DC2626' -}}3{%- else -%}4{{- '#1F2937' -}}5{%- endif -%}To farver der skifter efter dag
1{%- if 'now' | date('N') in ['6', '7'] -%}2{{- '#7C3AED' -}}3{%- else -%}4{{- '#111827' -}}5{%- endif -%}6. God praksis#
Hold dig til én regel pr. formål. En enkelt skabelon der bestemmer overlayet, teksten og understregningen på én gang, kan ikke genbruges fordi en farveregel returnerer præcis én farve.
Tjek kontrasten før du går live. Et dynamisk overlay ændrer baggrunden bag din tekst, så en farve der fungerer godt med hvid tekst i én sektion, fungerer måske ikke i en anden. Forhåndsvis nogle få artikler fra forskellige sektioner før du gemmer konfigurationen.
Genbrug den samme regel i flere felter når du vil have dem til at følges ad. Når både fremhævningen og understregningen peger på den samme Smart Message, holder du dem ensartede uden at duplikere logikken.
7. Hvis farven ikke ændrer sig#
Tjek at reglen returnerer en ren hexværdi. Et overflødigt mellemrum eller linjeskift er den mest almindelige årsag, og det er derfor eksemplerne ovenfor bruger Twig-tags der fjerner mellemrum.
Tjek at artiklen faktisk har de data din regel læser. En regel baseret på organic.category bruger din reservefarve på et opslag der er oprettet manuelt uden en artikel bag.
Hvis den pågældende Smart Message er slettet, viser feltet Rule to be chosen, og Smart Image bruger reservefarven. Åbn vinduet, og vælg en eksisterende regel.