Responsive Bilder mit Drupal 8 sind kein Glanzstück, sondern "fiddle" – Fummelei. Responsive Bilder funktionieren nur bei Bildern, die als Felder eines Inhaltstyps angelegt sind. Für Inline-Bilder braucht Drupal selbst in Version 8.9 immer noch ein Modul.
Breakpoints setzen (mytheme.breakpoints.yml)
CSS Breakpoints setzen Grenzen für die Darstellung der Inhalte und die Größe von Medien für kleine Geräte. Eine sequentielle Darstellung und kleinere Bildgrößen sorgen für lesbaren Inhalt auf den kleinen mobilen Geräten und kleinere Medien (Bilder, Video) reduzieren die Ladezeit und den Datentransfer auf Handys und Tablets.
Der erste Schritt zu Breakpoints in Drupal ist die Datei mytheme.breakpoints.yml im Verzeichnis des Themes.
sand.mobile:
label: mobile
mediaQuery: ''
weight: 0
multipliers:
- 1x
- 2x
sand.narrow:
label: narrow
mediaQuery: 'all and (min-width: 720px) and (max-width: 1259px)'
weight: 1
multipliers:
- 1x
- 2x
sand.wide:
label: wide
mediaQuery: 'all and (min-width: 1260px)'
weight: 2
multipliers:
- 1x
- 2x
| WIDE | NARROW | |
| srcset | philo.jpg 325w, // Viewport bis zu 325px philo.jpg 650w, // Viewport bis zu 650px philo.jpg 1300w, // Viewport bis zu 1300px philo.jpg 2300w" // Viewport mit 2300px // Viewport bis zu 325px | colofon_1.jpg 325w, // Viewport bis zu 325px colofon_1.jpg 650w, // Viewport bis zu 650px colofon_1.jpg 1300w // Viewport mit 2300px und größer |
| sizes | (min-width: 1290px) 1290px, 100vw | (min-width: 1290px) 325px, (min-width: 851px) 25vw, (min-width: 560px) 50vw, 100vw" |
Stile für Responsive Bilder anlegen (Konfiguration > Bildstile)
Da in mytheme.breakpoints.yml drei Breakpoints vereinbart sind, und der Breakpoint Mobile für einfache und zweifache Auflösung definiert ist, brauchen wir vier zusätzlich Bildstile. Für mittelgroße und große Monitore habe ich keine Retina-Auflösung mit Faktor -2x vorgesehen. Ob auch große Retina-Monitore vorgesehen sind ist eine Frage des Zielpublikums.
Zusätzlich zu den vorhandenen Bildstilen werden Unter Configuration > Image Styles neue responsive Bildstile angelegt.
Ein Shop für Schmuck würde z.B. von der hohen Auflösung profitieren, wenn wir davon ausgehen, dass die Besucher häufig mit Retina-Monitoren surfen.
Unter Scale die maximale Abmessung von Bildern auf mobilen Geräte eingeben: Bei x1 – einfacher Auflösung – 720px für die Breite. Das Feld Höhe bleibt leer.
Für die Retina-Auflösung x2 die doppelte maximale Größe (1440px) wählen. Das Feld Höhe bleibt wieder leer.
Die Liste der Bildstile – jetzt mit den responsiven Bildstilen Mobile x1, Mobile x2, Narrow und Wide.
Responsive Bildstile zu vorhandenen Bildstilen hinzufügen (Konfiguration / Medien / Responsive Bildstile)
Wenn alle Breakpoints vorbereitet sind, wieder auf Konfiguration / Medien / Responsive Bildstile und Add responsive image style.
Unter Breakpoint group das Theme der Seite wählen. Das spielt die speziell angelegten responsiven Stile automatisch ein.
Als Fallback image style das kleinste Format wählen – hier Mobile x1 (720px).