Medien

Die Medienverwaltung ist das zentrale Modul, um Bilder, Videos und andere Medien zu verwalten. Zudem bietet das Modul einen komfortablen Uploader um die Medien per Drag&Drop hochzuladen.

Oberfläche

Die Oberfläche teilt sich in vier Hauptbereiche auf. Oben findest Du die "Aktionsleiste" mit den folgenden Aktionsmöglichkeiten:

• Album suchen (1): Sucht nach Alben.
• Eigene Medien hinzufügen (2): Öffnet ein Pop-Up zum Medienupload.
• Markierte Medien ersetzen (3): Öffnet ein Pop-Up zum ersetzen der markierten Medien.
• Markierte Medien löschen (4): Löscht die markierten Medien.
• Anzeigen als Tabelle (5): wechselt die Darstellungsart zur Tabellenansicht. Wenn Du dich in der Tabellenansicht befindest, kommst Du über den gleichen Button wieder in die Rasteransicht.
• Medien suchen (6): Sucht nach Medien und listet die die Ergebnisse unten auf.

Auf der linken Seite (7) findest Du alle Alben und Unteralben Deiner Installation. Wenn gewünscht, kannst Du natürlich jederzeit neue Alben und Unteralben anlegen und sortieren. Im mittleren Bereich (8) befinden sich alle Medien des jeweils ausgewählten Albums sowie darüber eine Zone, in der Du Medien per Drag&Drop hochladen kannst, sofern Dein Browser dies unterstützt. Wenn vom Format her möglich, wird Dir auch ein Thumbnail des Mediums angezeigt. Unter weitere Informationen (9) werden Dir alle relevanten Informationen zum ausgewählten Medium angezeigt: Download-Link, Name, Upload-Datum, Typ, Auflösung und die direkte URL, falls Du das Medium direkt verlinken musst. Dies solltest Du aber soweit es geht vermeiden und alternativ den MediaService nutzen, um die Inhalte dynamisch zu halten.

Medien einem Album hinzufügen/löschen

Du kannst Medien auf 2 Arten zu einem Album hinzufügen. Die einfachste Möglichkeit ist, das Album, in die Du die Medien hochladen möchtest, auszuwählen und die Medien dann über den Button Eigene Medien hochladen hochzuladen. Die Bilder werden dann dem richtigen Album zugeordnet und es werden auch direkt die richtigen Thumbnails erstellt.

Alternativ kannst Du bereits hochgeladene Medien auch im Medienmanager verschieben, indem Du die gewünschten Bilder markierst und per Drag&Drop in das gewünschte Album ziehst. Wenn Du Medien hochlädst, wird der Medienmanager versuchen, direkt Vorschauen - sogenannte Thumbnails - zu erstellen. Für bestimmte Dateitypen gibt es keine Thubnails, dann werden diese auch nicht durchgeführt. Gibt es für den Dateityp Thumbnails, so werden die in den Albumeinstellungen definierten Thumbnails beim Hochladen mit den entsprechenden Einstellungen erzeugt.

Beachte bitte, das individuelle Thumbnailgrößen des Hauptordners nicht automatisch auf bereits bestehende Unterordner vererbt werden, Änderungen von Thumbnailgrößen bzw. neue Thumbnailgrößen müssen bei bestehenden Unterordner immer manuell angelegt werden. Anders verhält es sich bei neuen Unterordnern. Neu angelegte Alben erben automatisch die Thumbnail-Einstellungen des Hauptordners.

Löschen kannst Du Bilder jederzeit im Medienmanager, indem Du die entsprechenden Bilder markierst und auf markierte Bilder löschen klickst, die Bilder und die zugehörigen Thumbnails werden dann vom Server gelöscht. Beachte hierbei aber, dass die Bildzuordnung beim Artikel oder andere statische Verlinkungen nicht gelöscht werden, diese musst Du selbst aufheben!

Medien ersetzen

Ab Shopware 5.3 ist es möglich, bestehende Medien direkt im Medienmanager zu ersetzen. Dies ist auch dateitypübergreifend möglich (z.B. jpg durch png ersetzen), der Bildname bleibt hierbei gleich.

Um ein bestehendes Bild zu erstzen, markiere das gewünschte Bild und klicke dann auf den Button Medien ersetzen. In dem sich nun öffnenden Fenster kannst du das neue Bild auswählen. Auf diese Weise ist es auch möglich mehrere Bilder gleichzeitg zu ersetzen.

Durch das Browsercaching kann es vorkommen, dass nach dem Ersetzen noch alte Bilder im Frontend angezeigt werden. Da dieser Cache nicht durch Shopware ersetzt werden kann ist es evtl. erforderlich, den Browsercache zu leeren.

