Page Comparison

Info

In PEIQ CREATE steht eine Online-Vorschau zur Verfügung. Diese ermöglicht eine Vorschau auf einen für einen Online-Kanal vorgesehenen Artikel, welcher zu einem späteren Zeitpunkt aus CREATE heraus veröffentlicht wird.

Die Gestaltung der Vorschau in Anlehnung an das Online-Portal übernimmt der Kunde bzw. die Kundin eigenverantwortlich mittels ihm/ihr zur Verfügung gestellter HTML-Templates und CSS (= Cascading Style Sheets).

Funktionalitäten der Online-Vorschau in PEIQ CREATE

Online-Vorschau der für Online-Kanäle vorgesehenen Artikelinhalte in CREATE
Kund:innenspezifische Gestaltung der Vorschau durch HTML-Templates und CSS-Stylesheets
Vergrößerung, Auto-Aktualisierung oder Neuladen der Online-Vorschau pro Online-Kanal

Inhaltsverzeichnis

Expand

title	Inhaltsverzeichnis anzeigen

Table of Contents

maxLevel	4

Allgemeine Beschreibung

Um sich den Artikelinhalt in CREATE analog zur Gestaltung in einem typischen Online-Template vorab anzeigen zu lassen, können Benutzer:innen in CREATE bei allen Online-Templates ganz schnell und einfach eine Online-Vorschau in der Kanalsteuerung erzeugen. Für die Anzeige werden HTML-Templates und CSS-Stylesheets verwendet, die durch die Kund:innen selbst individuell angepasst werden können. Dazu werden die Templates und Stylesheets für die Kund:innen zugänglich gemacht.

Seitens PEIQ ist hierfür auf Anfrage ein kund:innenindividueller SFTP-Zugang einzurichten.

Der Aufruf für die Online-Vorschau ist in der vertikalen Werkzeugleiste des Editors integriert:

In der Online-Vorschau können abhängig vom Ausprägungs-Typ (z.B. Eilmeldung, Story usw.) beliebig viele Online-Vorschau-Templates hinterlegt werden, welche unabhängig von den Kanälen (Onlineportalen) sind.

Funktionen der Online-Vorschau

Auto-Aktualisierung

Damit sich die Online-Vorschau bei Änderungen im Editor automatisch aktualisiert, kann ein entsprechender Toggle aktiviert werden. Standardmäßig ist dieser, wie rechts dargestellt, deaktiviert.

Neu laden

Über den Reload- bzw. Aktualisieren-Button kann die Online-Vorschau neu- bzw. nachgeladen werden - sofern dies nicht auf “Auto-Aktualisierung” eingestellt ist.

Größere Vorschau anzeigen

Über den Button “Größere Vorschau anzeigen” (Vergrößerungsicon) kann die Vorschau im Dialog in voller Seitenbreite und somit in einer vergrößerten Ansicht geöffnet werden.

Vorschau für Online-Kanäle umschalten

Das Dropdown zur Auswahl mehrerer Previews erscheint nur, wenn per Customizing durch PEIQ mehrere Vorschau-Varianten eingerichtet sind.

Sofern eine Artikel-Ausprägung mehrere Online-Kanäle besitzt, können bei der Online-Vorschau sowohl in der Kanalsteuerung, als auch in der Zoom-Ansicht verschiedene Vorschau-Varianten per Dropdown ausgewählt und die Preview entsprechend für das jeweilige Portal angezeigt werden.

Parametrisierung durch Kund:innen

Note
Wichtig: Die nachfolgend beschriebenen Änderungen sollten von einem/einer Webentwickler:in oder einem/einer Systembetreuer:in mit fundierten HTML-Kenntnissen durchgeführt werden.

Die Basis für kund:innenspezifische Anpassungen der Online-Vorschau durch den Kunden bzw. die Kundin ist der CREATE-Standard-Kanal “Online”.

Die relevanten Files, die kund:innenspezifisch parametrisiert werden müssen, befinden sich in den Verzeichnissen …/tpl und …/data auf dem Webserver.

tpl: Dieses Verzeichnis enthält alle Komponenten zur Darstellung der Vorschau-Varianten
data: In diesem Verzeichnis liegen die Standard-Article.json, die für das lokale Testing angepasst und im Browser auch ohne den Einsatz von CREATE aufgerufen werden können, siehe unten https://peiq.atlassian.net/wiki/spaces/PPSD/pages/1130168321/Online-Vorschau+in+CREATE#Testing-im-lokalen-Browser-(ohne-CREATE)

