Responsive Images bei CE Headerbild (und generell ;-))

[Brubbel]

Moin Forum,

wir nutzen die Bildgrößenskalierung von Contao, um für für verschiedenen Bildschirmbreiten, eine entsprechend verkleinerte Bildversion an den Browser ausliefern zu können. Das funktioniert soweit auch gut und wie es soll.
An einer Stelle haben wir ein Hintergrundbild und ich wollte es dafür genauso einsetzen aber mit dem Default-Template des Inhaltselementes will es bei uns nicht so recht klappen. Es wird immer nur das Bild der Defaultgröße für die Skalierung, hier ausgegeben:

style="background-image: url(<?php echo $this->field(image')->generate(); ?>);"

.. und das ist dann auf der vollen Bildschirmbreite zwar schön klein aber natürlich auch entsprechend verpixelt ;-)

Was übersehe ich in der Anwendung?

[Tom]

Hi!

Es braucht hier etwas mehr als nur das Bild auszugeben.
Schau dir am Besten mal das Template customelement_headerimage.html5 im Bereich // responsive images an. Das macht es bereits vor.

Schöne Grüße
Thomas

[Brubbel]

Moin Tom, danke Dir für die schnelle Antwort. Das in dem Template habe ich natürlich auch gesehen. Da ist aber (nur bei mir?) der Wurm drin.
Das Bildobjekt wird schon richtig gebildet und ich sehe auch alle korrekten Pfade im [srcset] aber

$arrPicture['sources']

ist leer und dann geht es wohl nicht richtig weiter...

Ich dachte ich mache jetzt vielleicht noch irgendwas falsch und bevor ich wieder selber anfange mir den richtigen Pfad aus dem srcset herauszufummeln, wollte ich doch mal nachfragen ;-)

Funktioniert es denn bei allen anderen? Ich habe das mal in einer komplett anderen Installation mit Eclipse X3 und 4.9 angeschaut und da geht es auch nicht wie erwartet. Es wird immer nur das Defaultbild genommen.

Das Bildgrößenelement würde ich mal als Fehlerquelle ausschließen wollen. Es funktioniert bei normalen Bildelementen 100% richtig und das mache ich eigentlich auch schon immer so und es gab danie Probleme. Aber für background-image klappt es (bei mir) nicht :-/

[Tom]

Kann es sein dass hier $this->field('image')->value() nicht an dein Feld angepasst ist?

[Tom]

Funktioniert es denn bei allen anderen? Ich habe das mal in einer komplett anderen Installation mit Eclipse X3 und 4.9 angeschaut und da geht es auch nicht wie erwartet. Es wird immer nur das Defaultbild genommen.

Ich habe hier die aktuelle Theme Version getestet. Das CE Headerimage gibt das sauber aus.

[Brubbel]

Kann es sein dass hier $this->field('image')->value() nicht an dein Feld angepasst ist?

Nee, dann würde ja gar nix ausgegeben werden. Das ist schon korrekt eingestellt und wie gesagt, das Picture Objekt hat ja auch alle Details zum Bild.

[Brubbel]

Ich habe hier die aktuelle Theme Version getestet. Das CE Headerimage gibt das sauber aus.

Hm, wäre es vermessen zu fragen, ob Du evtl. 3 Screenshots posten könntest:

- Einstellungen Bildgrößenelement Backend
- Bildauswahl Headerimage Backend
- (Browser)Debuggerausschnitt von aktuellen Wert element.style {background-image: ...} wie hier:

[Tom]

Hier die Screenshots.

[Tom]

Nee, dann würde ja gar nix ausgegeben werden. Das ist schon korrekt eingestellt und wie gesagt, das Picture Objekt hat ja auch alle Details zum Bild.

Es sind 2 paar Schuhe. Einmal das <?php echo $this->field('image')->generate(); ?> was das Bild ausgibt.

Und dann der Script für die Responsive-Funktion:

<?php // responsive images
$objFile = \Contao\FilesModel::findByPk( $this->field('image')->value() );
if( $objFile !== null )
{
$objPicture = \Contao\Picture::create($objFile->path,deserialize( $this->field('image')->option('size') ) );
$arrMediaQueries = array();
if( $objPicture !== null )
{
$arrPicture = $objPicture->getTemplateData();

foreach($arrPicture['sources'] ?: array() as $data)
{
if( strlen($data['media']) < 1 )
{
continue;
}
$arrMediaQueries[] = '@media '.$data['media'].' { .ce_headerimage_'.$this->id.' { background-image:url('.$data['src'].') !important; } }';
}
}
if( count($arrMediaQueries) > 0 )
{
$GLOBALS['TL_HEAD'][] = '<style>'.implode("\n",$arrMediaQueries).'</style>';
}
}
?>

[Tim]

Wie Thomas schon sagt. Es kommt auf den Anwendungsfall an.

Fall 1: Möchte man ein Resp. Image (Polyfill image) ausgeben via generate(), fehlt die Übergabe der Bildgrößen-Quelle. Contao unterscheidet anhand des Bildgrößen Wertes ob die Bildgröße ein Datensatz seiner Responsive Images ist. Im Falle eines Resp. Images Datensatzes wird das <img> inkl. der weiteren sources ausgegeben.

->generate() erlaubt optional den Bildgrößen-Werte-Array.

Siehe: https://forum.premium-contao-themes....blen#post24855

---
Fall 2: (Bild ist background-image): Das Script oben ist ein CSS-MedaQuery Hack für Elemente, die Ihr Bild als background-image platzieren. Hier generiert generate() nur das Hauptbild und ein MediaQuery mit den anderen Bild-Quellen wird in den Head geschrieben.

[Brubbel]

Moin, vielen Dank, Thomas, für die Screenshots. Daran sieht man den Unterschied. Wir benutzen bei den Bildgrößen i.d.R, nur den Skalierungsmodus am Bildgrößenelement und keine gesonderten Unterelemente für zusätzliche MediaQueries wie bei euch. Wenn ich das entsprechend umbaue, dann funktioniert es auch bei uns.

Tim, danke, der Fall 1 ist klar. Für den jetzt hier benötigten Fall 2 war mir nicht klar, dass man die MediaQueries gesondert anlegen musste. Daher die Verwirrung. So 100% Sattelfest bin ich leider nicht bei der Entscheidung wo man die Queries anwendet. Wie gesagt, wir/ich mache es immer so, dass ich es direkt im Element über die Skalierung steuere. Damit hat man ja auch alle Umschaltpunkte im Griff, Ich hatte mal irgendwann "gelernt", dass man die Anlage von MediaQueries mittels eigener Query-Elemente, nur für die Art-Direction braucht. Verwenden wir bisher nur in Ausnahmefällen. Die "Standardanwendung" über Skalierung berücksichtigt das obige Script leider nicht. Obwohl alle erforderlichen Angaben ja auch darüber im Picture-Objekt vorhanden sind.

Kannst du evtl. ganz kurz erklären, warum man die Queries so wie von Dir verwendet, einsetzen sollte? Evtl. wäre es eine Idee, den Fall der reinen Skalierungsnutzung im Script zu berücksichtigen?

Danke schön und VG

[Tim]

Kannst du evtl. ganz kurz erklären, warum man die Queries so wie von Dir verwendet, einsetzen sollte? Evtl. wäre es eine Idee, den Fall der reinen Skalierungsnutzung im Script zu berücksichtigen?

Das Prinzip kann in jedem Bild-Element genutzt werden oder CE, das ein Bild-Feld ausgibt und in den Bildgrößen auf einen Resp. Image Datensatz zurückgreift. Es wird direkt das Files-Model angesprochen und damit ein Picture Objekt erzeugt Gleiches Prinzip nutzt auch der RevolutionSlider für dessen Hintergrundbilder.

Thomas Beispiel ist direkt aus dem Hintergrundbild CE. Wichtig ist, dass man die dyn. CSS-Klassen vielleicht je Element etwas angleicht, damit sich nichts überschreibt und natürlich auf passende Klassen achtet im MediaQuery, damit das richtige Element angesprochen wird.