Online-Vorschau in CREATE

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

1 Allgemeine Beschreibung
2 Funktionen der Online-Vorschau
- 2.1 Auto-Aktualisierung
- 2.2 Neu laden
- 2.3 Größere Vorschau anzeigen
- 2.4 Vorschau für Online-Kanäle umschalten
3 Parametrisierung durch Kund:innen
- 3.1 Webserver
  - 3.1.1 Testing im lokalen Browser (ohne CREATE)
  - 3.1.2 Zentrale Konfigurationsdateien
  - 3.1.3 Standard-Elemente (Blöcke)
  - 3.1.4 CSS-Files
  - 3.1.5 Kund:innenspezifische Schriften (fonts)
- 3.2 Hochladen der Änderungen nach CREATE (Testsystem)
  - 3.2.1 SFTP-Server
- 3.3 Produktivnahme
4 Parametrisierung durch PEIQ
5 Verwandte Seiten

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:

Standard-Vorschau für den Online-Kanal in einer Online-Ausprägung

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

Das folgende Video gibt einen Überblick über die Funktionen der Online-Vorschau:

https://youtu.be/5QKBDQDnecw

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. Der Auto-Aktualisierungstoggle der Online-Vorschau kann kundenindividuell standardmäßig de-/aktiviert werden.

Auto-Aktualisierung der Online-Vorschau

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

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

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 Online-Vorschau in CREATE | Testing im lokalen Browser (ohne CREATE)

Webserver

Testing im lokalen Browser (ohne CREATE)

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/

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

…\create_onlinepreview\tpl\Online\loadTemplateComponents.js

…\create_onlinepreview\tpl\Online\component.js

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

…\create_onlinepreview\tpl\Online\subArticleElem.handlebars

…\create_onlinepreview\tpl\Online\embedElem.handlebars

…\create_onlinepreview\tpl\Online\imageElem.handlebars

…\create_onlinepreview\tpl\Online\galleryElem.handlebars

…\create_onlinepreview\tpl\Online\textElem.handlebars

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)

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:

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

SFTP-Server

Das Quell-Verzeichnis auf dem sftp-Server (TEST /create_preview), in das Kund:innen ihre Files ablegen müssen, ist unter folgendem Pfad erreichbar:

Alle erlaubten Datei-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.

Produktivnahme

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

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