NanoBanana Editor bringt KI-Bildbearbeitung und Generierung mit Zeichen-Canvas und einheitlichem Undo/Redo direkt in Drupals Media-Bibliothek.
Ein Bild in der Media-Bibliothek passt fast: grauer Himmel, ein Auto im Bildrand, falscher Ausschnitt für den neuen Teaser. Der übliche Weg kostet Zeit: Datei herunterladen, externes Bildbearbeitungsprogramm öffnen oder auf eine Designerin warten, das Ergebnis als neues Medienelement hochladen, jede Referenz neu verknüpfen und am Ende feststellen, dass die alte Bildvariante noch im Cache hängt. Die Alternative ist nicht besser: einen KI-Bilddienst in einem weiteren Tab öffnen und Unternehmensbilder in ein ungesteuertes Drittanbieterkonto hochladen. Beide Wege verlassen das CMS, und in dem Moment greifen Rechteverwaltung, Versionierung, Bildvarianten und Alt-Texte der Media-Bibliothek nicht mehr.
NanoBanana Editor setzt genau hier an: KI-Bildbearbeitung nicht als externes Ziel, sondern als Knopf im Formular, das die Redakteurin ohnehin schon offen hat.
Bild bearbeiten: Ein Button "Edit with NanoBanana" wird direkt in Drupals Standardformular zur Medienbearbeitung eingehängt. Er öffnet eine vollständig mit Drupals Form API gebaute Bearbeitungsfläche: das aktuelle Bild mit einem Zeichen-Canvas darüber, ein Prompt-Feld und eine Seitenleiste für Modell, Referenzbilder, Seitenverhältnis, Auflösung und Stil. Beim Speichern bleibt die Medien-Entität dieselbe ID, dieselbe Datei-URI wird überschrieben, alle Bildvarianten werden geleert und der Änderungszeitstempel aktualisiert. Jede Node, jeder Paragraph und jede Referenz, die bereits auf das Bild zeigt, zeigt weiterhin darauf. Es ist eine echte Bearbeitung, kein Reupload im Bearbeitungs-Gewand.
Bild generieren: Ein zweiter Button erzeugt neue Medien direkt im Hinzufügen-Formular. Je nachdem, ob nur ein Prompt, ein Bild oder mehrere Bilder mitgegeben werden, wählt das Modul automatisch den passenden Modus (Text-zu-Bild, Bild-zu-Bild oder Mehrbild-Komposition) aus, ohne dass Redakteur:innen diese Unterscheidung selbst treffen müssen.
Auf dem Bild zeichnen: Sprache allein ist ein schwacher Zeiger. "Entferne das Element links" ist mehrdeutig, ein roter Kreis um das Element ist es nicht. Ein transparenter Canvas liegt über der Vorschau, mit zwölf kontraststarken Farben, Pinselgröße 1 bis 50 Pixel, Rückgängig und Wiederherstellen. Vom User markierte Bereiche werden zusammen mit dem Textprompt an das Modell übergeben und geben ihm einen räumlichen Anker.
Mehrbild-Komposition: Gemini 2.5 Flash verarbeitet bis zu drei Bilder, Gemini 3 Pro bis zu vierzehn, bei Auflösungen bis 4K. In der Praxis genutzt für Stilübertragung, das Platzieren eines Produkts in einer neuen Szene, das Zusammensetzen einer Person aus einer Aufnahme mit einer Umgebung aus einer anderen, oder das Konsistenthalten einer Markenfigur über eine ganze Kampagne hinweg.
Systemanweisungen und wiederverwendbare Stile: Markenfarben, Tonalität und feste Regeln wie "kein Text im Bild, außer explizit angefordert" werden jedem Prompt vorangestellt. Acht fertige Stile (Fotorealistisch, Aquarell, Ölgemälde, Digital Art, Bleistiftskizze, Anime, Comic, Minimalistisch) sind über das Backend verwaltbar und beliebig erweiterbar. Das verlagert Prompt-Qualität von einer Fähigkeit der einzelnen Redakteurin zu einer einmal gesetzten Konfiguration der ganzen Website.
Einheitliches Undo/Redo: Zwei unterschiedliche Historien, Zeichenstriche (clientseitig, vektorbasiert) und KI-Generierungen (serverseitig, binär), laufen hinter einem einzigen Rückgängig/Wiederherstellen-Button zusammen: erst werden Zeichenstriche zurückgenommen, danach Generierungsschritte.
Barrierefreiheit: Die Farbauswahl trägt vollständige ARIA-Menü-Semantik, alle zwölf Farben sind per Pfeiltasten, Pos1/Ende und Escape erreichbar und werden beim Fokus mit ihrem Namen angesagt, nicht als Hex-Wert. Rückgängig/Wiederherstellen nutzen echte disabled-Attribute, damit Verfügbarkeit auch für assistive Technologien erkennbar ist, nicht nur optisch abgeblendet.
Eingesetzte Technologien: Drupal 10.3+/11, Drupal AI-Modul, Google-Gemini-Modelle (2.5 Flash, 3 Pro), PHP mit vollständiger Dependency Injection über ContainerInjectionInterface, signature_pad (MIT-Lizenz) als einzige Frontend-Fremdabhängigkeit, kein Build-Step.
Ziel war, die Lücke zwischen Content-Erstellung und Bildbearbeitung zu schließen, ohne dass Redakteur:innen Drupal verlassen müssen, externe Werkzeuge lernen oder auf Designkapazität warten.
Ergebnisse:
Zwei eigenständige, aktiv gepflegte Drupal.org-Module veröffentlicht: NanoBanana Editor und das zugehörige KI-Provider-Modul ai_provider_nanobanana, jedes unabhängig vom anderen nutzbar.
Eine neue Operation, MultiImageToImageInput, in Drupals AI-Modul-Framework beigetragen, weil dessen Bild-zu-Bild-Abstraktion bisher nur ein Bild rein/raus vorsah. Jeder andere KI-Provider kann diese Erweiterung ab sofort mitnutzen.
Teil der Keynote "Autonomous Drupal: The fire is in our hands" von Frederik Wouters bei den Drupal Developer Days Athens 2026.
Durchgehend grüne CI über phpcs (Drupal-Regelwerk), PHPStan, ESLint, Stylelint und CSpell, PHPStan-Baseline bei 0 Byte, also keine unterdrückten Befunde.
Zwei vollständige Redaktionsformulare (Bearbeiten und Generieren) komplett auf Drupals eigener Form API und AJAX gebaut, ohne eigenen API-Endpunkt und ohne Build-Step.
Vollständiges Tastatur- und ARIA-Bedienkonzept für die selbst gebaute Farbauswahl und Canvas-Toolbar.
Minimaler eigener Fußabdruck: rund 23 KB eigenes JavaScript und 7,5 KB eigenes CSS, bei nur einer einzigen Frontend-Fremdabhängigkeit (signature_pad, 12,7 KB).
Volle Auflösung beim Kompositing: Ein Export der sichtbaren Canvas-Fläche hätte nur die Bildschirmauflösung des Browsers geliefert, oft 800 Pixel bei einer 4000-Pixel-Bildquelle. Stattdessen baut jeder abgeschlossene Zeichenstrich eine Offscreen-Canvas in der tatsächlichen Originalauflösung auf, zeichnet das Bild in voller Größe und skaliert nur die Anmerkungsebene passend darüber. Das Modell erhält immer die volle Auflösung des Originals.
Zeichnungen überleben eine Fenstergrößenänderung: Ein Canvas-Element, das seine Größe ändert, wird dabei geleert. Die Größenänderung wird deshalb um 150 Millisekunden verzögert, die vektorbasierten Strichdaten werden ausgelesen, mit den neuen Skalierungsfaktoren neu berechnet und als Vektoren neu gezeichnet, nicht als gestrecktes Rasterbild.
Kein Binärdaten-Ballast im Formularzustand: Jedes generierte Bild landet unter einer eigenen UUID im PrivateTempStore, nur das Token durchläuft den Formularzustand und übersteht so AJAX-Neuaufbauten. Verworfene Zweige werden sofort gelöscht, der komplette Verlauf beim Speichern bereinigt, statt mehrere Megabyte an PNGs bis zum Sitzungsende vorzuhalten.
Datei-Uploads gegen Formular-Caching: Hochgeladene Dateien überleben eine Formularzustands-Serialisierung nicht ohne Weiteres, und Mehrdatei-AJAX-Formulare scheitern dabei auf schwer nachvollziehbare Art. Caching wird für dieses Formular gezielt deaktiviert und die Dateien werden direkt aus der PHP-Anfrage gelesen, für unterschiedliche Browser- und PHP-Kombinationen.
Kein eigener AJAX-Endpunkt: Rückgängig/Wiederherstellen für KI-Generierungen läuft serverseitig, wird aber von einer JavaScript-Toolbar ausgelöst. Statt dafür eine eigene Route mit eigener Zugriffs- und CSRF-Prüfung zu bauen, nutzt das Modul echte, nur optisch versteckte Drupal-Submit-Buttons. Der gesamte Ablauf läuft damit über Drupals eigene AJAX-, Validierungs-, CSRF- und Zugriffsmechanik.
Der konkreteste Beitrag dieses Projekts: Als ACOLONO KI-gestützte Bildbearbeitung für Drupal bauen wollte, existierte für Googles Gemini-Bildmodelle noch kein Provider für Drupals AI-Modul. Statt eine private Lösung zu bauen, hat ACOLONO diesen Provider als eigenständiges Modul veröffentlicht: ai_provider_nanobanana, mit eigenem Versionszyklus und eigenen Nutzer:innen, nutzbar von jeder Website, die Gemini-Bildgenerierung in Drupal möchte, unabhängig von NanoBanana Editor.
Darüber hinaus hat ACOLONO die Abstraktionsschicht von Drupals AI-Modul selbst erweitert: Die bisherige Bild-zu-Bild-Operation sah strikt ein Bild rein und ein Bild raus vor, passend für die meisten Provider, aber unbrauchbar für Geminis Kernstärke, viele Bilder zu einem zu komponieren. Statt die Abstraktion mit einem privaten API-Aufruf zu umgehen, hat ACOLONO mit MultiImageToImageInput einen sauber typisierten neuen Operationstyp beigetragen, den jeder beliebige Provider übernehmen kann.
Das Modul selbst ist unter GPL-2.0-or-later auf drupal.org veröffentlicht und wurde im Rahmen der Keynote "Autonomous Drupal: The fire is in our hands" von Frederik Wouters bei den Drupal Developer Days Athens 2026 vorgestellt.
Darüber hinaus reicht das Engagement von ACOLONO für die Drupal-Community bis 2005 zurück. Über die reine Code-Arbeit hinaus setzt sich ACOLONO für das Wachstum von Drupal im DACH-Raum ein und unterstützt die lokale Community durch Organisation und Förderung von Meetups, Camps und großen Events.
Die Gründer Christian Ziegler und Nico Grienauer sind aktive Vorstandsmitglieder des Drupal Austria Vereins und treibende Kräfte hinter DrupalCamp Vienna, den Open Minds Awards, den Drupal Starter Days, der Drupal Roadshow und dem DrupalCon Vienna Community Day. ACOLONO holte die Drupal Dev Days nach Wien und beteiligt sich an strategischen Initiativen wie Drupal CMS und dem DSGVO-Track. In den vergangenen zwölf Monaten kamen 950 Issue-Credits auf drupal.org zusammen (new.drupal.org/acolono-gmbh).
Über das Veröffentlichen des Nanobanana Providers und Editors hinaus, trägt ACOLONO zu mehreren Modulen bei und pflegt sie: Address Autocomplete, AI Provider Nano Banana, AI Sidekick, Alttext.ing, Drupical, Google Product Categories, Nano Banana Editor, Past Log Alerts, Persistent Visitor Parameters, Salesforce Past Log, Sucuri Cache und weitere.
Das Team behebt zudem Fehler und optimiert Drupal Core sowie Contrib-Module durch Patches und Issue-Bearbeitung auf drupal.org, von kritischen Bugfixes bei Facets und SearchAPI bis zu Performance- und Usability-Verbesserungen bei Modulen wie Webform, MailChimp und Mandrill. ACOLONO reviewt und testet Patches anderer, trägt zu Übersetzungen von Drupal und seinen Modulen bei und teilt Erkenntnisse in Case Studies auf drupal.org sowie in internen Projekten wie dem vollständigen Svelte-Frontend-Rewrite des Eventkalenders drupical.com.
NanoBanana Editor zeigt, wie KI-Funktionalität in ein bestehendes Open-Source-Ökosystem gehört: nicht als externer Dienst, sondern als Erweiterung der Abstraktionen, die Drupal bereits mitbringt. ACOLONO hat nicht nur ein Redaktions-Feature gebaut, sondern zuerst den fehlenden Baustein für das gesamte Ökosystem geliefert, den KI-Provider für Gemini, und die Kern-Abstraktion des AI-Moduls um einen Operationstyp erweitert, den jeder andere Provider mitnutzen kann.
Technisch bleibt das Modul dabei bewusst schlank: kein Build-Step, ein einziges Fremdmodul im Frontend, vollständige Dependency Injection statt statischer Aufrufe, und eine PHPStan-Baseline von 0 Byte (PHP-Code ist fehlerfrei) . Die Zeichen-Canvas löst ein echtes Präzisionsproblem von Sprache in der Bildbearbeitung, das einheitliche Undo/Redo verbindet zwei technisch grundverschiedene Historien in einer einzigen, für Redakteur:innen intuitiven Bedienung, und die Farbauswahl ist vollständig per Tastatur und Screenreader bedienbar.
Der Beleg für den wirtschaftlichen Wert dieses Beitrags liegt bereits vor: Mindestens eine große Drupal-Agentur (nicht ACOLONO) hat NanoBanana Editor bereits erfolgreich in eine Ausschreibung eingebracht und damit den Zuschlag gewonnen. Genau das ist der Gedanke hinter Open Source: ACOLONO hat den fehlenden Baustein für das Ökosystem gebaut, und er stärkt inzwischen auch die Angebote anderer Agenturen. Wenn andere Agenturen mit unserem Modul eine Ausschreibung gewinnen, würden wir uns sehr freuen, einen prestigeträchtigen Award damit zu gewinnen :)
Für die Kategorie Lösungen ist das ein Lehrbuchfall: ein eigenständiges, wiederverwendbares Tool, das nicht für einen einzelnen Kunden, sondern für die gesamte Drupal-Community gebaut wurde, im Markt bereits nachweislich Wert stiftet, und bereits auf internationaler Bühne, bei den Drupal Developer Days Athens, als Beispiel für die Zukunft von Drupal gezeigt wurde.
