Ein Embed-Modul für die Greina-Stiftung
Wie eine interaktive Auswertung in eine Website kommt — ohne Umweg über den Techniker

Wer eine fertige HTML-Datei in seine Website stellen will – eine Auswertung, eine interaktive Karte, ein Diagramm –, scheitert in fast jedem CMS an zwei Stellen: Der Editor entfernt den nötigen Code wieder, und der Dateiordner liefert HTML nicht als Seite aus, sondern als Download. Die saubere Lösung ist ein eigenes Feld, das die Datei entgegennimmt und in einem abgesicherten Rahmen anzeigt. Für die Greina-Stiftung haben wir genau das gebaut: rund 600 Zeilen Code, verteilt auf fünf Dateien, ohne ein einziges externes Framework.
Warum lässt sich eine HTML-Datei nicht einfach einbinden?
Weil beide naheliegenden Wege versperrt sind, und zwar mit Absicht.
Hochladen genügt nicht. Backdrop CMS liefert alles aus dem Dateiordner bewusst nicht als Webseite aus, sondern als Download. Das ist eine Schutzmassnahme: Wer eine Datei hochladen darf, soll nicht nebenbei ausführbare Seiten in ein fremdes System stellen können. Die Datei ist also auf dem Server, sie funktioniert – und trotzdem sieht sie niemand.
Den Code in den Editor kopieren geht auch nicht. Der Textfilter lässt<iframe> nicht durch, ebenfalls aus gutem Grund: Ein solcher Rahmen kann beliebige fremde Inhalte nachladen. Wer ihn für alle Redaktorinnen und Redaktoren freigibt, öffnet ein Tor, das sich schlecht wieder schliessen lässt.
Die übliche Notlösung heisst dann: Der Techniker legt die Datei von Hand auf den Server. Das funktioniert – einmal. Beim nächsten Datenstand beginnt dasselbe von vorn, und zwischen der neuen Auswertung und ihrer Veröffentlichung steht wieder jemand, der Zeit haben muss. Das ist der eigentliche Grund für das Modul: Nicht die Technik war das Problem, sondern die Abhängigkeit.

Nicht die Technik war das Problem, sondern die Abhängigkeit.
Wie funktioniert das Modul?
Die Redaktion sieht davon fast nichts, und das ist die Absicht.
Beim Bearbeiten einer Seite gibt es einen zusätzlichen Baustein namens HTML Embed. Dort wird die Datei ausgewählt, wie man ein Bild auswählt, dazu ein optionaler Titel, die Breite und der Abstand – dieselben Einstellungen wie bei jedem anderen Baustein. Ein Embed fügt sich damit ins Layout ein, statt als Fremdkörper aufzufallen.
Im Hintergrund passiert dreierlei: Die Datei landet in einem eigenen Unterordner, der sie tatsächlich als Seite ausliefert. Sie wird in einen abgesicherten Rahmen gestellt. Und dieser Rahmen misst laufend, wie hoch sein Inhalt ist, und wächst mit.

Zu gross, zu klein oder mitwachsend — nur eines davon fällt nicht auf.
Der letzte Punkt klingt nebensächlich und ist es nicht. Die übliche Lösung ist eine fest eingetragene Höhe, und die ist immer falsch: entweder bleibt unten ein leerer Streifen, oder es erscheint mitten in der Seite eine zweite Bildlaufleiste. Ein Rahmen, der seine Höhe selbst kennt, fällt gar nicht auf – und das ist das Ziel.
Was passiert auf dem Handy?
Datenvisualisierungen entstehen am grossen Bildschirm, viele auf eine feste Breite gebaut, 1100 Pixel etwa, weil die Achsenbeschriftung sonst nicht aufgeht. Auf einem Telefon mit 390 Pixeln ist der rechte Teil weg. Man könnte jede Datei einzeln umbauen – oder die Darstellung massstabsgetreu verkleinern, wie man einen Plan auf ein kleineres Blatt kopiert. Genau das tut das Modul, und lässt die Wahl:
| Modus | was passiert | Wofür |
|---|---|---|
| Auto-Scale | wird proportional verkleinert, bis es passt | fest gelayoutete Grafiken |
| Responsive | der Inhalt passt sich selbst an | Embeds, die schon für kleine Bildschirme gebaut sind |
| Fix | feste Grösse, keine Anpassung | Sonderfälle |

Verkleinern statt abschneiden — und eine Grenze, ab der Schieben ehrlicher ist.
Dazu eine Untergrenze: Verkleinert wird höchstens auf 40 Prozent. Darunter wird eine Grafik unlesbar, und dann ist seitliches Schieben ehrlicher als eine Darstellung, die zwar vollständig ist, aber niemand entziffern kann.
Ist ein iframe nicht ein Sicherheitsrisiko?
Er kann einer sein. Deshalb ist er hier eingezäunt.
Der Rahmen läuft in einer Sandbox – einer Umgebung, in der nur ausdrücklich Erlaubtes möglich ist. Der Rahmen ist auf das Nötigste beschränkt: Skripte, Formulare, Links — mehr nicht. Dazu kommt die Trennung der Ordner: Nur im Embed-Ordner wird HTML als Seite ausgeliefert, überall sonst bleibt die Schutzmassnahme unangetastet. Das ist der Unterschied zwischen einer Tür und einem Loch in der Wand – beide lassen etwas durch, aber nur eine lässt sich kontrollieren.

Beide lassen etwas durch — aber nur eine Tür lässt sich kontrollieren.
Warum ein eigenes Modul statt eines fertigen?
Weil es keines gab — keinen Baustein für den schlichten Fall «diese Datei, in dieser Seite, in dieser Breite».
Dazu kam ein zweiter Grund, der uns wichtiger war: Wir wollten die Einstellungen selbst bestimmen – welche Skalierungsmodi es gibt, wo die Untergrenze liegt, was die Sandbox erlaubt. Bei einem fremden Modul erbt man die Entscheidungen anderer bei jeder Aktualisierung neu. Bei sechshundert eigenen Zeilen weiss man, was drinsteht.
Gebaut haben wir es mit KI-Unterstützung. Das hat den Weg vom Gedanken zum lauffähigen Modul stark verkürzt. Was es können soll, haben wir trotzdem selbst entschieden: welche Modi es gibt, wo die Untergrenze liegt, was erlaubt ist und was nicht. Dort liegt die Arbeit, die niemand abnimmt.
Lässt sich das übertragen?
Ja. Im selben Projekt funktioniert derselbe Mechanismus nicht nur als Baustein, sondern auch als Darstellungsform für ein gewöhnliches Datei-Feld – wer bereits ein Upload-Feld hat, stellt dessen Anzeige um, ohne neue Struktur.
In anderen Systemen ist das Prinzip dasselbe, weil das Problem dasselbe ist: ein Feld für die Datei, ein Ordner mit den richtigen Regeln, ein abgesicherter Rahmen, der seine Höhe selbst kennt. Was sich unterscheidet, ist der Dialekt, nicht der Gedanke.
Häufige Fragen
Was ist ein iframe?
Warum nicht einfach ein Bild von der Grafik?
Kann die Redaktion eine Datei selbst austauschen?
Sie haben HTML-Dateien die Sie auf Ihrer Website einbinden wollen?
Auswertungen, Karten oder Grafiken, die auf Ihrer Website besser aufgehoben wären als im Mailanhang? Zeigen Sie mir eine davon — dann sehen wir, was daraus wird.
Beispiel besprechen →