Editor Medien-Erweiterung

Einleitung

Die Editor Medien-Erweiterung setzt einen zusätzlichen Button in die Werkzeugleiste des Texteditors deiner Shopware-Administration. Damit fügst du ein Bild aus deiner Medienverwaltung direkt in einen Text ein — ohne Umweg über die Quelltext-Ansicht und ohne eine Zeile HTML.

Was du mit diesem Plugin erreichst

• Du setzt Bilder in Produktbeschreibungen, Kategorietexte und Textelemente der Erlebniswelten, indem du sie auswählst statt sie einzutippen.
• Du legst Größe und Ausrichtung des Bildes vor dem Einfügen fest und musst nichts hinterher korrigieren.
• Das Bild landet genau an der Stelle, an der dein Cursor im Text stand.
• Der Alt-Text steht schon im Dialog, sofern beim Bild einer hinterlegt ist — gut für Barrierefreiheit und Suchmaschinen.
• Auch Kolleginnen und Kollegen ohne Technik-Hintergrund können Bilder in Texte setzen.

Für wen ist dieses Plugin?

Für alle, die im Shopware-Backend Texte pflegen: Shop-Betreiber, Redakteure, Agenturen, Marketing-Teams. Vorkenntnisse brauchst du keine — wenn du den Texteditor bedienen kannst, kannst du auch dieses Plugin bedienen.

Installation

Nach dem Kauf steht dir das Plugin direkt in deiner Administration zur Verfügung — du musst nichts herunterladen.

1. Melde dich in deiner Shopware-Administration an.
2. Öffne im linken Menü Erweiterungen und dort Meine Erweiterungen.
3. Klicke in der Zeile Editor Medien-Erweiterung auf Installieren.
4. Schalte anschließend den Schalter links neben dem Namen ein. Ist er blau, ist das Plugin aktiv.

Abb. 1: Unter „Meine Erweiterungen“ ist die Editor Medien-Erweiterung installiert und der Schalter eingeschaltet.

5. Lade die Administration danach einmal im Browser neu. Erst dann erscheint der neue Button in der Werkzeugleiste.

Taucht die Erweiterung nicht in der Liste auf? Dann ist dein Shopware-Konto noch nicht mit dem Shop verbunden. Die Anmeldung erledigst du unter Erweiterungen → Meine Erweiterungen im Reiter Shopware Account; danach erscheint das Plugin automatisch in der Liste.

Erste Schritte

Nach dem Aktivieren gibt es nichts einzurichten. Du erkennst sofort, dass das Plugin arbeitet:

1. Öffne einen beliebigen Text in der Administration, zum Beispiel unter Kataloge → Kategorien eine Kategorie und dort das Feld Beschreibung.
2. Sieh dir die Werkzeugleiste über dem Textfeld an. Ganz rechts in der linken Symbolgruppe — direkt neben dem Tabellen-Symbol — steht jetzt ein Bild-Symbol.
3. Fährst du mit der Maus darüber, erscheint der Hinweis Bild einfügen.

Abb. 2: Das Bild-Symbol steht direkt rechts neben dem Tabellen-Symbol, vor den Pfeilen für Rückgängig und Wiederholen.

Siehst du das Symbol, ist alles bereit. Wie es weitergeht, steht in So fügst du ein Bild ein.

Warum du nichts einstellen musst

Dieses Plugin bringt bewusst keine Einstellungen mit. Du wirst es deshalb weder unter Einstellungen → Erweiterungen finden, noch gibt es in der Liste unter Meine Erweiterungen einen Link Konfigurieren.

Das ist kein fehlendes Kapitel, sondern Absicht: Alles, was man je Bild entscheiden muss — welches Bild, wie groß, wie ausgerichtet, welcher Alt-Text —, entscheidest du im Moment des Einfügens im Dialog. Eine Voreinstellung, die für alle Bilder gleichzeitig gilt, wäre in der Praxis immer für die Hälfte der Fälle die falsche.

Was das für dich bedeutet: Nach dem Aktivieren und einem Neuladen der Administration ist das Plugin einsatzbereit. Es gibt nichts, was du vergessen oder falsch einstellen könntest, und nichts, was du bei einem Update nachziehen müsstest.

Auch zusätzliche Berechtigungen musst du niemandem geben. Es gelten die Rechte, die deine Benutzer in Shopware ohnehin für Medien und für den jeweiligen Inhalt haben: Wer eine Kategorie bearbeiten und die Medienverwaltung öffnen darf, kann auch Bilder einfügen.

So fügst du ein Bild ein

Was dir das bringt: Ein Bild sitzt in wenigen Klicks mitten im Text — in der richtigen Größe, an der richtigen Stelle und mit Alt-Text. Der Umweg über die Quelltext-Ansicht, kopierte Bildadressen und selbst getippte Bild-Elemente entfällt.

