Ein wichtiger Bestandteil einer responsiven Website sind responsive Bilder. In diesem Artikel lernen wir mehr über responsive Bilder im Web und wie man sie erstellt.

Als Beispiel verwenden wir die neue Komponente Gallery Pro.

Schritt 1

Gehe zum Tab „Hintergrund-Einstellungen“ und stelle „Benutzerdefinierter Hintergrund“ auf „Ja“.

Schritt 2

Nutze Bild-Thumbnails (Srcset), „Ja“.

Schritt 3

Lege die Breiten der Thumbnails fest. Gib die Breiten der Thumbnails in px an. Trenne mehrere Breiten mit einem Komma. (z. B. 300, 600, 1024) Für jede Breite wird ein Thumbnail erstellt und unter ../images/ui-themebuilder-thumb/[KOMPONENTENNAME]/ gespeichert.

Schritt 4

Wähle ein hochauflösendes Bild aus. Und speichere nun die Komponente / Seiteneinstellungen.

Der ui/Theme-Builder erstellt automatisch Thumbnails für responsive Bilder mit dem srcset-Attribut basierend auf der Bildbreite.