Editor Medien-Erweiterung: Bilder direkt im Texteditor einfügen

Auf einen Blick

• Bild einfügen ohne eine Zeile HTML, direkt aus der Werkzeugleiste heraus
• Größe und Ausrichtung legst du vorher fest, nicht hinterher im Quelltext
• Das Bild landet genau dort, wo dein Cursor im Text steht
• Der Alt-Text kommt aus der Medienverwaltung und steht schon im Dialog
• Überall dort verfügbar, wo Shopware den Texteditor zeigt

Du schreibst eine Produktbeschreibung, und mittendrin gehört eine Größentabelle hin. Als Bild, denn genau so liegt sie in deiner Medienverwaltung. Der Texteditor in der Administration kann fett, kursiv, Aufzählungen und Links. Ein Bild kann er nicht.

Das Problem

Der übliche Ausweg führt über die Quelltext-Ansicht. Du suchst das Bild in der Medienverwaltung, kopierst seine Adresse, tippst ein img-Tag, schreibst Breite und Ausrichtung von Hand dazu und schaust danach im Shop nach, ob das Ergebnis hält. Zwei Minuten pro Bild klingen nach wenig. Bei dreißig Produkttexten ist der Nachmittag weg.

Schlimmer wird es, wenn nicht du die Texte pflegst. Redakteure, Praktikanten oder die Kollegin aus dem Marketing sollen HTML tippen, das im Shop live geht. Meistens passiert dann gar nichts: Das Bild bleibt weg, weil sich niemand traut.

Die Lösung

Das Plugin setzt einen Button in die Werkzeugleiste des Texteditors. Ein Klick darauf öffnet die Shopware-Medienverwaltung, du wählst ein Bild aus. Danach fragt ein kurzer Dialog nach Alt-Text, Größe und Ausrichtung, und mit „Einfügen“ sitzt das Bild an der Stelle, an der dein Cursor vorher stand. Kein Quelltext, keine kopierten Adressen, kein Nachbessern.

Was du davon hast

Redakteure kommen ohne HTML aus. Wer den Editor bedienen kann, kann jetzt auch Bilder setzen. Das nimmt die Aufgabe von deinem Tisch und gibt sie an die Leute zurück, die die Texte ohnehin schreiben.

Die Größe entscheidest du vorher. Vier Voreinstellungen decken den Alltag ab: S 25%, M 50%, L 75% und Voll. Passt keine davon, trägst du eine eigene Breite in px, % oder em ein. Das Bild kommt fertig skaliert in den Text, statt dass du es hinterher im Quelltext zurechtziehst.

Text und Bild stehen so nebeneinander, wie du es willst. Links oder rechts umfließend, zentriert als eigener Block oder ganz ohne Ausrichtung. Vier Klicks, vier Layouts.

Der Alt-Text ist schon ausgefüllt. Das Plugin übernimmt ihn aus der Medienverwaltung, sobald er dort gepflegt ist. Du kannst ihn im Dialog überschreiben, musst aber nicht bei null anfangen. Barrierefreiheit scheitert selten am Willen, meistens an der Tipparbeit.

Das Bild landet dort, wo du stehst. Das Plugin merkt sich die Cursor-Position, bevor die Medienverwaltung aufgeht, und stellt sie beim Einfügen wieder her. Kein Bild, das am Anfang des Absatzes klebt.

Ein Handgriff, überall gleich. Der Button hängt am Texteditor selbst, nicht an einer einzelnen Seite. Wo Shopware diesen Editor zeigt, ist er da.

So arbeitet das Plugin

Du klickst in der Werkzeugleiste auf das Bild-Symbol. Die Shopware-Medienverwaltung öffnet sich als Dialog, du wählst ein Bild aus deinem Bestand. Sofort danach erscheint der Optionen-Dialog: oben eine Vorschau, darunter das Feld „Alt-Text“, die fünf Größen-Schaltflächen und die vier Ausrichtungs-Schaltflächen. Ein Klick auf „Einfügen“ schreibt das Bild in den Text, ein Klick auf „Abbrechen“ verwirft alles.

Eingefügt wird ein schlichtes Bild-Element mit Inline-Stil. Es bekommt immer eine maximale Breite von 100 Prozent mit, damit es auf schmalen Bildschirmen nicht aus dem Layout läuft. Ist im Medium ein Titel hinterlegt, wandert er als Title-Attribut mit. Adressen, die nicht mit http oder https beginnen, fügt das Plugin gar nicht erst ein.

Typische Einsatzszenarien

Produktbeschreibungen mit Zusatzgrafik. Größentabelle, Pflegehinweis, Maßzeichnung: alles Dinge, die als Bild in der Beschreibung stehen und bisher Handarbeit im Quelltext waren.

Erlebniswelten und Landingpages. In CMS-Textelementen mischst du Text und Bild frei, ohne für jede Grafik ein eigenes Bild-Element ins Layout zu ziehen.

Kategorietexte mit Beratungscharakter. Ein Foto neben dem erklärenden Absatz, links umfließend, fertig.

Teams ohne Technik-Hintergrund. Agentur, Werkstudent oder Saisonkraft pflegen Inhalte, ohne dass jemand HTML gegenlesen muss.

Technische Fakten für deine IT

Das Plugin ist für Shopware 6.7 gebaut (Constraint ~6.7.0) und arbeitet ausschließlich in der Administration. Serverseitig besteht es aus einer leeren Plugin-Klasse, die gesamte Funktion liegt in der Administrations-Oberfläche.

