Chaque couleur de Smart Image peut être fixe ou pilotée par un Smart Message. Une couleur fixe est la même sur tous les posts. Une couleur dynamique est recalculée à chaque post : un article de politique et un article de sport sortent alors dans des couleurs différentes, à partir d'un seul template.
1. Quels champs acceptent une couleur dynamique#
Six champs : Couleur de l'overlay, Couleur du texte, Couleur de l'ombre, Surlignage, Soulignement et Décoration. Chacun se configure séparément, ce qui permet par exemple de piloter l'overlay par vos couleurs de rubrique tout en gardant le texte en blanc.
L'option n'apparaît que si votre marque possède au moins un template de Smart Message. Sans template, le champ reste un simple sélecteur de couleur.
2. Écrire un Smart Message qui renvoie une couleur#
Ouvrez le menu burger, allez dans Marques, choisissez votre marque, puis la section Templates de message intelligent et créez un template.
La règle doit produire une couleur hexadécimale et rien d'autre : pas de texte autour, pas de retour à la ligne, pas d'espace en trop. Utilisez les formes {%- ... -%} et {{- ... -}} pour que Twig supprime les espaces à votre place.
Voici une règle qui donne à chaque rubrique sa propre couleur :
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 -%}Les noms de rubriques viennent de votre propre arborescence, utilisez donc les identifiants que portent réellement vos articles.
Terminez toujours par une branche {%- else -%}. Une règle qui ne renvoie rien sur un article sans rubrique laisserait le champ vide.
Une convention de nommage aide : préfixez ces templates par [COLOR], par exemple [COLOR] Catégorie. La liste déroulante des règles affiche tous les Smart Messages de la marque, un préfixe rend donc les règles de couleur immédiatement repérables.
3. Basculer le champ en dynamique#
Un champ couleur se présente d'abord comme une simple pastille, sans sélecteur de mode visible.
Cliquez sur la pastille du champ que vous voulez piloter. Le popover s'ouvre avec deux onglets, Fixe et Dynamique. Cliquez sur Dynamique.
Le popover reste ouvert et affiche aussitôt la règle qui a été sélectionnée pour vous, ce qui permet de la corriger immédiatement.
4. Choisir la règle et une couleur de secours#
La règle de couleur est le Smart Message qui renvoie la couleur. La couleur de secours est celle que Smart Image utilise si la règle échoue, ne renvoie rien, ou renvoie autre chose qu'une couleur hexadécimale valide.
Choisissez une couleur de secours qui tienne debout seule. C'est elle que votre audience verra sur un article sans rubrique, traitez-la donc comme votre couleur de marque neutre plutôt que comme un détail.
Une fois configurée, la ligne du formulaire affiche la pastille, un marqueur {} et le nom de la règle. Cette ligne est votre repère : elle indique d'un coup d'œil que le champ est dynamique et non fixe.
Pour revenir à une couleur fixe, rouvrez le popover et cliquez sur Fixe. La couleur de secours devient alors la nouvelle couleur fixe.
5. D'autres exemples de règles#
Une couleur par réseau 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 -%}Une couleur plus soutenue sur les posts de type lien
1{%- if post_type == 'link' -%}2{{- '#E50032' -}}3{%- else -%}4{{- '#111827' -}}5{%- endif -%}Une couleur d'accentuation quand le titre signale l'urgence
1{%- if title matches '/(alerte|direct|urgent)/i' -%}2{{- '#DC2626' -}}3{%- else -%}4{{- '#1F2937' -}}5{%- endif -%}Deux couleurs alternées selon le jour
1{%- if 'now' | date('N') in ['6', '7'] -%}2{{- '#7C3AED' -}}3{%- else -%}4{{- '#111827' -}}5{%- endif -%}6. Bonnes pratiques#
Gardez une règle par intention. Un template unique qui déciderait à la fois de l'overlay, du texte et du soulignement n'est pas réutilisable, puisqu'une règle de couleur renvoie exactement une couleur.
Vérifiez les contrastes avant de publier. Un overlay dynamique change le fond derrière votre texte : une couleur qui passe bien sous du texte blanc dans une rubrique peut ne plus passer dans une autre. Prévisualisez quelques articles de rubriques différentes avant d'enregistrer la configuration.
Réutilisez la même règle sur plusieurs champs quand vous voulez qu'ils bougent ensemble. Pointer le surlignage et le soulignement vers le même Smart Message les garde cohérents sans dupliquer la logique.
7. Si la couleur ne change pas#
Vérifiez que la règle renvoie une valeur hexadécimale nue. Un espace ou un retour à la ligne parasite est la cause la plus fréquente, et c'est la raison des balises Twig sans espaces utilisées dans les exemples ci-dessus.
Vérifiez que l'article porte bien la donnée que lit votre règle. Une règle basée sur organic.category retombe sur la couleur de secours pour un post créé manuellement, sans article derrière.
Si le Smart Message a été supprimé, le champ affiche Règle à choisir et Smart Image utilise la couleur de secours. Rouvrez le popover et sélectionnez une règle existante.