Cada cor do Smart Image pode ser fixa ou controlada por um Smart Message. Uma cor fixa é a mesma em todas as publicações. Uma cor dinâmica é recalculada para cada publicação, pelo que um artigo de política e um artigo de desporto podem sair com cores diferentes a partir de um único modelo.
1. Que campos aceitam uma cor dinâmica#
São seis: Overlay color (cor da sobreposição), Text color (cor do texto), Text shadow color (cor da sombra do texto), Highlight (realce), Underline (sublinhado) e Decoration (decoração). Cada um é configurado de forma independente, pelo que pode controlar a sobreposição com as cores das suas secções e manter o texto branco.
A opção só aparece se a sua marca tiver pelo menos um modelo de Smart Message. Se não tiver nenhum, o campo continua a ser um simples seletor de cor.
2. Escrever um Smart Message que devolva uma cor#
Abra o menu hambúrguer, aceda a Brands (Marcas), selecione a sua marca, depois a secção Smart message templates (Modelos de Smart Message) e crie um modelo. As variáveis que pode testar, como as categorias normalizadas em organic.category, estão listadas em Que variáveis Twig estão disponíveis na Nonli?.
A regra tem de produzir uma cor hexadecimal e nada mais. Sem texto à volta, sem quebra de linha, sem espaço no fim. Use as formas {%- ... -%} e {{- ... -}} para que o Twig remova os espaços em branco por si.
Eis uma regra que dá a cada secção a sua própria cor:
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 -%}Os nomes das categorias vêm da taxonomia do seu próprio site, por isso use os slugs que os seus artigos efetivamente têm.
Termine sempre com um ramo {%- else -%}. Uma regra que não devolva nada para um artigo sem categoria deixaria o campo vazio.
Uma convenção de nomes ajuda: coloque o prefixo [COLOR] nestes modelos, por exemplo [COLOR] Section color. O menu pendente da regra de cor lista todos os Smart Messages da marca, pelo que um prefixo torna os de cor fáceis de identificar.
3. Mudar o campo para Dynamic#
Um campo de cor começa como uma simples amostra de cor, sem nenhum seletor de modo visível.
Clique na amostra de cor do campo que pretende controlar. A janela de cor abre-se com dois separadores, Static (Estático) e Dynamic (Dinâmico). Clique em Dynamic.
A janela continua aberta e mostra de imediato a regra que foi selecionada por si, para que a possa corrigir logo.
4. Escolher a regra e uma cor de recurso#
Color rule (Regra de cor) é o Smart Message que devolve a cor. Fallback color (Cor de recurso) é a que o Smart Image usa se a regra falhar, não devolver nada ou devolver algo que não seja uma cor hexadecimal válida.
Escolha uma cor de recurso que seja legível por si só. É o que a sua audiência vê quando um artigo não tem categoria, por isso trate-a como a cor neutra da sua marca e não como um pormenor secundário.
Depois de configurado o campo, a linha do formulário mostra a amostra de cor, um marcador {} e o nome da regra. Essa linha é o sinal, à primeira vista, de que o campo é dinâmico e não fixo.
Para voltar a uma cor fixa, abra novamente a janela e clique em Static. A cor de recurso passa a ser a nova cor fixa.
5. Mais exemplos de regras#
Uma cor por rede social
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 -%}Uma cor mais forte nas publicações de link
1{%- if post_type == 'link' -%}2{{- '#E50032' -}}3{%- else -%}4{{- '#111827' -}}5{%- endif -%}Uma cor de destaque quando o título indica urgência
1{%- if title matches '/(breaking|live|urgent)/i' -%}2{{- '#DC2626' -}}3{%- else -%}4{{- '#1F2937' -}}5{%- endif -%}Duas cores alternadas consoante o dia
1{%- if 'now' | date('N') in ['6', '7'] -%}2{{- '#7C3AED' -}}3{%- else -%}4{{- '#111827' -}}5{%- endif -%}6. Boas práticas#
Mantenha uma regra por intenção. Um único modelo que decida ao mesmo tempo a sobreposição, o texto e o sublinhado não pode ser reutilizado, porque uma regra de cor devolve exatamente uma cor.
Verifique o contraste antes de pôr em produção. Uma sobreposição dinâmica altera o fundo por trás do seu texto, pelo que uma cor que se lê bem com texto branco numa secção pode não se ler noutra. Pré-visualize alguns artigos de secções diferentes antes de guardar a configuração.
Reutilize a mesma regra em vários campos quando quiser que mudem em conjunto. Apontar o realce e o sublinhado para o mesmo Smart Message mantém-nos coerentes sem duplicar a lógica.
7. Se a cor não mudar#
Verifique se a regra devolve um valor hexadecimal simples. Um espaço ou uma quebra de linha a mais é a causa mais frequente, e é por isso que os exemplos acima usam as tags Twig que removem os espaços em branco.
Verifique se o artigo contém de facto os dados que a sua regra lê. Uma regra baseada em organic.category recorre à sua cor de recurso numa publicação criada manualmente sem nenhum artigo por trás.
Se o Smart Message tiver sido eliminado, o campo apresenta Rule to be chosen (Regra por escolher) e o Smart Image usa a cor de recurso. Abra a janela e selecione uma regra existente.