VZC System v2.8 - Der Elefant im Raum

Manchmal merkt man erst, wie sehr einen ein Workflow bremst, wenn man anfängt, ihn zu reparieren.

In den letzten Wochen haben wir im Hintergrund von VZC System viele neue Konzepte getestet und Artikel getippt. Dabei fiel uns auf: Unser alter Editor im Admin-Panel war einfach nicht mehr zeitgemäß. Ein riesiges Textfeld reicht auf Dauer nicht aus, wenn man Artikel sauber strukturieren will.

Deshalb haben wir das komplette Publishing-Backend auf links gedreht. Aber bevor wir zu den Code-Änderungen kommen, müssen wir über eine Sache reden.

Der Elefant im Raum: Bilder in Artikeln?

Wer VZC System aufmerksam verfolgt, wird sich an unseren Beitrag vom 04. Februar erinnern: „Warum wir bewusst auf Bilder in News-Beiträgen verzichten.“

Und jetzt integrieren wir plötzlich ein Feature für dynamische Bild-Blöcke?

Das wirkt erstmal wie ein Widerspruch.

Das war intern keine leichte Entscheidung. Unser Ziel war und ist immer maximale Performance und null Ablenkung durch sinnlose Stock-Fotos. Aber die Realität beim Schreiben hat uns eingeholt: Manchmal lässt sich eine neue Benutzeroberfläche, ein komplexer Code-Ausschnitt oder ein Netzwerk-Setup (z. B. wenn wir über die Konfiguration unserer NAS-Server sprechen) tausendmal besser mit einem echten Screenshot erklären als mit drei Absätzen Text.

Daher unser Kompromiss für die Zukunft: Wir werden nicht anfangen, sinnlose Platzhalter-Bilder zu spammen. Wir bleiben textfokussiert. Aber wenn ein Bild einen echten, greifbaren Mehrwert für das Verständnis liefert, haben wir jetzt die technische Infrastruktur, um es sauber einzubinden.

Der neue VZC Story Builder

Wir haben das alte, starre Textfeld im Backend beerdigt und einen modularen Block-Editor auf Basis von Quill entwickelt. Artikel werden jetzt wie Legosteine aufgebaut: Textblock, Bildblock, Textblock.

Hier könnt ihr euch ein Bild von unserem neuen Editor machen - exklusiv aus dem Backend:

Das bringt einige krasse technische Vorteile mit sich:

• Image Auto-Optimization: Wenn wir ein Bild hochladen, greift noch vor dem Speichern unser PHP-Skript ein. Das Bild wird serverseitig direkt auf effiziente 1920px skaliert und die Qualität auf 90 % optimiert. Performance bleibt also unangetastet.
• Das Ende des n12br()-Chaos: Früher hat uns PHP bei jedem "Enter" im Textfeld künstliche
  Tags reingedrückt, was im Frontend zu riesigen, unschönen Lücken zwischen den Absätzen führte. Der neue Editor liefert direkt sauberes HTML mit durchdachten

  und

  Tags.

Live-Vorschau und Entwürfe

Wir posten oft spät nachts oder bereiten Themen vor. Das alte System kannte nur "Speichern und sofort Live". Das haben wir geändert.

• Der Device Simulator: Wir haben ein echtes iFrame direkt ins Backend integriert. Noch bevor ein Artikel gespeichert wird, können wir auf Knopfdruck testen, wie das exakte CSS-Rendering auf dem Desktop oder simuliert auf einem 375px breiten Smartphone-Screen (hallo iOS Safari) aussieht.
• Sichere Entwürfe: Unfertige Artikel landen jetzt völlig isoliert in einem eigenen Ordner auf unserem Server. Wenn wir auf "Publish" drücken, fragt das System nach dem genauen Veröffentlichungsdatum. So lassen sich Beiträge bequem vordatieren.

Kleine Korrektur, große Wirkung: Die Leseleiste

Ein Frontend-Detail, das uns schon länger gestört hat, war die blaue Progress-Bar am oberen Bildschirmrand. Bisher war diese Anzeige ziemlich "dumm" – sie hat einfach die gesamte Seitenhöhe berechnet, dadurch lief der Balken auch dann noch weiter, wenn man schon bei den Quellen oder den Artikel-Empfehlungen angekommen war.

Wir haben das JavaScript umgeschrieben. Die Leiste scannt jetzt per "getBoundingClientRect() exakt nur noch den