Jede Farbe in Smart Image kann entweder fest sein oder von einer Smart Message gesteuert werden. Eine feste Farbe ist bei jedem Beitrag gleich. Eine dynamische Farbe wird für jeden Beitrag neu berechnet, sodass ein Politikartikel und ein Sportartikel aus einer einzigen Vorlage in unterschiedlichen Farben entstehen können.
1. Welche Felder eine dynamische Farbe akzeptieren#
Sechs Felder tun das: Overlay color, Text color, Text shadow color, Highlight, Underline und Decoration. Jedes wird unabhängig konfiguriert, sodass Sie das Overlay aus Ihren Rubrikfarben steuern und den Text weiß lassen können.
Die Option erscheint nur, wenn Ihre Marke mindestens eine Smart-Message-Vorlage hat. Haben Sie keine, bleibt das Feld eine einfache Farbauswahl.
2. Eine Smart Message schreiben, die eine Farbe zurückgibt#
Öffnen Sie das Burger-Menü, gehen Sie zu Brands, wählen Sie Ihre Marke und dann den Bereich Smart message templates und erstellen Sie eine Vorlage. Die Variablen, die Sie testen können, etwa die normalisierten Kategorien in organic.category, sind in Welche Twig-Variablen sind in Nonli verfügbar? aufgeführt.
Die Regel muss eine Hex-Farbe ausgeben und sonst nichts. Kein umgebender Text, kein Zeilenumbruch, kein Leerzeichen am Ende. Verwenden Sie die Formen {%- ... -%} und {{- ... -}}, damit Twig die Leerzeichen für Sie entfernt.
Hier ist eine Regel, die jeder Rubrik ihre eigene Farbe gibt:
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 -%}Die Kategorienamen stammen aus der Taxonomie Ihrer eigenen Website. Verwenden Sie daher die Slugs, die Ihre Artikel tatsächlich tragen.
Beenden Sie die Regel immer mit einem {%- else -%}-Zweig. Eine Regel, die für einen Artikel ohne Kategorie nichts zurückgibt, würde das Feld leer lassen.
Eine Namenskonvention hilft: Stellen Sie diesen Vorlagen [COLOR] voran, zum Beispiel [COLOR] Section color. Die Auswahlliste für die Farbregel enthält jede Smart Message der Marke, daher erkennen Sie die Farbregeln mit einem Präfix leichter.
3. Das Feld auf Dynamic umstellen#
Ein Farbfeld beginnt als einfaches Farbfeld ohne sichtbaren Moduswechsel.
Klicken Sie auf das Farbfeld des Felds, das Sie steuern möchten. Das Farb-Popover öffnet sich mit zwei Tabs, Static und Dynamic. Klicken Sie auf Dynamic.
Das Popover bleibt geöffnet und zeigt sofort die Regel an, die für Sie ausgewählt wurde, sodass Sie sie direkt korrigieren können.
4. Die Regel und eine Ersatzfarbe wählen#
Color rule ist die Smart Message, die die Farbe zurückgibt. Fallback color (Ersatzfarbe) verwendet Smart Image, wenn die Regel fehlschlägt, nichts zurückgibt oder etwas zurückgibt, das keine gültige Hex-Farbe ist.
Wählen Sie eine Ersatzfarbe, die für sich allein lesbar bleibt. Das sieht Ihre Zielgruppe, wenn ein Artikel keine Kategorie hat. Betrachten Sie sie daher als Ihre neutrale Markenfarbe und nicht als Nebensache.
Sobald das Feld konfiguriert ist, zeigt die Formularzeile das Farbfeld, eine {}-Markierung und den Namen der Regel an. Diese Zeile zeigt Ihnen auf einen Blick, dass das Feld dynamisch und nicht fest ist.
Um zu einer festen Farbe zurückzukehren, öffnen Sie das Popover erneut und klicken Sie auf Static. Die Ersatzfarbe wird zur neuen festen Farbe.
5. Weitere Regelbeispiele#
Eine Farbe pro soziales Netzwerk
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 -%}Eine kräftigere Farbe bei Link-Beiträgen
1{%- if post_type == 'link' -%}2{{- '#E50032' -}}3{%- else -%}4{{- '#111827' -}}5{%- endif -%}Eine Akzentfarbe, wenn der Titel Dringlichkeit signalisiert
1{%- if title matches '/(breaking|live|urgent)/i' -%}2{{- '#DC2626' -}}3{%- else -%}4{{- '#1F2937' -}}5{%- endif -%}Zwei Farben im Wechsel nach Tag
1{%- if 'now' | date('N') in ['6', '7'] -%}2{{- '#7C3AED' -}}3{%- else -%}4{{- '#111827' -}}5{%- endif -%}6. Bewährte Vorgehensweisen#
Halten Sie pro Zweck eine Regel. Eine einzelne Vorlage, die Overlay, Text und Unterstreichung gleichzeitig festlegt, lässt sich nicht wiederverwenden, denn eine Farbregel gibt genau eine Farbe zurück.
Prüfen Sie den Kontrast, bevor Sie live gehen. Ein dynamisches Overlay verändert den Hintergrund hinter Ihrem Text, sodass eine Farbe, die in einer Rubrik gut zu weißem Text passt, in einer anderen vielleicht nicht funktioniert. Sehen Sie sich vor dem Speichern der Konfiguration eine Vorschau einiger Artikel aus verschiedenen Rubriken an.
Verwenden Sie dieselbe Regel für mehrere Felder, wenn diese sich gemeinsam ändern sollen. Wenn Sie Highlight und Underline auf dieselbe Smart Message verweisen lassen, bleiben beide konsistent, ohne die Logik zu duplizieren.
7. Wenn sich die Farbe nicht ändert#
Prüfen Sie, dass die Regel einen reinen Hex-Wert zurückgibt. Ein überzähliges Leerzeichen oder ein Zeilenumbruch ist die häufigste Ursache, und deshalb verwenden die obigen Beispiele die Twig-Tags, die Leerraum entfernen.
Prüfen Sie, dass der Artikel die Daten, die Ihre Regel liest, tatsächlich enthält. Eine Regel auf Basis von organic.category greift bei einem manuell erstellten Beitrag ohne zugrunde liegenden Artikel auf Ihre Ersatzfarbe zurück.
Wurde die Smart Message gelöscht, zeigt das Feld Rule to be chosen an und Smart Image verwendet die Ersatzfarbe. Öffnen Sie das Popover und wählen Sie eine vorhandene Regel aus.