Neues Album anlegen

Ein neues Album kannst Du Dir ganz einfach anlegen, indem Du mit der rechten Maustaste in einen freien Bereich der Albumübersicht klickst und auf Neues Album erstellen klickst. Ein Unteralbum erstellst Du, indem Du mit einem Rechtsklick auf das gewünschte Hauptalbum, beispielsweise "Artikel" klickst und dann wieder Neues Unteralbum erstellen (1) - Es wird dann ein neues Album unterhalb von "Artikel" erstellt.

Alternativ kannst Du auch per Album erstellen (2) in der unteren Leiste ein neues Album erstellen. Dein neu erstelltes Album erhält dann automatisch die Thumbnaileinstellungen des übergeorneten Albums. Falls Du ein neues Hauptalbum erstellt hast, erhält dieses keine Thumbnaileinstellungen.

Album löschen

Um ein Album zu löschen klicke dieses mit der rechten Maustaste an und wähle im erscheinenden Kontextmenü Album löschen, alternativ kannst Du das Album auch selektieren und per Klick auf Album löschen in der unteren Leiste löschen.

Enthaltene Medien aus dem betroffenen Ordner werden nicht gelöscht! Diese befinden sich nach dem Löschvorgang in dem Album "Unsortiert".

Album-Einstellungen

In die Einstellungen für die Alben gelangst du, indem Du entweder auf das Zahnrad (2) des Albums klickst, oder das Album mit rechter Maustaste > Eigenschaften (1) aufrufst. Es öffnet sich das folgende Fenster:

 

• Album Name (1): Hier kannst Du den Namen des Albums ändern.
• Thumbnails (2): Hier definierst Du, ob für die Medien in diesem Album Thumbnails erstellt werden sollen. Wenn Du keine Thumbnails brauchst oder das Album nur Dateitypen enthält, die keine Vorschau ermöglichen (z.B. Videos), kannst Du diese Einstellung natürlich deaktivieren.
• Album-Icon (3): Hier kannst Du Dir ein individuelles Icon definieren, damit Du Dein Icon einfacher wiederfindest.
• Thumbnail-Größe (4): Hier kannst Du neue Thumbnail-Größen eingeben, das Format hierfür ist "200x200". Klicke nach Deiner Eingabe auf "Thumbnail erstellen", um die neue Thumbnailgröße anzulegen. Über den Button "Thumbnails generieren" kannst Du die Thumbnails für alle Medien im ausgewählten Album neu erstellen.
• Thumbnail-Qualität (5): Definiere hier Deine gewünschte Bildqualität für deine Thumbnails > Wert zwischen 1 und 100, je höher der Wert, desto besser die Qualität, gleichzeitig werden die Dateien aber größer.
• High-Resolution Thumbnails - Ab Shopware 5 (6): Generiert Thumbnails mit höherer Auflösung, diese Option richtet sich ausschließlich an Geräte mit hoher Pixeldichte.
• High-Resolution Thumbnail Qualität - Ab Shopware 5 (7): Definiere hier Deine gewünschte Bildqualität für deine High-Resolution Thumbnails > Wert zwischen 1 und 100, je höher der Wert, desto besser die Qualität, gleichzeitig werden die Dateien aber größer.
• Aktuell aktive Thumbnailgrößen (8): Hier siehst Du alle aktuell definierten Thumbnailgrößen.

Falls Du Änderungen an den Thumbnailgrößen vorgenommen hast, hat das keine Auswirkungen auf die bereits hochgeladenen Medien im Album. Falls Du hier Einstellungen verändern musst, ist es nötig, die Thumbnails neu zu generieren, je nach Anzahl, Auflösung und vor allem Menge der Medien kann dies einiges an Zeit in Anspruch nehmen!

Thumbnailgrößen

Die Standardgrößen für den Artikel-Ordner sind:

• 0 = 200x200
• 1 = 600x600
• 2 = 1280x1280

Tipps & Tricks

Thumbnailgrößen ab Shopware 5

Für das Responsive Theme werden neue Thumbnailgrößen benötigt. Für das Responsive Theme sind die folgenden Thumbnailgrößen erforderlich:

High Resolution-Thumbnails

