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

Über die Erweiterung

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 Bildklingen 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.

Rechtlicher Hinweis

Wir übernehmen keine Haftung für rechtliche Vorgaben. Bitte prüfe die Nutzung in Abstimmung mit einem qualifizierten Rechtsbeistand.