Bildgrößen -/ Responsive Images- Feature

[Tim]

Hi,
mit Contao 3.4 wurde das "Bildgrößen" Feature in Contao eingeführt. Ob die Art der techn. Umsetzung im Frontend mit zusätzlichem Javascript zum Tauschen von Bildern in Zeiten von CSS MediaQueries und CSS3 gut oder eher "oldschool" ist, sei dahin gestellt.
Jetzt kam öfter die Frage auf warum einige CustomElements dieses schöne Feature nicht einsetzen. Die erste Frage ist dann natürlich immer "wird es unterstützt und waurm ist es nicht drin?".

Ja, CustomElements und natürlich die Contao-eigenen Templates unterstützen dieses Feature. Wie auch in Contao selbst, muss es ggf. direkt angesprochen werden.

In Contao Templates ist es allgemein mit der $this->picture Variable abzurufen:

<?php $this->insert('picture_default', $this->picture); ?>

In CustomElements kann jedes Bild direkt über die ->html() Methode ausgegeben werden. Hier wird das Feature berücksichtigt:

<?php echo $this->field('myImage')->html(); ?>

Jetzt stellt sich die Frage warum warum einige CustomElements dieses Feature NICHT direkt unterstützen (in diesen CEs ist auch standardmäßig die Größeneinstellung nicht aktiv für Bilder. Nur die Auswahl). z.B. das Parallax Element.

Die Antwort ist einfach. Contao erstellt ein reines <img> Element mit einem srcset Attribute.

Beispiel:

 <img src="[URL="http://forum.premium-contao-themes.com/core/view-source:http://dev.contao3-5:8888/assets/images/9/Agave_1024-9d2239a9.jpg"]assets/images/9/Agave_1024-9d2239a9.jpg[/URL]" srcset="assets/images/9/Agave_1024-9d2239a9.jpg 1x, assets/images/0/Agave_1024-617e80d0.jpg 2x" width="100" height="100" alt="">

Das "polyfill" Javascript tauscht jetzt das eigentliche "src" Attribut gegen die Quellen im srcset Attribut. Einige Browser unterstützen das nativ für andere wird das Javascript als Fallback benötigt. Siehe: http://caniuse.com/#feat=srcset

Wann welches Bild gesetzt wird, obliegt allerdings weiterhin dem Benutzer. -> der Browser entscheidet nicht.

Doch warum nutzt das nicht jedes Element. Es ist doch so einfach?

Zurück zum Parallax-Element:
Das Parallax-Element benötigt ein CSS background-image um CSS3 background-Manipulationen nutzen zu können z.B. background-size. Mit einem realen <img> Element ist das Element techn. nicht umsetzbar.

Fassen wir zusammen:

• Das "Responsive" Bilder Feature ist bestens geeignet für reale Bilddaten und Contao weit einsetzbar. CustomElements unterstützt das Feature.
• Elemente, nicht zwingend CustomElements, wo Bilder per CSS gesetzt werden, können nur die Bildquelle darstellen, nicht aber ein "srcset", da dieses Attribut bislang nur in einem <img> Element Anwendung findet. Das dynamische Tauschen der Bilder kann hier natürlich über reale CSS MediaQueries geschehen. Javascript wird dann nicht benötigt als Fallback.

Wer selbst Elemente mit background-image stylt wird bereits gemerkt haben, dass das Bildgrößen-Feature hier nicht bzw. nur für das Quellbild anwendbar ist. Contao kann leider nicht vor dem Ausliefern des Bildes schauen welche Auflösung der jeweilige Betrachter des Frontends gerade fährt. (hier kommt Javascript ins Spiel). Daher existiert das srcset Attribute. Es ist quasi eine Bibliothek. Leider kostet das Befüllen dieser Bibliothek zusätzliche Ressourcen (jede Bildvorlage eines Quellbildes erzeugt eine reale Bilddatei)


Viele Grüße,
Tim

[Tim]

Noch ein kleiner nachtrag, wenn man für sind CSS oder inline-CSS auf ein Bild aus einer "Responsive" Bildvorlage zurückgreifen möchte.

Die Image Klasse von Contao kann dafür direkt angesprochen werden. Hier für ein Bild-Attribute mit dem lesbaren Alias "bild".

<?php
$responsiveImage = 1; // id des resp. image datensatzes
$path = \FilesModel::findByUuid( $this->field('bild')->value() )->path;
$image = \Image::get($path,'','',$responsiveImage);

echo $image; // reiner bildpfad

?>

Auch das ist möglich:

<?php // bild erstellem mit picture_ Template
    $arrData['singleSRC'] = \FilesModel::findByUuid( $this->field('bild')->value() )->path;
    $arrData['size'] = $this->field('bild')->optionvalue('size'); // Bildgrößenvorgabe in den Attribut-Einstellungen
    $this->addImageToTemplate($this,$arrData);
    $this->insert('picture_default',$this->picture);    // komplettes <img> element
    ?>

[SpeGal]

Schon ein Weilchen her, aber hier passt es vermutlich am besten:

Im neuen Eclipse wird im Template customelement_bgimage_start das Hintergrundbild als Style als Hintergrundbild eingebunden. Dadurch greift die Bildgrößeneinstellung nicht mehr die man eigentlich im Backend sogar für das Element einstellen kann. Früher hat das gegriffen, jetzt aber nicht mehr. Wurde das früher evtl, als img eingebunden?

Grade bei dem Headerbild wäre es hilfreich, wenn es in verschiedenen Bildgrößen usw. ausgeliefert werden könnte. Ist hier was zu machen?

[Tim]

Schon ein Weilchen her, aber hier passt es vermutlich am besten:

Das ist ein über 8 Jahre alter Thread!
---
Nicht ganz so lange, aber zumindest so lange, dass ich nicht mehr weiss seit welcher EX Version, werden an dieser Stelle MediaQueries gesetzt im Template, wenn das gewählte Bild eine Resp. Bildgröße nutzt.

Seit 2020: https://forum.premium-contao-themes....7780#post17780