PEIQ Knowledge Base
Online-Vorschau in CREATE
- Alexander Steichele
- Melanie Lutz
- Verena Reichert
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
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
Das folgende Video gibt einen Überblick über die 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. Der Auto-Aktualisierungstoggle der Online-Vorschau kann kundenindividuell standardmäßig de-/aktiviert werden.
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
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 Online-Vorschau in CREATE | Testing im lokalen Browser (ohne CREATE)
Für alle CREATE-Kund:innen stellt PEIQ einen SFTP-Server zur Verfügung, auf dem die Webserver-Struktur 1:1 abgebildet ist. In den beiden Verzeichnissen …/tpl und …/data können die Kund:innen ihre geänderten Files ablegen, 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, kann das gesamte Projekt create_onlinepreview inkl. Templates und CSS-Dateien gerne auf Wunsch per separater 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 Handlebars bzw. Introduction | Handlebars.
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)
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:
.css|.js|.json|.handlebars|.woff|.woff2|.jpg|.jpeg|.png|.svg|.gifSFTP-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, 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.
Falls Quell- oder Zielordner nicht da sind, tut das Script auch nichts.
Produktivnahme
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
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.
Verwandte Seiten
Nur für PEIQ-Mitarbeiter:
https://peiq.atlassian.net/wiki/spaces/CORE/pages/1107623978