Guten Tag
Nach langem probieren wende ich mich nun doch an euch. Ich möchte das Newsbild, welches im news_full.html5 normalerweise so aufgerufen wird:
Als responsiv Hintergrundbild ausgeben. Also so wie im customelement_headerimage.html5 Template. Mit folgendem Code kann ich zwar Titel, Unterüberschrift und alle Inhaltselemente ausgeben, das Newsbild bekomme ich aber nicht hin.
Ich bin leider noch unerfahren im Umgang mit Contao. Aber vielleicht könnt ihr mir da auf die Sprünge helfen.
Danke und Gruss Dave
Nach langem probieren wende ich mich nun doch an euch. Ich möchte das Newsbild, welches im news_full.html5 normalerweise so aufgerufen wird:
PHP-Code:
<?php if ($this->addImage): ?>
<?php $this->insert('image', $this->arrData); ?>
<?php endif; ?>
Als responsiv Hintergrundbild ausgeben. Also so wie im customelement_headerimage.html5 Template. Mit folgendem Code kann ich zwar Titel, Unterüberschrift und alle Inhaltselemente ausgeben, das Newsbild bekomme ich aber nicht hin.
HTML-Code:
<?php /** * Template: news_full_headerimage.html5 * Beschreibung: Variante des news_full Templates mit Hintergrundbild statt <img> */ $GLOBALS['TL_CSS'][] = 'files/cto_layout/css/customelements/ce_headerimage.css|static'; $container = \Contao\System::getContainer(); $projectDir = $container->getParameter('kernel.project_dir'); $staticUrl = $container->get('contao.assets.files_context')->getStaticUrl(); // --- Bild vorbereiten --- $strImage = ''; if ($this->addImage && $this->singleSRC) { $objFile = \Contao\FilesModel::findByUuid($this->singleSRC); if ($objFile !== null && is_file($projectDir . '/' . $objFile->path)) { $size = $this->imgSize ?: array(); $size = \Contao\StringUtil::deserialize($size); $objPicture = $container->get('contao.image.preview_factory')->createPreviewPicture( $projectDir . '/' . $objFile->path, $size ); $sources = $objPicture->getSources($projectDir, $staticUrl); $strImage = $objPicture->getImg()['src']; // Responsive CSS (Media Queries) $arrMediaQueries = []; foreach ($sources as $data) { if (!isset($data['media']) || !$data['media']) { continue; } $arrMediaQueries[] = '@media ' . $data['media'] . ' { .news_headerimage_' . $this->id . ' { background-image:url(' . $data['src'] . ') !important; } }'; } // Fallback-Bild (ohne media) foreach ($sources as $data) { if (!isset($data['media']) || strlen($data['media']) < 1) { $strImage = $data['src']; } } if (count($arrMediaQueries) > 0) { $GLOBALS['TL_HEAD'][] = '<style>' . implode("\n", $arrMediaQueries) . '</style>'; } } } ?> <div class="layout_full block<?= $this->class ?>"> <?php if ($strImage): ?> <div class="news_headerimage_<?= $this->id ?> mod_news_headerimage" style="background-image:url(<?= htmlspecialchars($strImage) ?>); background-size:cover; background-position:center; height:400px;"> <?php if ($this->headline): ?> <div class="ce_headerimage_inside"> <h1><?= $this->headline ?></h1> </div> <?php endif; ?> </div> <?php endif; ?> <div class="news_content_inside"> <?= $this->text ?> </div> </div>
Danke und Gruss Dave

Kommentar