Für alle CREATE-Kund:innen , die eine Online-Vorschau nutzen, legt die Technik stellt PEIQ einen SFTP-Server zur Verfügung, auf dem die Struktur der Vorschau-Verzeichnisse am Webserver Webserver-Struktur 1:1 abgebildet ist. In den beiden Verzeichnissen …/tpl und …/data können die Kund:innen ihre geänderten Files ablegen. Per Cronjob werden geänderte Files , welche von dort alle 2 Minuten auf den PEIQ-Webserver kopiert werden.

Webserver

Testing im lokalen Browser (ohne CREATE)

Kund:innen, die eine kanalspezifische Vorschau in CREATE einrichten möchten, wird das gesamte Projekt create_onlinepreview inkl. Templates und CSS-Dateien auf Nachfrage per Auslieferung zur Verfügung gestellt.

Um ein neues kund:innenspezifisches Template anzulegen, sollte ein vorhandenes Template (zu finden im \create_onlinepreivew\tpl) kopiert und anschließend lokal angepasst werden.

Für ein Vorab-Testing der kund:innenspezifischen Anpassungen kann ein entsprechend parametrisierter Artikel auch ohne CREATE-Anbindung lokal im Browser aufgerufen werden. Dazu muss der gesamte Ordner create_onlinepreview auf einem Kund:innen-Webserver abgelegt werden und dort die Anpassungen vorgenommen werden. Die Vorschau kann anschließend im Browser unter folgender URL aufgerufen werden:

https://[KUND:INNEN-DOMAIN]/create_onlinepreview/

Für die CREATE Online-Vorschau wird die Template Engine Handlebars verwendet.

Die Dokumentation sowie weiterführende Informationen dazu finden sich unter https://handlebarsjs.com/ bzw. https://handlebarsjs.com/guide/.

Unter der URL https://[KUND:INNEN-DOMAIN]/create_onlinepreview/ wird das Standard-Online-Template von CREATE mit einem Standard-Artikel aufgerufen.

Das article.json liegt im Ordner \create_onlinepreivew\data ab und kann kund:innenspezifisch angepasst werden.

Soll eine andere Template-Variante verwendet werden, kann diese in der URL mit dem Zusatz /?v=[VARIANTENNAME] aufgerufen werden. Zum Beispiel:

→ https://[KUND:INNEN-DOMAIN]/create_onlinepreview/?v=Serienfuchs

Wenn ein anderer Artikel (JSON) in der Preview im Browser angezeigt werden soll, kann dieser mit dem Zusatz /a=[ARTIKELNAME] aufgerufen werden. Zum Beispiel:

→ https://[KUND:INNEN-DOMAIN]/create_onlinepreview/?a=article_gal

Auch eine Kombination ist möglich. Zum Beispiel:

→ https://[KUND:INNEN-DOMAIN]/create_onlinepreview/?v=Serienfuchs&a=article_gal

Zentrale Konfigurationsdateien

…\create_onlinepreview\tpl\Online\main.handlebars

Der Einstiegspunkt, sprich das Seitengerüst der Vorschau, bildet das main.handlebars. Dort können kund:innenspezifische javaScripte und CSS-Files angegeben werden.

Im Standard "Online" ist das Standard preview.css sowie die component.js hinterlegt.

…\create_onlinepreview\tpl\Online\loadTemplateComponents.js

Im loadTemplateComponents.js werden zusätzliche handlebar-Definitionen (handlebar-Helpers) sowie Dateien für Unter-Elemente (handlebar-Partials) eingetragen.

…\create_onlinepreview\tpl\Online\component.js

Das component.js steuert, wie sich bestimmte Elemente an der Oberfläche, d. h. in der Vorschau, verhalten.

Standard-Elemente (Blöcke)

Die im Online-Template verwendeten Partials, die im loadTemplateComponents.js definiert sind, werden nachfolgend aufgelistet und erläutert:

…\create_onlinepreview\tpl\Online\contentElement.handlebars

Das contentElem.handlebars steuert die Reihenfolge der Blöcke/Elemente in der Vorschau.

…\create_onlinepreview\tpl\Online\subArticleElem.handlebars

Hierbei handelt es sich um einen Block für verlinkte Artikel.

…\create_onlinepreview\tpl\Online\embedElem.handlebars

Hierbei handelt es sich um einen Block für Embeds.

