Medien

1. Wofuer ist diese Funktion

Die Medienverwaltung (Mediathek) ermoeglicht das Hochladen, Organisieren und Verwalten aller Mediendateien direkt innerhalb der Octoserv-Oberflaeche. Sie integriert die WordPress-Mediathek (upload.php) per iFrame und macht saemtliche Medienfunktionen zugaenglich, ohne dass ein Wechsel in das WordPress-Backend erforderlich ist.

Die Mediathek ist ueber den Navigationspunkt "Medien" in der Sidebar erreichbar. Sie besteht aus einer einzelnen Ansicht, die die vollstaendige WordPress-Mediathek anzeigt -- inklusive aller Standard-WordPress-Funktionen wie Hochladen, Bearbeiten, Filtern und Loeschen von Mediendateien.

Mediendateien, die hier verwaltet werden, stehen allen anderen Octoserv-Modulen zur Verfuegung: Sie koennen in Blogbeitraege, Seiten, E-Mails, Newsletter und Formulare eingebunden werden. Die Mediathek bildet damit die zentrale Dateiablage fuer alle visuellen und multimedialen Inhalte der Website.

2. Ziel und Vorteil

• Zentrale Dateiverwaltung: Alle Bilder, Dokumente, Videos und Audiodateien koennen an einem Ort verwaltet werden, ohne die Octoserv-Umgebung zu verlassen.
• Vollstaendige WordPress-Mediathek: Die gesamte Funktionalitaet der WordPress-Mediathek steht zur Verfuegung -- Raster- und Listenansicht, Drag-and-Drop-Upload, Bildbearbeitung, Dateiinformationen und Metadaten.
• Einfaches Hochladen: Neue Dateien koennen per Drag-and-Drop oder ueber den Upload-Dialog hochgeladen werden.
• Suchfunktion: Die integrierte Suche ermoeglicht das schnelle Auffinden von Dateien nach Dateiname, Titel oder Beschreibung.
• Bildbearbeitung: Bilder koennen direkt in der Mediathek zugeschnitten, skaliert und gedreht werden.
• Minimale Anpassung: Im Gegensatz zu anderen iFrame-Modulen wird die WordPress-Mediathek nur minimal angepasst (Ausblenden von Admin-Menue und -Bar), da die native Mediathek-Oberflaeche bereits ein modernes, eigenstaendiges Design verwendet.
• Automatische Ladeanzeige: Waehrend die Mediathek geladen wird, zeigt ein animierter Ladeindikator den Ladezustand an.

3. Detaillierte Funktionsbeschreibung

3.1 Technische Architektur

Die Medienverwaltung folgt dem gleichen technischen Muster wie die anderen iFrame-basierten Module:

1. Template-Datei: templates/media/list.php
2. iFrame-Einbettung: Die WordPress-Mediathek (upload.php) wird per iFrame geladen.
3. CSS-Injection: Nach dem Laden des iFrames wird per JavaScript CSS in das iFrame-Dokument injiziert.
4. Ladeanzeige: Eine Ladeanimation (Spinner) wird angezeigt, bis der iFrame vollstaendig geladen ist.
5. Fehlerbehandlung: Falls der iFrame nicht geladen werden kann, wird eine Fehlermeldung angezeigt.

3.2 Mediathek-Ansicht

Navigationspunkt: "Medien"
Seitentitel: "Medien"
iFrame-Quelle: upload.php (WordPress-Mediathek)
Hilfe-Schluessel: medien

Die Mediathek bietet zwei Ansichtsmodi:

Rasteransicht (Standard):

• Mediendateien werden als Vorschaubilder in einem Raster dargestellt.
• Beim Klick auf eine Datei oeffnet sich ein Detailbereich mit Dateiinformationen, Metadaten und Bearbeitungsoptionen.
• Bilder werden als Vorschau angezeigt; andere Dateitypen zeigen ein entsprechendes Dateisymbol.

Listenansicht:

• Mediendateien werden in einer Tabelle mit Spalten fuer Dateiname, Autor, Zugeordnet-zu-Beitrag, Kommentare und Datum angezeigt.
• Aktionen wie Bearbeiten, Loeschen und Anzeigen sind per Hover verfuegbar.

3.3 Verfuegbare Funktionen

Dateien hochladen:

• Ueber den "Hochladen"-Button oder per Drag-and-Drop koennen neue Dateien hinzugefuegt werden.
• Unterstuetzte Dateitypen: Bilder (JPG, PNG, GIF, SVG, WebP), Dokumente (PDF, DOC, XLS), Audio (MP3, WAV), Video (MP4, WebM) und weitere von WordPress unterstuetzte Formate.
• Die maximale Upload-Groesse wird durch die Server-Konfiguration bestimmt.

Dateien bearbeiten:

• Titel, Beschreibung, Alternativtext und Bildunterschrift koennen bearbeitet werden.
• Bilder koennen zugeschnitten, skaliert, gedreht und gespiegelt werden.
• Die Datei-URL kann kopiert werden, um sie in anderen Kontexten zu verwenden.

Dateien filtern:

• Nach Dateityp filtern (Bilder, Audio, Video, Dokumente).
• Nach Datum filtern (Monat/Jahr).
• Die Suchfunktion nutzen, um Dateien nach Name oder Beschreibung zu finden.

Dateien loeschen:

• Einzelne Dateien koennen ueber die Detailansicht oder die Listenansicht endgueltig geloescht werden.
• In der Listenansicht koennen Massenaktionen auf mehrere Dateien gleichzeitig angewendet werden.

3.4 CSS-Injection und Design-Anpassung

Im Vergleich zu den anderen iFrame-Modulen (Formulareditor, Videohub, Seiten, Blog) verwendet die Medienverwaltung eine deutlich schlankere CSS-Injection. Dies liegt daran, dass die WordPress-Mediathek bereits eine moderne, eigenstaendige Oberflaeche verwendet, die weniger Anpassung benoetigt.

Ausgeblendete Elemente:

Layout-Anpassungen:

Die Mediathek-eigenen Elemente (Raster, Vorschaubilder, Upload-Bereich, Detailansicht) werden nicht gesondert gestylt und verwenden ihr natives WordPress-Design.

3.5 Ladeverhalten

1. Die Seite wird geoeffnet. Ein Spinner mit dem Text "Einen Moment bitte. Die Ansicht wird geladen." wird angezeigt.
2. Der iFrame beginnt im Hintergrund zu laden (initial mit display: none).
3. Sobald das load-Event des iFrames ausgeloest wird, wird das minimale CSS injiziert.
4. Der Spinner wird mit einer sanften Ueberblendung (200ms Fadeout) ausgeblendet.
5. Der iFrame wird mit einer sanften Ueberblendung (200ms Fadein) eingeblendet.
6. Falls der iFrame nicht geladen werden kann, wird die Fehlermeldung "Fehler beim Laden der Mediathek. Bitte laden Sie die Seite neu." angezeigt.

4. Benutzerdokumentation / Anwendung

4.1 Mediathek aufrufen

1. In der Sidebar auf "Medien" klicken.
2. Die WordPress-Mediathek wird innerhalb der Octoserv-Oberflaeche geladen.
3. Alle vorhandenen Mediendateien werden angezeigt (standardmaessig in der Rasteransicht).

4.2 Neue Dateien hochladen

1. Unter "Medien" auf den "Hochladen"-Button klicken.
2. Option A: Dateien vom Computer per Drag-and-Drop in den Upload-Bereich ziehen.
3. Option B: Auf "Dateien auswaehlen" klicken und die gewuenschten Dateien im Dateiauswahldialog markieren.
4. Der Upload startet automatisch. Ein Fortschrittsbalken zeigt den Uploadstatus an.
5. Nach dem Upload erscheinen die Dateien in der Mediathek.

4.3 Dateien suchen und filtern

1. Die Suchleiste oben rechts nutzen, um nach Dateinamen, Titeln oder Beschreibungen zu suchen.
2. Ueber das Dropdown "Medientypen" nach Dateityp filtern (Bilder, Audio, Video, Dokumente).
3. Ueber das Dropdown "Alle Datumsangaben" nach dem Upload-Monat filtern.

4.4 Dateiinformationen bearbeiten

1. In der Rasteransicht auf eine Datei klicken, um die Detailansicht zu oeffnen.
2. Folgende Felder koennen bearbeitet werden:
   • Titel: Der Anzeigename der Datei.
   • Beschreibung: Ein ausfuehrlicher Beschreibungstext.
   • Alternativtext: Der Alt-Text fuer Bilder (wichtig fuer Barrierefreiheit und SEO).
   • Bildunterschrift: Text, der unter dem Bild angezeigt wird.
3. Die Aenderungen werden automatisch gespeichert.

4.5 Bilder bearbeiten