Es legt keine eigenen Datenbanktabellen an, ändert keine Shopware-Tabellen und schreibt keine Custom Fields. Was du einfügst, ist normales HTML im ohnehin vorhandenen Textfeld. Es bringt keine eigenen Berechtigungen mit: Wer im Editor arbeitet, sieht genau die Medien, die Shopware ihm ohnehin zeigt.

Das Plugin sendet keine Daten an externe Server. Es lädt keine Schriften, keine Skripte und keine Bilder von fremden Domains, setzt keine Cookies und verarbeitet keine personenbezogenen Daten. Die Bilder kommen aus deiner eigenen Medienverwaltung.

Die Storefront bleibt unangetastet. Es gibt keine zusätzlichen Datenbankabfragen im Shop, keine Twig-Erweiterung und keinen Einfluss auf den HTTP-Cache. Die Administrations-Erweiterung liegt fertig gebaut im Plugin, du musst die Administration nach der Installation nicht selbst kompilieren.

Deinstallieren kannst du das Plugin jederzeit. Es bleiben keine Tabellen und keine Einstellungen zurück. Bereits eingefügte Bilder bleiben sichtbar, weil sie als gewöhnliches HTML in deinen Inhalten stehen und nicht vom Plugin gerendert werden.

Ehrlich gesagt

Das ist ein kleines Werkzeug, kein Redaktionssystem. Es fügt Bilder ein, mehr nicht. Ein bereits eingefügtes Bild kannst du über den Dialog nicht noch einmal öffnen und ändern: Größe oder Ausrichtung korrigierst du, indem du das Bild löschst und neu einfügst. Videos, PDFs oder Downloads bindet das Plugin nicht ein, es ist auf Bilder ausgelegt. Und wenn dein Team ohnehin sicher im Quelltext arbeitet, sparst du damit Klicks, keine Stunden. Schau es dir an und entscheide selbst.

Häufige Fragen

Muss ich nach der Installation etwas einstellen?

Nein. Das Plugin hat keine Einstellungen. Nach dem Aktivieren und einem Neuladen der Administration steht der Button in der Werkzeugleiste.

Wo genau finde ich den Button?

In der Werkzeugleiste des Texteditors, links bei den übrigen Formatier-Schaltflächen. Er trägt ein Bild-Symbol und den Hinweistext „Bild einfügen“.

In welchen Bereichen der Administration funktioniert das?

Überall dort, wo Shopware seinen Texteditor einsetzt, zum Beispiel in CMS-Textelementen der Erlebniswelten, in Produktbeschreibungen und in Kategorietexten. Das Plugin erweitert den Editor selbst, nicht einzelne Seiten.

Kann ich ein eingefügtes Bild später über den Dialog wieder ändern?

Nein. Der Dialog erscheint nur beim Einfügen. Willst du Größe oder Ausrichtung ändern, löschst du das Bild im Editor und fügst es neu ein. Alternativ passt du den Stil in der Quelltext-Ansicht an.

Kann ich damit auch Videos oder PDFs einbinden?

Nein. Das Plugin fügt Bilder als Bild-Element ein. Für Videos und Downloads ist es nicht gebaut.

Kann ich mehrere Bilder auf einmal einfügen?

Nein, pro Vorgang ein Bild. Die Mehrfachauswahl in der Medienverwaltung ist bewusst abgeschaltet, weil jedes Bild eigene Angaben zu Größe und Ausrichtung bekommt.

Was passiert bei der Deinstallation mit meinen Bildern?

Deine Bilder bleiben, wo sie sind. Eingefügte Bilder stehen als normales HTML in deinen Inhalten und in der Medienverwaltung, nicht in einer Plugin-Tabelle. Nach der Deinstallation fehlt nur der Button.

Funktioniert das mit meinem Theme?

Ja, denn das Plugin arbeitet in der Administration und fasst die Storefront nicht an. Wie das Bild im Shop aussieht, bestimmt weiterhin dein Theme. Das Plugin gibt dem Bild eine maximale Breite von 100 Prozent mit, damit es auf kleinen Bildschirmen im Rahmen bleibt.

Sendet das Plugin Daten an externe Server?

Nein. Es sendet keine Daten nach außen, lädt nichts von fremden Domains und setzt keine Cookies. Alle Bilder stammen aus deiner eigenen Medienverwaltung.

Braucht mein Team besondere Berechtigungen?

Das Plugin bringt keine eigenen Berechtigungen mit. Es gelten die Shopware-Rechte, die deine Benutzer für Medien und für den jeweiligen Inhalt ohnehin haben.

Verträgt es sich mit anderen Plugins, die den Texteditor erweitern?

In der Regel ja. Das Plugin hängt seinen Button zusätzlich an die Werkzeugleiste und entfernt oder ersetzt nichts Bestehendes. Bei einem anderen Plugin, das denselben Editor tiefgreifend umbaut, prüfst du es besser vorab in einer Testumgebung.

Wirkt sich das auf die Ladezeit meines Shops aus?

Nein. Im Shop läuft nichts vom Plugin. Es gibt keine zusätzlichen Datenbankabfragen, keine Twig-Erweiterung und keinen Einfluss auf den Cache.

In welchen Sprachen ist die Oberfläche verfügbar?

Deutsch, Englisch und Niederländisch. Die Beschriftungen richten sich nach der Sprache, die dein Benutzer in der Administration eingestellt hat.