Ein konventioneller PC-Monitor hat eine Pixeldichte von 72 ppi, also 72 Pixel pro Inch. Mobile Geräte haben teilweise Pixeldichten von 500ppi und mehr. Daher werden Bilder auf mobilen Endgeräten tendenziell kleiner dargestellt. Um diesen Umstand zu beheben, kannst Du von Deinen Thumbnails High-Resolution-Versionen erstellen, welche dann immer die jeweils doppelten Abmaße bieten, somit wird gewährleistet, dass die Anzeige auf mobilen Endgeräten nicht schwammig wird, sondern trotz hohen Pixeldichten noch scharf ist. Beachte hierbei aber, dass Thumbnails nie größer als das Original gerechnet werden! Wenn Du also ein 500x500 px kleines Bild hochlädst, wird dies unabhängig der eingestellten Thumbnail-Größen nie größer als 500x500 px!

Im gezeigten Bild werden die High-Resolution Thumbnails also unter Berücksichtigung des Seitenverhältnisses mit max. 400x400px, 1200x1200px & 2560x2560px erzeugt. Hier wird immer die jeweils längere Seite auf das Maximum skaliert.

Ordnerstruktur

Medien werden nicht mehr in einem einzigen Ordner abgelegt, sondern es wird ein Hash genutzt, aus dem sich die Ordnerstruktur ergibt, zum Beispiel /media/image/1d/4a/8c/meinBild.jpg. Nach dem Update auf Shopware 5.1 werden alle Bilder bei Aufruf im Frontend einmalig in die neue Struktur importiert. 

Papierkorb

Der Medienmanager enthält nun eine Papierkorbfunktion, sodass ungenutzte Bilder automatisch bereinigt werden können. Hierzu muss der neue Cronjob "Media Garbage Collector" aktiv sein. Dieser erfasst alle Bilder (im Ordner "Artikel" in der Medienverwaltung) ohne Zuweisung und verschiebt diese in den Papierkorb. Dieser kann dann händisch im Medienmanager geleert werden, indem Du im Kontextmenü auf Papierkorb leeren oder auf das rote Icon neben dem Papierkorb klickst.

3D Modell-Support

Ab Shopware 5.2.4 unterstützt der Medienmanager nun auch 3D-Objekte mit den folgenden Dateiendungen:

• .dae
• .obj
• .fbx
• .spx
• .3ds
• .3mf
• .blend
• .awd
• .ply
• .pcd
• .stl
• .skp

Diese Objekte können derzeit noch nicht mit Bordmitteln im Frontend angezeigt werden, sie sind lediglich mit dem Medienmanager kompatibel und hochladbar.

Konsolentools

Im nachfolgenden Bereich wird auf Shell-Ebene gearbeitet, diese Arbeiten erfolgen grundsätzlich ohne Rückfrage  seitens der Konsole, nutze diese Befehle also nur, wenn Du weißt was Du tust und lege Backups an!

Viele Aufgaben des Medienmanagers lassen sich auch über SSH durchführen, davon ausgehend, dass Du Dich per Shell im Shopware-Hauptverzeichnis befindest, kannst Du die folgenden Befehle nutzen:

• php bin/console sw:media:migrate - migriert Medien aus der alten Struktur (vor 5.1) in die neue Struktur (ab 5.1)
• php bin/console sw:media:cleanup - verschiebt ungenutzte Bilder in den Papierkorb (ab 5.1)
• php bin/console sw:media:cleanup --delete - verschiebt ungenutzte Bilder in den Papierkorb und löscht diese direkt (ab 5.1)
• php bin/console sw:thumbnail:cleanup - löscht nicht mehr genutzte Thumbnails aus allen Alben
• php bin/console sw:thumbnail:generate - generiert alle Thumbnails neu (schneller als im Backend, kann je nach Menge, Qualität und Einstellungen dennoch lange dauern!)
• php bin/console sw:media:cleanup - durchsucht die Installation direkt auf dem Dateisystem, erstellt einen Index über alle originalen Bilder und deren Thumbnails und löscht die verwaisten Thumbnails. (Ab Shopware 5.3.0)

Du kannst an die Befehle jeweils die Option " -h" anhängen, um eine Hilfe dazu aufzurufen, da sich die Befehle sehr granular anpassen lassen.

Definieren von erlaubten Dateitypen im Medienmanager

Über die config.php hast Du die Möglichkeit zu definieren, welche Dateitypen über den Medienmanager hochgeladen werden können.

Bitte beachte, dass einige grundlegende Mediendateien generell hochgeladen werden können, z.B. jpg, png und pdf.
Außerdem ist aus Sicherheitsgründen der Upload ausführbarer Dateien wie php, com und exe generell untersagt, auch wenn die Dateiendungen in die whitelist eingetragen werden.

In folgendem Beispielcode für die config.php wird der Upload für docx und xlsx-Dateien ermöglicht:
 

 'media' => [
        'whitelist' => [
            'docx',
            'xlsx'
        ],
    ]