Als Beispiel dient hier die Beschreibung einer Kategorie. In jedem anderen Textfeld läuft es genauso ab.

Bild auswählen

1. Öffne den Text, in den das Bild soll — zum Beispiel unter Kataloge → Kategorien eine Kategorie und dort das Feld Beschreibung.
2. Klicke zuerst im Text an die Stelle, an der das Bild stehen soll. Das Plugin merkt sich diese Position und setzt das Bild später genau dort ein.
3. Klicke in der Werkzeugleiste auf das Bild-Symbol (Bild einfügen).
4. Es öffnet sich der Dialog Medien auswählen mit deiner Medienverwaltung. Im Reiter Bibliothek klickst du dich durch die Ordner oder suchst über das Feld Suche … nach einem Dateinamen.
5. Klicke das gewünschte Bild an. Es wird blau hinterlegt, rechts erscheint es in der Vorschau.
6. Klicke unten rechts auf Medien hinzufügen.

Abb. 3: Im Dialog „Medien auswählen“ suchst du das Bild in deiner Bibliothek und bestätigst mit „Medien hinzufügen“.

Tipp: Ist das Bild noch gar nicht im Shop? Dann lade es im selben Dialog über den Reiter Dateien hochladen hoch und wähle es anschließend aus.

Wichtig: Pro Vorgang fügst du genau ein Bild ein. Das ist so gewollt, denn jedes Bild bekommt im nächsten Schritt eigene Angaben zu Größe und Ausrichtung. Für ein zweites Bild klickst du einfach erneut auf das Bild-Symbol.

Alt-Text, Größe und Ausrichtung festlegen

Direkt nach der Auswahl erscheint der Dialog Bild einfügen. Ganz oben siehst du eine Vorschau des gewählten Bildes, darunter drei Bereiche.

Abb. 4: Im Dialog „Bild einfügen“ legst du Alt-Text, Größe und Ausrichtung fest — hier „M 50%“ und „Links“.

Alt-Text

In das Feld unter Alt-Text gehört eine kurze Beschreibung dessen, was auf dem Bild zu sehen ist. Diesen Text lesen Screenreader vor, und Suchmaschinen werten ihn aus; außerdem erscheint er im Shop, wenn ein Bild einmal nicht geladen werden kann. Ist beim Bild in deiner Medienverwaltung bereits ein Alt-Text hinterlegt, steht er hier schon drin — du kannst ihn übernehmen oder überschreiben. Ist das Feld leer, zeigt es hellgrau den Dateinamen als Anhaltspunkt; einen eigenen Text tippst du einfach darüber.

Größe

Unter Größe wählst du, wie breit das Bild im Text erscheint:

• S 25% — schmal, gut für kleine Symbole, Siegel oder Logos neben dem Fließtext
• M 50% — halbe Breite, der übliche Fall für ein Bild mit umfließendem Text (vorausgewählt)
• L 75% — großes Bild, das den Text nur noch schmal daneben zulässt
• Voll — das Bild nimmt die volle verfügbare Breite ein
• ↔ Benutzerdefiniert — für alle Fälle, in denen keine der vier Größen passt

Klickst du auf ↔ Benutzerdefiniert, erscheint darunter das Feld Breite und daneben eine Auswahl mit den Einheiten px, % und em. Trage die gewünschte Zahl ein und wähle die Einheit: px für eine feste Breite in Bildpunkten, % für einen Anteil der Textbreite, em für eine Breite, die sich an der Schriftgröße orientiert.

Ausrichtung

Unter Ausrichtung entscheidest du, wie sich Bild und Text zueinander verhalten:

• Keine — das Bild steht schlicht an der Cursor-Position, ohne dass der Text es umfließt (vorausgewählt)
• Links — das Bild rutscht an den linken Rand, der Text fließt rechts daneben weiter
• Rechts — das Bild rutscht an den rechten Rand, der Text fließt links daneben weiter
• Mitte — das Bild steht mittig als eigener Block, der Text beginnt darunter

Mit Einfügen setzt du das Bild in den Text. Abbrechen verwirft alles; im Text ändert sich dann nichts.

Ergebnis prüfen und speichern

Nach dem Klick auf Einfügen siehst du das Bild sofort im Editor — genau so, wie du es eingestellt hast. Im Beispiel unten steht es links in halber Breite, der Text fließt rechts daneben.

Abb. 5: Das Bild sitzt links im Text, der Absatz fließt rechts daneben weiter.

Du kannst jetzt normal weiterschreiben. Zum Schluss speicherst du den Inhalt wie gewohnt über Speichern oben rechts. Erst danach ist das Bild auch im Shop sichtbar.

Tipp: Sitzt die Größe oder die Ausrichtung nicht wie gewünscht, markierst du das Bild im Editor, löschst es und fügst es neu ein. Der Dialog erscheint nur beim Einfügen und lässt sich für ein bereits gesetztes Bild nicht noch einmal öffnen.