…\create_onlinepreview\tpl\Online\imageElem.handlebars

Hierbei handelt es sich um einen Block für Bilder.

…\create_onlinepreview\tpl\Online\galleryElem.handlebars

Hierbei handelt es sich um einen Block für Bilderlisten.

…\create_onlinepreview\tpl\Online\textElem.handlebars

Hierbei handelt es sich um einen Block für Textinhalte in Textblöcken (Titel, Untertitel, Absatz, Autor:in, Ort etc.).

CSS-Files

Für jede Vorschau-Variante können eigene CSS-File angelegt und in das entsprechende Verzeichnis auf dem Webserver gelegt werden.

CSS-Files müssen immer in der main.handlebars eingetragen werden.

Kund:innenspezifische Schriften (fonts)

Sollen für die Vorschau eigene Schriften (fonts) verwendet werden, muss im CSS-File angegeben werden, woher diese geladen werden sollen.

Hochladen der Änderungen nach CREATE (Testsystem)

Note

Beim Kopieren der von dem Kunden bzw. der Kundin lokal bearbeiteten Verzeichnisse/Dateien auf den SFTP-Server ist unbedingt darauf zu achten, dass der Timestamp des Kopieren-Vorgangs gespeichert wird und nicht der Timestamp der lokalen Änderung behalten wird. Andernfalls wird das Verzeichnis/die Datei nicht auf den Webserver kopiert.

ACHTUNG: Dateien, die auf dem SFTP-Server gelöscht wurden, werden ebenfalls auf dem CREATE Webserver gelöscht.

Damit die durch den Kunden bzw. die Kundin vorgenommenen Änderungen am Vorschau-Template nach CREATE gelangen, müssen neue/geänderte Ordner bzw. Dateien kund:innenseitig auf dem SFTP-Server in ein entsprechendes Verzeichnis gelegt werden. Von dort werden diese alle 2 Minuten auf den Webserver des CREATE-Testsystems kopiert.

Das Skript kopiert nur neuere oder bis dato nicht vorhandene Dateien auf den Webserver. Standardmäßig werden nur Dateien mit folgenden Dateiendungen kopiert:

Code Block
.css\|.js\|.json\|.handlebars\|.woff\|.woff2\|.jpg\|.jpeg\|.png\|.svg\|.gif

SFTP-Server

Für die Zugangsdaten ist das PEIQ Support Team zu kontaktieren.

Das Quell-Verzeichnis auf dem sftp-Server (TEST /create_preview), in das Kund:innen ihre Files ablegen müssen, damit diese in das Zielverzeichnis auf den Webserver des Testsystems kopiert werden, ist unter folgendem Pfad erreichbar:

Für die Zugangsdaten ist das PEIQ Support Team zu kontaktieren.

Alle erlaubten DateienDatei-Typen, die dort abgelegt werden, werden alle 2 Minuten auf den CREATE Test-Webserver kopiert und sind im Anschluss in der Online-Vorschau des CREATE-Testsystems verfügbar.

Dateien und Ordner, die im Quellverzeichnis nicht mehr vorhanden sind, werden gelöscht.

Note
Falls Quell- oder Zielordner nicht da sind, tut das Script auch nichts.

Produktivnahme

Note
Die Produktivnahme der von Kund:innen angepassten Vorschau-Templates erfolgt durch PEIQ. Die Kontaktierung von PEIQ durch die Kund:innen muss eine Vorlaufzeit von 1 Woche haben, sofern die Änderungen produktiv gehen sollen.

Der Go-live der Änderungen in das Produktivsystem erfolgt anschließend im regulären Deployment-Prozess am nächsten Release-Tag.

Damit die von den Kund:innen angepassten Templates in das Produktivsystem übernommen werden, ist der PEIQ Service Desk mit einer entsprechenden Vorlaufzeit (spätestens 1 Woche vor Release in das Produktionssystem) zu informieren.

Parametrisierung durch PEIQ

Note
Nach dem Anlegen und Kopieren der Verzeichnisse, in denen die kund:innenspezifischen Onlinepreview-Varianten liegen, ist PEIQ zu kontaktieren, damit die Abbildung Create_OnlinePreviewVarianten angepasst werden kann.

Damit die o.g. kund:innenspezifische Onlinepreview-Varianten in CREATE aufgerufen werden können, ist durch PEIQ die Abbildung Create_OnlinePreviewVarianten anzupassen.

Versions Compared

Old Version 31

New Version Current

Key