Dynamische Layouts in Chili

plusW GmbH, Lisa Klimovitskaya

Ohne komplizierte Actions, ohne komplexe Logik, grenzenlos flexibel und super einfach: das ist ein bahnbrechendes neues Konzept in Chili Publisher Online namens
Dynamische Layouts. Dieses neues Konzept ermöglicht es, Templates responsive zu machen, so dass die Vorlage sich flexibel an jedes Format anpasst und keine Programmierung von Actions mehr nötig ist: ob Fullsize-Banner, Bestenliste, Button oder Wolkenkratzer - einfach nur ein Mausklick und die Seitengröße ist geändert. Der Inhalt wird automatisch entsprechend skaliert und neu positioniert. Das wird dadurch möglich, da dynamische Templates eine relative Positionierung und variable Größenangaben verwenden, die durch Funktionen und Berechnungen und nicht durch absolute Zahlenwerte definiert werden.

Ein Beispiel mit einem Web-Banner.

In diesem Beispiel erstellen wir ein dynamisches Web-Banner in verschiedenen Formaten:

Odoo - Sample 1 for three columns
Odoo - Sample 2 for three columns
Odoo - Sample 3 for three columns

Alle Abstände und Dimensionen im Dokument werden ganz im Gegensatz zu den klassischen statischen Templates ohne Actions, sondern mit Formeln berechnet. 

Unter Environment > View Preferences sollten zuerst die Maßeinheiten des Dokuments in Pixel umgestellt werden.

Jetzt können wir mit dem Template beginnen. 

Odoo image and text block

Das Dokument wird eine dynamische Breite und Höhe haben.
Dazu erstellen wir 2 Variablen und weisen diesen Variablen
die Breite und die Höhe des Dokuments zu.

In diesem Beispiel sind das Nummer-Variablen addwidth und addheight.

Odoo image and text block

Im Tab Document unter Document Settings können die Variablen als die Breite und die Höhe des Dokuments eingefügt werden.
Klicken Sie einfach auf den Button Function neben dem Eingabefeld, um eine statische Breite des Frames in einen dynamischen Funktion-basierenden Wert umzuwandeln: das zusätzliche Feld für Variablen, Formeln und Funktionen wird eingeblendet. Tragen Sie in dieses Formelfeld einfach die Variablennamen für die Breite addwidth und für die Höhe addheight ein. 

Odoo image and text block

Variablenwerte ändern.

Im Tab Variables > Variable Input können jetzt die Werte definiert werden und die Dokumentgröße wird sich automatisch ändern: Die Variablenwerte werden in Pixel dem Dokument zugewiesen. 

Odoo image and text block

Imageframe.

Das Imageframe soll die gleiche Breite und Höhe haben wie das Dokument - dazu können die neue Funktionen page.width und page.height verwendet werden.

Im Tab Frame > Frame Location tragen Sie in das Formelfeld für die Breite einfach page.width und für die Höhe page.height ein.

Width: page.width
Height: page.height
X: 0 px
Y: 0 px
Tag: image

Im Tab Image können Image Settings für das Bild konfiguriert werden.
Fit: proportional outside: das Bild ist proportional dem Frame angepasst.

Odoo image and text block

Textframe.

Auf diese Weise können auch andere Frames hinzugefügt und mit den Funktionen erweitert werden.

Für die Textframes sollte zusätzlich eine Checkbox Apply Copy Fitting aktiviert werden (unter Variable Data > Variable Tools). Mit Copy Fitting wird das Textframe einfach proportional zur Seitengröße skaliert.

In den Funktionen können Sie absolute Zahlen verwenden oder auf andere Elemente verweisen.
Soll zum Beispiel das Logoframe 24px Abstand links von dem Rand der Seite haben, tragen Sie ein das Feld ein:  page.links+24px
Eine andere Variante, die auch Seitenbreite berücksichtigt: 
page.left+page.width*0.03 ( 3% der Seitenbreite als Abstand von Links).


Odoo image and text block

Die X-Position des Textframes kann auch mit dem gleichen Abstand wie das Logoframe definiert werden:

page.left+page.width*0.03

Die Breite für das Textframe abzüglich des Abstands rechts und links:

page.width-page.width*0.03*2

Und die Höhe des Frames sollte 20% der Seitenhöhe sein: page.height/5
Dem Textframe weisen wir das Tag text zu.

Das Frametag text wird verwendet um den Y-Koordinatenwert des zweiten Textframes zu beschreiben:

text.bottom+page.height*0.05


Folgende Funktionen sind für die Seiten, Frames und Textabsätze möglich:
+ addieren, - subtrahieren, * multiplizieren, / dividieren.
Klammern ( ) beeinflussen die Reihenfolge der Berechnung.
page.width
<frametag>.height, <frametag> muss durch den konkreten Name ersetzt werden. 
<frametag>.<paragraphtag>.centerX
X, Y, top, bottom, left, right, centerX, centerY, width, height, self

self.height bezieht sich auf die eigene Höhe des Frames. 

Um das Frame unten auszurichten, können Sie die Y-Position auf die Seitenhöhe minus die eigene Höhe des Frames einstellen.
Reference Point sollte oben mittig sein.

page.height - self.height


Eine detaillierte Beschreibung dieser Funktionen finden Sie im Handbuch in dem Abschnitt Dynamische Layouts - Funktionen und Attribute

Call-to-Action Button.

In diesem Frame platzieren wir den Call-to-Action-Button.

Y-Position mit dem Abstand: page.height - self.height-page.height*0.05*2
X-Position relativ zum Frame mit dem Tag imageimage.centerX
Odoo text and image block

DataSource.

Im Tab Variables > DataSource Settings kann die Vorlage mit dem DataSource verknüpft werden: eine einfache Excel Tabelle mit den Variablen addwidth und addheight und den Variablenwerten. Zusätzlich kann noch eine Variable Banner für die Bannerformen hinzugefügt werden.

Die häufigsten Standard-Bannerformate sind der große Wolkenkratzer 160x600px
das Leaderbord 728×90pxeine halbe Seite 300×600pxdas mittlere Rechteck 300×250px und das große Rechteck 336×280px. Diese Formate sind die Top-Performer laut Statistik.

Ausgabeformate.

Möglich sind jpg, png oder html.

Odoo text and image block
Odoo CMS - a big picture