Wo der Button überall verfügbar ist

Das Plugin erweitert den Texteditor selbst, nicht eine einzelne Seite. Deshalb steht das Bild-Symbol überall dort in der Werkzeugleiste, wo Shopware diesen Editor zeigt — zum Beispiel:

• in Produktbeschreibungen
• in Kategorietexten
• in Textelementen der Erlebniswelten

Abb. 6: Derselbe Button im Texteditor einer Produktbeschreibung — Bedienung und Dialoge sind überall identisch.

Die Bedienung unterscheidet sich dabei nicht: auswählen, Größe und Ausrichtung festlegen, einfügen.

Tipps für die tägliche Arbeit

• Erst klicken, dann einfügen. Setze den Cursor immer zuerst an die Stelle im Text, an der das Bild stehen soll. Das erspart dir das Verschieben hinterher.
• Alt-Text lohnt sich immer. Ein Satz genügt. Er hilft Menschen, die einen Screenreader nutzen, und er ist für Suchmaschinen ein Pluspunkt.
• Ein Bild pro Absatz umfließen lassen. Zwei umfließende Bilder direkt untereinander sehen im Shop schnell unruhig aus. Für eine Bilderreihe eignet sich Mitte oder Voll besser.
• Vorher pflegen spart Tippen. Trägst du den Alt-Text bereits beim Bild in der Medienverwaltung ein, steht er beim Einfügen automatisch im Dialog — auch bei jeder späteren Verwendung.
• Im Shop gegenprüfen. Nach dem Speichern lohnt sich ein Blick auf die Seite in der Storefront, besonders auf dem Smartphone. Auf schmalen Bildschirmen wirkt ein umfließendes Bild anders als im Editor.

Fehlerbehebung

Das Bild-Symbol fehlt in der Werkzeugleiste

Woran es liegt: Das Plugin ist noch nicht aktiv, oder die Administration läuft noch mit dem Stand von vor der Installation.

So behebst du es:

1. Öffne Erweiterungen → Meine Erweiterungen und prüfe, ob der Schalter neben Editor Medien-Erweiterung eingeschaltet ist.
2. Lade die Administration im Browser neu.
3. Hilft das nicht, leere den Zwischenspeicher: Einstellungen → System → Caches & Indizes → Cache leeren, danach die Administration erneut neu laden.

Das Bild sitzt an einer anderen Stelle als gewünscht

Woran es liegt: Vor dem Klick auf das Bild-Symbol stand der Cursor nicht dort, wo das Bild hin sollte — zum Beispiel, weil vorher zuletzt an anderer Stelle geschrieben wurde.

So behebst du es: Lösche das Bild im Editor, klicke im Text an die gewünschte Stelle und füge es erneut ein.

Nach dem Klick auf „Medien hinzufügen“ passiert nichts

Woran es liegt: Es war kein Bild ausgewählt — der Button bleibt dann blass, oder es wurde nur ein Ordner geöffnet.

So behebst du es: Klicke das Bild einmal direkt an, sodass es blau hinterlegt ist und rechts in der Vorschau erscheint. Erst dann ist Medien hinzufügen anklickbar.

Das Bild ist im Editor zu groß oder zu klein

Woran es liegt: Im Dialog war eine andere Größe gewählt, als es der Text braucht.

So behebst du es: Lösche das Bild und füge es mit einer anderen Größe erneut ein. Passt keine der vier Größen, nutze ↔ Benutzerdefiniert und trage eine eigene Breite ein.

Das Bild wurde gar nicht eingefügt

Woran es liegt: Das Plugin fügt aus Sicherheitsgründen ausschließlich Bilder ein, deren Adresse mit http oder https beginnt. Bei allem anderen bricht es den Vorgang stillschweigend ab.

So behebst du es: Verwende ein Bild aus deiner eigenen Medienverwaltung. Bleibt das Problem bestehen, wende dich mit dem Namen des Bildes an den Support.

Im Shop erscheint das Bild nicht

Woran es liegt: Der Inhalt wurde nach dem Einfügen nicht gespeichert.

So behebst du es: Öffne den Text erneut und klicke oben rechts auf Speichern. Lade danach die Seite im Shop neu.

FAQ

F: Muss ich nach der Installation etwas einstellen?

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

F: Wo genau finde ich den Button?

A: In der Werkzeugleiste über dem Textfeld, ganz rechts in der linken Symbolgruppe, direkt neben dem Tabellen-Symbol. Er trägt ein Bild-Symbol und den Hinweistext Bild einfügen.

F: In welchen Bereichen funktioniert das?

A: Überall dort, wo Shopware seinen Texteditor zeigt — zum Beispiel in Produktbeschreibungen, Kategorietexten und Textelementen der Erlebniswelten.

F: Kann ich ein bereits eingefügtes Bild über den Dialog noch einmal ändern?

A: Nein. Der Dialog erscheint nur beim Einfügen. Für eine andere Größe oder Ausrichtung löschst du das Bild und fügst es neu ein.

F: Kann ich mehrere Bilder auf einmal einfügen?

A: Nein, pro Vorgang ein Bild. Jedes Bild bekommt eigene Angaben zu Alt-Text, Größe und Ausrichtung.

F: Kann ich damit auch Videos oder PDF-Dateien einbinden?

A: Nein. Das Plugin ist auf Bilder ausgelegt.

F: Muss ich Bilder vorher zuschneiden oder verkleinern?

A: Nicht wegen des Layouts — jedes eingefügte Bild bekommt automatisch eine maximale Breite mit und läuft dadurch nicht aus dem Layout. Für kurze Ladezeiten im Shop lohnt es sich trotzdem, keine unnötig großen Dateien hochzuladen.

F: Funktioniert das mit meinem Theme?

A: Ja. Das Plugin arbeitet nur in der Administration und ändert nichts an deinem Shop-Design. Wie das Bild in der Storefront dargestellt wird, bestimmt weiterhin dein Theme.

F: Brauchen meine Mitarbeiter besondere Berechtigungen?

A: Nein, keine zusätzlichen. Es gelten die Shopware-Rechte, die deine Benutzer für Medien und für den jeweiligen Inhalt ohnehin haben.

F: Was passiert mit meinen Bildern, wenn ich das Plugin deinstalliere?

A: Sie bleiben. Bereits eingefügte Bilder stehen als gewöhnlicher Inhalt in deinen Texten und liegen weiterhin in deiner Medienverwaltung. Nach der Deinstallation fehlt nur der Button zum Einfügen.

F: In welchen Sprachen ist die Bedienung verfügbar?

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

F: Werden Daten an externe Dienste gesendet?

A: Nein. Das Plugin sendet nichts nach außen und setzt keine Cookies. Alle Bilder stammen aus deiner eigenen Medienverwaltung.

Für Administratoren / Technische Details

Dieser Abschnitt richtet sich an technische Administratoren. Für die tägliche Arbeit mit dem Plugin brauchst du ihn nicht.

Systemanforderungen

• Shopware: 6.7 (Constraint ~6.7.0)
• PHP: 8.2 oder neuer
• Keine zusätzlichen Server-Dienste, keine externen Schnittstellen

Installation über die Kommandozeile (Composer)

composer require swp/editor-with-media-six
bin/console plugin:refresh
bin/console plugin:install --activate SwpEditorWithMediaSix
bin/console cache:clear

Anschließend die Administration im Browser neu laden.

Was das Plugin im System tut — und was nicht

Die gesamte Funktion liegt in der Administration. Das Plugin erweitert den Standard-Texteditor um einen Button und einen Dialog; serverseitig läuft dabei nichts.

• Es legt keine eigenen Datenbanktabellen an und verändert keine Shopware-Tabellen. Es gibt keine Migrationen.
• Es bringt keine Einstellungen mit — es existiert keine Konfigurationsseite.
• Es registriert keine eigenen Berechtigungen. Es gelten die vorhandenen Shopware-Rechte für Medien und für den jeweiligen Inhalt.
• Es greift nicht in die Storefront ein: keine zusätzlichen Datenbankabfragen, keine Template-Erweiterung, kein Einfluss auf den HTTP-Cache.
• Es sendet keine Daten an externe Server, lädt nichts von fremden Domains und setzt keine Cookies.

Was beim Einfügen erzeugt wird

Eingefügt wird ein gewöhnliches Bild-Element mit Inline-Stil, das im Inhaltsfeld des jeweiligen Datensatzes gespeichert wird — genau wie fett oder kursiv formatierter Text auch. Jedes eingefügte Bild erhält eine maximale Breite von 100 Prozent, damit es auf schmalen Bildschirmen im Layout bleibt. Ist beim Medium ein Titel hinterlegt, wird er als Title-Attribut übernommen. Adressen, die nicht mit http oder https beginnen, werden abgewiesen; Sonderzeichen in Adresse, Alt-Text und Titel werden maskiert.

Deinstallation

Beim Deinstallieren bleiben keine Tabellen und keine Einstellungen zurück. Bereits eingefügte Bilder bleiben in den Inhalten erhalten und werden weiterhin angezeigt, da sie normaler Inhalt sind und nicht vom Plugin gerendert werden.

Administrations-Build

Die Administrations-Erweiterung ist fertig gebaut im Plugin enthalten. Ein eigener Build-Schritt nach der Installation ist nicht nötig.

---

Diese Anleitung wurde für die Editor Medien-Erweiterung Version 6.7.0 erstellt.