Image Einbindungs Demo
Concrete CMS greifft auf verschiedene Einstellungen im Backend zurück um die Bildausgabe zu steuern:
- Bildeinstellungen die den upload/ die Aufbereitung der Originalbilder steuern.
80% Qualität, max 1600 x 1200 - Allgemeine Vorschaubildoptionen bestimmen das Format und die generierungs- Methode.
synchron, JPEG bevorzugt - Bei Nutzung von AfexiaWebp kann .webp via DynamicThumbnail Helper verwendet werden.
- In Image Komponenten hinterlegte Responsive Image Map entspricht den min-width Werten der entsprechenden BS Viewports:
'xxl' => '1400px', 'xl' => '1200px', 'lg' => '992px', 'md' => '768px', 'sm' => '576px', 'xs' => '0', - Im Backend definierte Vorschaubildtypen
Image Block - Full Size
| Pros | Cons |
| simpel | nicht Responsive |
| minimaler Resourcenbedarf |
kein Vorschaubild |
| kein LazyLoading |
Image in Content:
Unterbunden per Content- Block Control Settings
Image in Hero Block - simple
Simple Methode mit Originalbild
| Pros | Cons |
| simpel | nicht Responsive |
| minimaler Ressourcenbedarf |
kein Vorschaubild |
| kein LazyLoading |
Image in Hero Block - Einzelnes Vorschaubild
Eine ähnliche Methode wurde bisher vom BBT Block verwendet.
| Pros | Cons |
| simpel | nicht Responsive |
| kleiner Ressourcenbedarf |
kein definiertes Vorschaubild |
|
Thumbnail u.U. zu klein für andere Seitentepmplates |
|
| kein LazyLoading |
Image in Herlo Block - Responsive - Im Template definiert
Image Srcset mit mehreren Vorschaubildern die im Template codiert sind
| Pros | Cons |
| Responsive | aufwändige Einbindung |
| pro Template exakt stimmende Vorschaubilder |
kein manipulierbares Vorschaubild |
|
viele Vorschaubilder uU. mit ähnlichen grössen |
|
| kein LazyLoading | |
| hoher Ressourcenbedarf |
Image in Hero Block - Responsive - Theme/ System definiert
Image Srcset mit mehreren Vorschaubildern die im "global" im Theme definiert sind.
| Pros | Cons |
| einfache Einbindung | Vorschaubilder unpassend für die meisten Situationen |
| Responsive | Nur Responsive ODER LazyLoading |
| Im Backend definierbare Vorschaubilder |
|
| LazyLoading einfach erweiterbar |
Image in Hero Block - Responsive vue.js Komponente und automatisierte Thumbnail Auswahl
Responsive vue.js Komponente in Kombination mit Dynamischem Thumbnail Endpoint
| Pros | Cons |
| einfache Einbindung | ggf. lange Ladezeiten, schlimmer je mehr Vorschaubilder vorhanden sind |
| Responsive | hoher Ressourcenbedarf |
| Gut passende Thumbnails in jeder Situation | Fehleranfälliger Frontend Code |
| Im Backend bearbeitbare Vorschaubilder |
|
| LazyLoading |
Image in Hero Block - Responsive vue.js Komponente mit vorgegebenen Vorschaubildern und Viewports
| Pros | Cons |
| Responsive | Nur definierte Vorschaubilder |
| Gut passende Thumbnails in jeder Situation | |
| Im Backend bearbeitbare Vorschaubilder | |
| LazyLoading |
|
Image Block - Standardverhalten: