Michael Schiemer
5050c7d73a
- Move 12 markdown files from root to docs/ subdirectories - Organize documentation by category: • docs/troubleshooting/ (1 file) - Technical troubleshooting guides • docs/deployment/ (4 files) - Deployment and security documentation • docs/guides/ (3 files) - Feature-specific guides • docs/planning/ (4 files) - Planning and improvement proposals Root directory cleanup: - Reduced from 16 to 4 markdown files in root - Only essential project files remain: • CLAUDE.md (AI instructions) • README.md (Main project readme) • CLEANUP_PLAN.md (Current cleanup plan) • SRC_STRUCTURE_IMPROVEMENTS.md (Structure improvements) This improves: ✅ Documentation discoverability ✅ Logical organization by purpose ✅ Clean root directory ✅ Better maintainability
Media Modul
Dieses Modul verwaltet Bilder und erstellt optimierte Varianten für responsive Webseiten.
Hauptfunktionen
- Automatische Erstellung von Bildvarianten in verschiedenen Größen und Formaten (AVIF, WebP, JPEG)
- Hochwertige Bildoptimierung mit ImageMagick (oder GD als Fallback)
- Responsive Bildausgabe mit HTML Picture-Element und Source-Sets
Verwendung
Erzeugen von Bildvarianten
// Direkter Zugriff (automatische Erkennung der besten Implementierung)
$processor = new ImageProcessor();
// Alle Varianten
$variants = $processor->createAllVariants($image);
// Nur bestimmte Typen
$thumbnails = $processor->createVariantsForType($image, ImageVariantType::THUMBNAIL);
// Alternativ via DI Container
$processor = $container->get(ImageProcessorInterface::class);
Spezifische Implementierungen
// ImageMagick direkt verwenden
$imagickProcessor = new ImagickImageProcessor();
$variants = $imagickProcessor->createAllVariants($image);
// Oder GD
$gdProcessor = new GdImageProcessor();
$variants = $gdProcessor->createAllVariants($image);
// Factory für automatische Auswahl
$optimalProcessor = ImageProcessorFactory::create();
HTML für responsive Bilder generieren
$generator = new ImageSourceSetGenerator();
// Einfache Verwendung
$html = $generator->generatePictureElement($image, 'gallery');
// Mit zusätzlichen Attributen
$html = $generator->generatePictureElement($image, 'hero', [
'alt' => 'Beschreibung des Bildes',
'class' => 'hero-image',
'loading' => 'lazy',
]);
Konfiguration
Die Konfiguration der Bildgrößen und -formate erfolgt über Enums:
ImageVariantType: Definiert die Verwendungszwecke (Thumbnail, Gallery, Hero)ImageSize: Definiert die verfügbaren Größen und deren BreakpointsImageFormat: Definiert die unterstützten Formate und deren Qualitätseinstellungen
Architektur
ImageProcessorInterface: Gemeinsame Schnittstelle für alle ProzessorenImagickImageProcessor: Hochwertige Optimierung mit ImageMagickGdImageProcessor: Fallback-Implementierung mit GDImageProcessor: Adapter für einfachen Zugriff und AbwärtskompatibilitätImageProcessorFactory: Erstellt optimale Implementierung basierend auf verfügbaren Extensions
Technische Details
- Automatische Auswahl zwischen ImageMagick und GD je nach Verfügbarkeit
- Optimierte Kompression für jedes Format
- Intelligente Schärfung bei Verkleinerung
- Erhaltung von Transparenz bei unterstützten Formaten
Beispiel: Vollständiges HTML-Ausgabe
<picture>
<source type="image/avif" srcset="image_gallery_small.avif 400w, image_gallery_medium.avif 800w, image_gallery_large.avif 1200w" sizes="(max-width: 768px) 400px, (max-width: 1024px) 800px, 1200px">
<source type="image/webp" srcset="image_gallery_small.webp 400w, image_gallery_medium.webp 800w, image_gallery_large.webp 1200w" sizes="(max-width: 768px) 400px, (max-width: 1024px) 800px, 1200px">
<source type="image/jpeg" srcset="image_gallery_small.jpeg 400w, image_gallery_medium.jpeg 800w, image_gallery_large.jpeg 1200w" sizes="(max-width: 768px) 400px, (max-width: 1024px) 800px, 1200px">
<img src="image_gallery_medium.jpeg" width="800" height="600" alt="Beschreibung" loading="lazy">
</picture>