Hver farge i Smart Image kan enten være fast eller styres av en Smart Message. En fast farge er den samme på alle innlegg. En dynamisk farge beregnes på nytt for hvert innlegg, så en politikkartikkel og en sportsartikkel kan få ulike farger fra én enkelt mal.
1. Hvilke felt godtar en dynamisk farge#
Seks felt gjør det: Overlay color, Text color, Text shadow color, Highlight, Underline og Decoration. Hvert felt konfigureres uavhengig, så du kan styre overlegget fra seksjonsfargene dine og samtidig beholde hvit tekst.
Alternativet vises bare hvis merkevaren din har minst én Smart Message-mal. Hvis du ikke har noen, forblir feltet en vanlig fargevelger.
2. Skriv en Smart Message som returnerer en farge#
Åpne hamburgermenyen, gå til Brands, velg merkevaren din, deretter delen Smart message templates, og opprett en mal. Variablene du kan teste, for eksempel de normaliserte kategoriene i organic.category, er oppført i Hvilke Twig-variabler er tilgjengelige i Nonli?
Regelen må gi en heksadesimal farge og ingenting annet. Ingen omkringliggende tekst, ingen linjeskift, ingen mellomrom på slutten. Bruk formene {%- ... -%} og {{- ... -}} slik at Twig fjerner mellomrommene for deg.
Her er en regel som gir hver seksjon sin egen farge:
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 din egen nettstedstaksonomi, så bruk sluggene artiklene dine faktisk har.
Avslutt alltid med en {%- else -%}-gren. En regel som ikke returnerer noe for en artikkel uten kategori, ville latt feltet stå tomt.
En navnekonvensjon hjelper: sett prefikset [COLOR] foran disse malene, for eksempel [COLOR] Section color. Nedtrekkslisten for fargeregelen viser alle Smart Message-meldinger i merkevaren, så et prefiks gjør fargemalene lette å se.
3. Bytt feltet til Dynamic#
Et fargefelt starter som en vanlig fargeprøve, uten synlig modusbryter.
Klikk på fargeprøven til feltet du vil styre. Fargevinduet åpnes med to faner, Static og Dynamic. Klikk på Dynamic.
Vinduet forblir åpent og viser umiddelbart regelen som ble valgt for deg, slik at du kan rette den med en gang.
4. Velg regelen og en reservefarge#
Color rule er Smart Message-meldingen som returnerer fargen. Fallback color er det Smart Image bruker hvis regelen mislykkes, ikke returnerer noe eller returnerer noe som ikke er en gyldig heksadesimal farge.
Velg en reservefarge som er lesbar alene. Det er den publikummet ditt ser når en artikkel ikke har noen kategori, så behandle den som den nøytrale merkefargen din, ikke som en ettertanke.
Når feltet er konfigurert, viser skjemaraden fargeprøven, en {}-markør og regelnavnet. Den raden er signalet som med et blikk viser at feltet er dynamisk og ikke fast.
For å gå tilbake til en fast farge åpner du vinduet igjen og klikker på Static. Reservefargen blir den nye faste fargen.
5. Flere regeleksempler#
Én farge per sosialt nettverk
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 sterkere farge på lenkeinnlegg
1{%- if post_type == 'link' -%}2{{- '#E50032' -}}3{%- else -%}4{{- '#111827' -}}5{%- endif -%}En aksentfarge når tittelen signaliserer hast
1{%- if title matches '/(breaking|live|urgent)/i' -%}2{{- '#DC2626' -}}3{%- else -%}4{{- '#1F2937' -}}5{%- endif -%}To farger som skifter etter dag
1{%- if 'now' | date('N') in ['6', '7'] -%}2{{- '#7C3AED' -}}3{%- else -%}4{{- '#111827' -}}5{%- endif -%}6. Beste praksis#
Hold deg til én regel per hensikt. En enkelt mal som bestemmer overlegget, teksten og understrekingen på én gang, kan ikke gjenbrukes, fordi en fargeregel returnerer nøyaktig én farge.
Kontroller kontrasten før du tar det i bruk. Et dynamisk overlegg endrer bakgrunnen bak teksten din, så en farge som fungerer godt mot hvit tekst i én seksjon, gjør kanskje ikke det i en annen. Forhåndsvis noen artikler fra ulike seksjoner før du lagrer konfigurasjonen.
Gjenbruk samme regel i flere felt når du vil at de skal flytte seg sammen. Hvis du peker både Highlight og Underline mot samme Smart Message, holdes de konsistente uten at logikken dupliseres.
7. Hvis fargen ikke endres#
Kontroller at regelen returnerer en ren heksadesimal verdi. Et tilfeldig mellomrom eller linjeskift er den vanligste årsaken, og det er grunnen til at eksemplene over bruker Twig-kodene som fjerner mellomrom.
Kontroller at artikkelen faktisk har dataene regelen din leser. En regel basert på organic.category faller tilbake til reservefargen på et innlegg som er opprettet manuelt uten en artikkel bak.
Hvis Smart Message-meldingen ble slettet, viser feltet Rule to be chosen, og Smart Image bruker reservefargen. Åpne vinduet og velg en eksisterende regel.