Cada color de Smart Image puede ser fijo o estar controlado por un Smart Message. Un color fijo es el mismo en todas las publicaciones. Un color dinámico se recalcula para cada publicación, de modo que un artículo de política y uno de deportes pueden salir en colores distintos a partir de una sola plantilla.
1. Qué campos admiten un color dinámico#
Lo admiten seis campos: Color de la superposición, Color del texto, Color de la sombra del texto, Resaltado, Subrayado y Decoración. Cada uno se configura de forma independiente, así que puedes controlar la superposición con los colores de tus secciones y mantener el texto en blanco.
La opción solo aparece si tu marca tiene al menos una plantilla de Smart Message. Si no tienes ninguna, el campo sigue siendo un selector de color normal.
2. Escribe un Smart Message que devuelva un color#
Abre el menú de hamburguesa, ve a Marcas, selecciona tu marca, luego la sección Plantillas de Smart Message y crea una plantilla. Las variables que puedes probar, como las categorías normalizadas de organic.category, figuran en ¿Qué variables Twig están disponibles en Nonli?.
La regla debe devolver un color hexadecimal y nada más. Sin texto alrededor, sin salto de línea, sin espacio al final. Usa las formas {%- ... -%} y {{- ... -}} para que Twig elimine los espacios en blanco por ti.
Esta es una regla que da a cada sección su propio color:
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 -%}Los nombres de las categorías proceden de la taxonomía de tu propio sitio, así que usa los slugs que llevan realmente tus artículos.
Termina siempre con una rama {%- else -%}. Una regla que no devuelve nada para un artículo sin categoría dejaría el campo vacío.
Una convención de nombres ayuda: añade el prefijo [COLOR] a estas plantillas, por ejemplo [COLOR] Section color. El desplegable de la regla de color muestra todos los Smart Message de la marca, así que un prefijo facilita localizar los de color.
3. Cambia el campo a Dinámico#
Un campo de color empieza como una muestra simple, sin ningún interruptor de modo visible.
Haz clic en la muestra de color del campo que quieras controlar. Se abre el panel de color con dos pestañas, Estático y Dinámico. Haz clic en Dinámico.
El panel sigue abierto y muestra enseguida la regla que se ha seleccionado por ti, para que puedas corregirla al momento.
4. Elige la regla y un color de respaldo#
Regla de color es el Smart Message que devuelve el color. Color de respaldo es el que usa Smart Image si la regla falla, no devuelve nada o devuelve algo que no es un color hexadecimal válido.
Elige un color de respaldo que se vea bien por sí solo. Es el que verá tu audiencia cuando un artículo no tenga categoría, así que trátalo como tu color neutro de marca y no como un añadido de última hora.
Una vez configurado, la fila del formulario muestra la muestra de color, un marcador {} y el nombre de la regla. Esa fila te indica de un vistazo que el campo es dinámico y no fijo.
Para volver a un color fijo, abre de nuevo el panel y haz clic en Estático. El color de respaldo pasa a ser el nuevo color fijo.
5. Más ejemplos de reglas#
Un color por red 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 -%}Un color más intenso en las publicaciones con enlace
1{%- if post_type == 'link' -%}2{{- '#E50032' -}}3{%- else -%}4{{- '#111827' -}}5{%- endif -%}Un color de acento cuando el título indica urgencia
1{%- if title matches '/(breaking|live|urgent)/i' -%}2{{- '#DC2626' -}}3{%- else -%}4{{- '#1F2937' -}}5{%- endif -%}Dos colores alternados según el día
1{%- if 'now' | date('N') in ['6', '7'] -%}2{{- '#7C3AED' -}}3{%- else -%}4{{- '#111827' -}}5{%- endif -%}6. Buenas prácticas#
Usa una regla por cada intención. Una sola plantilla que decida a la vez la superposición, el texto y el subrayado no se puede reutilizar, porque una regla de color devuelve exactamente un color.
Comprueba el contraste antes de publicar. Una superposición dinámica cambia el fondo que hay detrás del texto, así que un color que se lee bien con texto blanco en una sección puede no leerse bien en otra. Previsualiza algunos artículos de distintas secciones antes de guardar la configuración.
Reutiliza la misma regla en varios campos cuando quieras que cambien a la vez. Si el resaltado y el subrayado apuntan al mismo Smart Message, se mantienen coherentes sin duplicar la lógica.
7. Si el color no cambia#
Comprueba que la regla devuelve un valor hexadecimal limpio. Un espacio o un salto de línea sobrante es la causa más habitual, y por eso los ejemplos anteriores usan las etiquetas Twig que eliminan los espacios en blanco.
Comprueba que el artículo lleva realmente los datos que lee tu regla. Una regla basada en organic.category recurre a tu color de respaldo en una publicación creada manualmente, sin un artículo detrás.
Si se ha eliminado el Smart Message, el campo muestra Regla por elegir y Smart Image usa el color de respaldo. Abre el panel y selecciona una regla existente.