Skip to main content
Colofon
Submitted by Häßler on

Responsive Bilder in Drupal 8

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
WIDENARROW
srcsetphilo.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.

image-style

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.

scale
scale-add.svg

Die Liste der Bildstile – jetzt mit den responsiven Bildstilen Mobile x1, Mobile x2, Narrow und Wide.

responsive-types.svg

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.

responsive image styles

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).

responsive

Mehr zu responsiven Bildern in Drupal 8

Responsive Images for Media Entities in Drupal 8

GET IMAGE URL FROM MEDIA FIELD IN TWIG