Groß- und Kleinschreibung der Dateiendungen ist nicht relevant. 

Medienoptionen

In den Grundeinstellungen können Einstellungen zu den Medien getroffen werden. Hierbei steht Dir die folgende Option zur Verfügung:

• Rauschfilterung bei Thumbnails: Wenn aktiv, werden die beim Upload erzeugten Thumbnails einer Rauschreduzierung unterzogen. Da dieser Prozess sehr rechenintensiv ist, benötigt der Vorgang Zeit und Rechenleistung. Die Erstellung der Thumbnails wird daher unter Umständen massiv verlangsamt.

Shopware Media Optimizer

Mit Hilfe dieses Tools kannst Du Deine Medien in Shopware direkt optimieren und dadurch Speicherplatz sparen, was wiederum zu einer Verbesserung bei Googles Pagespeed führen kann.

Die Optimierung der Medien erfolgt lossless, Deine Bilder werden im Standard nicht komprimiert, es werden lediglich Metadaten und andere zur Anzeige unnötigen Informationen gelöscht, um Speicherplatz zu sparen! Verwende für die Komprimierung weiterhin die Shopware-interne Komprimierungseinstellung.

Bei Tests wurde klar ersichtlich, dass ein erneutes Komprimieren von Bildern durch den sw:media:optimize-Befehl keinen weiteren Erfolg bringt. Es reicht also aus, die Komprimierung im Media-Manager einzustellen und den Optimizer in Standardeinstellungen zu betreiben.

Hochladen neuer Medien

Beim Hochladen neuer Medien über den Media-Manager wird der Optimizer automatisch auf jedes Bild ausgeführt. Das Original bleibt dabei unberührt, es werden lediglich alle Thumbnails optimiert.

So stellen wir sicher, dass Du jederzeit vom Original ausgehend neue Thumbnailgrößen erstellen kannst und das Original dabei unverändert bleibt.

Update bestehender Bilder ohne SSH

Wenn Du Shopware geupdated hast, kannst Du die Bilder optimieren, indem Du alle Thumbnails neu generierst. Beim Thumbnails generieren werden die Bilder auch wieder durch den Optimizer geschleust, das Originalbild bleibt auch hier wieder unberührt!

Einmaliges Optimieren aller vorhandener Bilder

Um Deine Bilder manuell zu optimieren, ist eine SSH-Session erforderlich. Verbinde dich per SSH auf Deinen Server, navigiere ins Shopware-Verzeichnis und führe den folgenden Befehl aus, um die Optimierung der Medien anzustoßen:

 
bin/console sw:media:optimize [Parameter] [Pfad]
 

Shopware scannt dann das Dateisystem und optimiert die gefundenen Medien. Dabei wird keine Unterscheidung gemacht, ob es sich um ein Original oder ein Thumbnail handelt, es werden hier also auch Originale optimiert, jedoch im Originalzustand immer lossless!

Der Befehl prüft die gesamte Shopware-Installation nach Medien ab, falls Du also andere optimierbare Medien in einem anderen Ordner liegen hast, werden diese im Standard mit optimiert! Um das zu vermeiden, kannst du den Pfad angeben, um das zu durchsuchende Verzeichnis direkt anzugeben.

Hier ein paar Beispiele für die Verwendung:

 
// Hilfe
bin/console sw:media:optimize -h
 
// Info über die installierten Optimierungstools
bin/console sw:media:optimize -i
 
// Nur Dateien eines bestimmten Pfades optimieren
bin/console sw:media:optimize /var/www/media
 
// Zu erfassende Medien nach Datum/Zeit einschränken
bin/console sw:media:optimize -m
 
// Anzeige weiterer Informationen beim Verarbeiten
bin/console sw:media:optimize -v
 

Die verschiedenen Optimizer

Shopware kann im Standard die folgenden Optimizer nutzen:

Ist eins dieser Tools installiert, werden die entsprechenden Medien über dieses Tool optimiert. Sind mehrere Tools installiert, regelt eine integrierte Priorität, mit welchem Tool die Bilder optimiert werden. Ist kein Tool installiert, läuft der Prozess ohne Aktion über die Medien.

Bitte erfrage bei Deinem Hoster, welches dieser Tools installiert ist und lass dir ggf. mindestens ein jpeg und ein png Tool installieren, wir empfehlen hierfür jpegtran & optipng.

Erweiterung

Der Media-Optimizer kann durch Plugins erweitert werden, um so noch individueller zu optimieren. Mehr darüber erfährst Du in der Developer-Dokumentation des Media-Optimizers.