Live Preview für indualCMS – Geräteansicht in Echtzeit

03.02.2025

Über dieses Projekt

Im Rahmen meines IPA-Projekts entwickelte ich eine Live-Preview-Funktion für das hauseigene CMS der indual GmbH. Ziel war es, eine Vorschauansicht zu realisieren, in der Inhalte ohne ständiges Aus- und Einloggen direkt sichtbar sind. Zusätzlich sollte die Darstellung für verschiedene Bildschirmgrössen (Desktop, Tablet, Mobile) testbar sein – inklusive Geräte-Rotation und Navigation innerhalb der Vorschau.

Ausgangslage und Ziel

Warum eine Live-Preview notwendig wurde

Vor Projektstart war es nur möglich, Inhalte über das CMS zu erfassen und separat in einem neuen Tab zu prüfen. Diese doppelte Arbeitsweise verlangsamte den Workflow und war fehleranfällig. Ziel meines Projekts war es, eine Live-Vorschau zu entwickeln, bei der Nutzer direkt sehen, wie ihre Änderungen auf verschiedenen Endgeräten wirken – ohne das CMS zu verlassen.

So funktioniert die Live-Preview

Breakpoints, iframe, Rotation und Vorschauparameter

Die Live-Vorschau wurde über ein eingebettetes iframe realisiert. Je nach gewähltem Gerätetyp wird das iframe in einer vordefinierten Grösse dargestellt – konfigurierbar über die config.php der jeweiligen Webseite. Zusätzlich wurde ein Rotate-Button entwickelt, der Höhe und Breite tauscht, um z. B. Mobilgeräte im Querformat zu simulieren. Der Parameter preview=1 sorgt dafür, dass CMS-Steuerelemente in der Vorschau nicht erscheinen.

Browser-Buttons mit Verlauf

Zurück, Vor, Home – auch in der Live-Ansicht

Um das Arbeiten in der Vorschau möglichst benutzerfreundlich zu gestalten, wurde eine Verlaufshistorie implementiert. Die Buttons „Zurück“, „Vor“ und „Home“ ermöglichen es, sich wie im Browser durch die zuletzt geladenen Seiten zu bewegen – inklusive Erhalt des Vorschau-Modus. Dies wurde durch eine eigene History-Logik mit preview-Parameter realisiert.

Zurück zur Bearbeitung – aber korrekt

Adminlink passt sich automatisch an

Ein weiteres zentrales Feature war die Aktualisierung des Adminlinks. Wenn man in der Live-Vorschau auf eine andere Seite wechselt, zeigt der „Zurück ins CMS“-Button immer auf die richtige Bearbeitungsansicht. Das wird durch eine AJAX-Funktion realisiert, die bei jedem Seitenwechsel die page_id aktualisiert und in den Bearbeitungslink integriert.

Konfigurierbar für jedes Kundenprojekt

Breakpoints direkt im Template definieren

Damit die Funktion flexibel einsetzbar ist, können die Breakpoints pro Kundenprojekt individuell in der jeweiligen config.php definiert werden. So bleibt die Vorschau realitätsnah und auf das Design der jeweiligen Webseite abgestimmt. Nicht gesetzte Werte greifen automatisch auf die Standarddefinition zurück.

Zitat zur Projektarbeit

Was mir das Projekt gebracht hat

Durch dieses Projekt habe ich gelernt, wie man komplexe CMS-Funktionen so entwickelt, dass sie sowohl technisch stabil als auch benutzerfreundlich sind. Die direkte Rückmeldung im Interface durch die Vorschau macht das Arbeiten im CMS für Redakteure deutlich effizienter.

Zurück zur Projektübersicht