1. Eine Bilddatei in der Mediathek auswaehlen.
2. In der Detailansicht auf "Bild bearbeiten" klicken.
3. Verfuegbare Bearbeitungsoptionen:
   • Zuschneiden: Einen Bildausschnitt waehlen und uebernehmen.
   • Skalieren: Die Bildgroesse aendern (Breite und Hoehe).
   • Drehen: Das Bild um 90 Grad im oder gegen den Uhrzeigersinn drehen.
   • Spiegeln: Das Bild horizontal oder vertikal spiegeln.
4. Die Aenderungen speichern. Optional kann das Original beibehalten werden.

4.6 Datei-URL kopieren

1. Eine Datei in der Mediathek auswaehlen.
2. In der Detailansicht das Feld "URL" finden.
3. Die URL kopieren und in anderen Kontexten verwenden (z.B. in E-Mails, externen Systemen oder Custom-Code).

4.7 Dateien loeschen

1. In der Rasteransicht: Eine Datei auswaehlen und in der Detailansicht auf "Unwiderruflich loeschen" klicken.
2. In der Listenansicht: Bei der gewuenschten Datei auf "Endgueltig loeschen" klicken.
3. Fuer Massenloeschungen in der Listenansicht: Mehrere Dateien ueber Checkboxen auswaehlen, "Endgueltig loeschen" im Massenaktionen-Dropdown waehlen und "Uebernehmen" klicken.

Hinweis: Geloeschte Mediendateien werden nicht in einen Papierkorb verschoben, sondern sofort endgueltig geloescht. Falls die Datei in Beitraegen oder Seiten eingebunden ist, werden die entsprechenden Verweise ungueltig.

4.8 Fehlerbehebung

Falls die Mediathek nicht geladen werden kann und die Fehlermeldung "Fehler beim Laden der Mediathek. Bitte laden Sie die Seite neu." erscheint:

1. Die Seite im Browser neu laden (F5 oder Strg+R).
2. Sicherstellen, dass der aktuelle Benutzer ueber ausreichende Berechtigungen zum Verwalten von Mediendateien verfuegt.
3. Falls Uploads fehlschlagen, die maximale Upload-Groesse in der Server-Konfiguration pruefen.

5. Anwendungsbeispiele

Beispiel 1: Produktbilder fuer die Website hochladen

Ein Unternehmen hat neue Produktfotos erhalten und moechte diese auf der Website verwenden.

Vorgehen:

1. Unter "Medien" die Mediathek oeffnen.
2. Alle Produktbilder per Drag-and-Drop in den Upload-Bereich ziehen.
3. Nach dem Upload jedes Bild einzeln auswaehlen und aussagekraeftige Metadaten eingeben:
   • Titel: "Produkt X -- Frontansicht"
   • Alternativtext: "Produktname X in der Frontansicht, silberfarben, Modell 2026"
   • Beschreibung: Optional eine ausfuehrlichere Beschreibung.
4. Die Bilder koennen nun in Seiten und Blogbeitraegen ueber den Block-Editor eingefuegt werden.

Beispiel 2: PDF-Dokumente fuer den Download bereitstellen

Ein Unternehmen moechte Produktkataloge und Preiselisten als PDF zum Download anbieten.

Vorgehen:

1. Unter "Medien" die PDF-Dateien hochladen.
2. Jeder Datei einen sprechenden Titel geben (z.B. "Produktkatalog 2026", "Preisliste Q1 2026").
3. Die Datei-URL kopieren.
4. Auf der gewuenschten Seite (ueber "Seiten") einen Download-Button oder -Link mit der kopierten URL erstellen.
5. Bei aktualisierten Versionen die alte Datei loeschen und die neue hochladen -- oder die neue Datei unter einem anderen Namen hochladen und den Link aktualisieren.

Beispiel 3: Mediathek aufraeumen und organisieren

Die Mediathek hat sich ueber die Zeit mit vielen ungenutzten Dateien gefuellt.

Vorgehen:

1. Unter "Medien" die Mediathek oeffnen.
2. In die Listenansicht wechseln, um eine bessere Uebersicht zu erhalten.
3. Die Spalte "Zugeordnet zu" pruefen: Dateien ohne Zuordnung werden moeglicherweise nicht mehr verwendet.
4. Nicht mehr benoetigte Dateien ueber die Massenaktionen loeschen.
5. Bei verbleibenden Dateien die Metadaten aktualisieren (Titel, Alternativtext), um die Auffindbarkeit zu verbessern.
6. Regelmaessig die Mediathek pruefen, um nicht benoetigte Dateien fruehzeitig zu entfernen und Speicherplatz freizugeben.