Responsive Images

Einführung

Grundsätzlich können Bilder auf 2 verschiedene Arten eingebunden werden:

Variante 1 - Inhaltsbilder
Diese werden als <img> bzw. mit dem Tag <source srcset="" media=""> im Source-Code ausgegeben. Diese Möglichkeit ist in Contao erst ab der Version 4.9 verfügbar.

Variante 2 - CSS-Hintergrundbilder 
Eclipse bietet als erstes Theme die Möglichkeit CSS-Hintergrundbilder in Kombination mit Contaos-Bildgrößen zu verwenden. CSS-Hintergrundbilder werden mit Hilfe von Media-Queries für die jeweiligen Endgeräte ausgegeben. 

Schritt 1

Themes > Eclipse > Bildgrößen bearbeiten

Schritt 2

Eine neue Bildgröße erstellen

Schritt 3

Bildgröße definieren.
(Die Bildgröße richtet sich nach der gewünschten Bildgröße für die Desktop-Ansicht)

Schritt 4

Bildgröße bearbeiten

Schritt 5

Ein neues Media-Query anlegen

Schritt 6

Media-Query: (max-width: 767px)
Breite: 767

Schritt 7

Die definierte Bildgröße kann nun bei jedem Bildelement gewählt werden.

Info: Es können weitere Bildgrößen angelegt werden, sollten unterschiedliche Bildgrößen im Frontend gewünscht sein.

Schritt 1

Themes > Eclipse > Bildgrößen bearbeiten

Schritt 2

Bildgröße bearbeiten

Schritt 3

Ein neues Media-Query anlegen

Schritt 4

Media-Query: (max-width: 767px)
Breite: 767

Schritt 5

Bei den gewüschten Inhaltselementen kann nun die Bildgröße gewählt werden.