Resposive Hintergrundbilder

Druckbare Version

27.03.2023, 17:31
albis

Resposive Hintergrundbilder

Hallo,

über DCA habe ich mir bei den Artikeln ein Option für ein Artikelbild erstellt:

PHP-Code:

... $GLOBALS['TL_DCA']['tl_article']['fields']['articleImage'] = array ( 'label' => &$GLOBALS['TL_LANG']['tl_article']['articleImage'], 'inputType' => 'fileTree', 'exclude' => true, 'eval' => array('fieldType'=>'radio', 'files'=>true, 'mandatory' => false, 'filesOnly'=>true, 'extensions'=>\Config::get('validImageTypes')), 'sql' => "blob NULL" ); ...

dieses kann ich nun auch zb. mittles

PHP-Code:

{{picture::<?= StringUtil::binToUuid($this->articleImage) ?>?size=1}}

aufrufen und das Picture Element inklusive der verschiedenen Bildgrößen aus der tl_image_size (ID 1) wird ausgegeben.

Code:

<picture> <source srcset="assets/images/1/startseite-f2101da9.png" media="(max-width: 640px)" width="640" height="300"> <source srcset="assets/images/b/startseite-c2442ffc.png" media="(max-width: 1024px)" width="860" height="336"> <source srcset="assets/images/e/startseite-9a39114b.png" media="(max-width: 1200px)" width="1050" height="336"> <source srcset="assets/images/4/startseite-1fe31047.png" media="(max-width: 1440px)" width="1210" height="336"> <source srcset="assets/images/b/startseite-184de48d.png" media="(max-width: 1920px)" width="1500" height="313"> <source srcset="assets/images/b/startseite-677f79ec.png" media="(max-width: 2800px)" width="1500" height="252"> <img src="assets/images/e/startseite-93683c85.png" alt="" width="1500" height="230"> </picture>

Gerne würde ich dieses nun aber als Hintergrundbild per CSS & media queries ausgeben lassen...

in etwa so:

Code:

<?php echo "<style type='text/css' media='screen'> @media (max-width: 2800px) { .mod_article.bgimage { background-image: url(". pfadangabe . "); } } @media (max-width: 1920px) { .mod_article.bgimage { background-image: url(". pfadangabe . "); } } @media (max-width: 1440px) { .mod_article.bgimage { background-image: url(". pfadangabe . "); } } @media (max-width: 1280px) { .mod_article.bgimage { background-image: url(". pfadangabe . "); } } @media (max-width: 1024px) { .mod_article.bgimage { background-image: url(". pfadangabe . "); } } @media (max-width: 640px) { .mod_article.bgimage { background-image: url(". pfadangabe . "); } } </style>"; ?>

Gäbe es eine Möglichkeit die Pfade aus dem "picture"-object in dem mod_article.html zu exrahieren...?
ähnlich eventuell wie beim PageImage modul von Terminal42
https://github.com/terminal42/contao...ckground.html5
27.03.2023, 22:12
BennyBorn

Mir fiele jetzt nur spontan ein einen eigenen Insert-Tag zu bauen und dann ein modifiziertes picture_default.html5 zu nutzen.

Einfacher wäre es aber vermutlich das Bild per CSS zu positionieren.
28.03.2023, 07:03
Fehrmann

Hi,

ich verwende meist einen Container um das picture-Element und positioniere diesen dann absolut. Zusätzlich dann object-fit für img damit das Element komplett ausgefüllt ist. Potentiell noch per z-index die Ebenenreihenfolge festlegen.

So kann ich ganz normal das Bildgrößen-Feature von Contao nutzen.

Viele Grüße
René
29.03.2023, 21:11
albis

vielen Dank für Eure Hinweise!

die Variante mit dem Container und der absoluten Positionierung wäre auch eine Möglichkeit aber für meinen Anwendungsfall ist die Einbindung als Hintergrundbild etwas kompfortabler...

Ich habe es nun wie folgt gelöst:

im "mod_article.html5" habe ich oben eingefügt:

PHP-Code:

<?php if ($this->articleImage): ?> {{picture::<?= StringUtil::binToUuid($this->articleImage) ?>?size=1&template=picture_background&class=bgimage_<?= $this->id ?>}} <?php endif; ?> . . .  <div class="<?= $this->class ?> bgimage_<?= $this->id ?> block"<?= $this->cssID ?><?php if ($this->style): ?> style="<?= $this->style ?>"<?php endif; ?>> . . .

Das Template "picture_default.hml5" habe ich als "picture_background.html5" angelegt und folgendes eingefügt (angelehnt an https://github.com/terminal42/contao...ckground.html5) welches dann in den <head> der Seite geschrieben wird:

PHP-Code:

<?php ob_start() ?> <style> <?= "." . $this->class ?> { background-image: url("<?= $this->img['src'] ?>"); background-repeat: no-repeat; background-position: center bottom; } <?php foreach ($this->sources as $source): ?> @media <?= $source['media'] ?> { <?= "." . $this->class ?> { background-image: url("<?= $source['srcset'] ?>"); } } <?php endforeach ?> <?= $this->id ?> </style> <?php $GLOBALS['TL_HEAD'][] = ob_get_clean() ?>

durch das Übergeben von der "class"

Code:

bgimage_<?= $this->id ?>

können auch mehrere Elemente dieser Art auf einer Seite patziert werden.

Damit es mit den @media - Größen funktioniert, müssen die Bildgrößen (Themes > Bildgrößen) je nach Anweisung in der richtigen Reihenfolge angelgt werden... ggf. einmal umsortieren.

vielen Dank an BennyBorn für Tipp!!