93 lines
3.2 KiB
Markdown
93 lines
3.2 KiB
Markdown
# 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
|
|
|
|
```php
|
|
// 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
|
|
|
|
```php
|
|
// 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
|
|
|
|
```php
|
|
$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 Breakpoints
|
|
- `ImageFormat`: Definiert die unterstützten Formate und deren Qualitätseinstellungen
|
|
|
|
## Architektur
|
|
|
|
- `ImageProcessorInterface`: Gemeinsame Schnittstelle für alle Prozessoren
|
|
- `ImagickImageProcessor`: Hochwertige Optimierung mit ImageMagick
|
|
- `GdImageProcessor`: Fallback-Implementierung mit GD
|
|
- `ImageProcessor`: Adapter für einfachen Zugriff und Abwärtskompatibilität
|
|
- `ImageProcessorFactory`: 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
|
|
|
|
```html
|
|
<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>
|
|
```
|