Hallo Zusammen,
ich möchte gerne das <picture>-Element manuell in einem Template verwenden.
Hierzu habe ich folgenden code eingebunden:
PHP-Code:
$objFile = FilesModel::findByUuid($page_image); //Bilddaten über uuid holen
$picture = \Picture::create($objFile->path, 1)->getTemplateData(); //Bildgröße aus Themes setzen -> ID = 1
$picture['alt'] = specialchars($page_name);//alt-tag setzen
$picture['title'] = specialchars($page_name);//title-tag setzen
$picture=$this->insert('picture_default', $picture);
Dies ergibt dann folgende Ausgabe:
HTML-Code:
<picture>
<source media="(max-width: 600px)" srcset="assets/images/e/ballonfahrten-036b9dde.jpg"></source>
<source media="(max-width: 2000px)" srcset="assets/images/7/ballonfahrten-ad479ed7.jpg"></source>
<img title="Seite 1" alt="Seite 1" sizes="(max-width: 600px) 100vw, (max-width: 900px) 60vw, 500px" srcset="assets/images/5/ballonfahrten-14590185.jpg 100w, assets/images/8/ballonfahrten-c5d48f78.jpg 150w, assets/images/c/ballonfahrten-8ca75dfc.jpg 200w" src="assets/images/5/ballonfahrten-14590185.jpg">
</picture>
<script> window.respimage && window.respimage({ elements: [document.images[document.images.length - 1]] }); </script>
Soweit, so gut.
Nun gelingt es mir nicht, um das <picture> -Element divs oder ein figure herum zu bauen.
Im Template sieht das Ganze so aus:
PHP-Code:
echo '<div class="bb_teaser">';
echo '<figure>';
$this->insert('picture_default', $picture);
echo '</figure>';
echo '<a class="headline" title="'.$page_name.' anzeigen" href="'.$page_alias.'">'.$page_name.'</a>';
echo '<p class="teaser">';
echo $page_teaser.'<br>';
echo '<a class="button" title="'.$page_name.' anzeigen" href="'.$page_alias.'">'.$page_name.'</a>';
echo '</p>';
echo '</div>';
Das Ganze führt allerdings dann zu folgender Ausgabe im FE:
HTML-Code:
<picture>
<source media="(max-width: 600px)" srcset="assets/images/e/ballonfahrten-036b9dde.jpg"></source>
<source media="(max-width: 2000px)" srcset="assets/images/7/ballonfahrten-ad479ed7.jpg"></source>
<img title="Seite 1" alt="Seite 1" sizes="(max-width: 600px) 100vw, (max-width: 900px) 60vw, 500px" srcset="assets/images/5/ballonfahrten-14590185.jpg 100w, assets/images/8/ballonfahrten-c5d48f78.jpg 150w, assets/images/c/ballonfahrten-8ca75dfc.jpg 200w" src="assets/images/5/ballonfahrten-14590185.jpg">
</picture>
<script> window.respimage && window.respimage({ elements: [document.images[document.images.length - 1]] }); </script>
<div class="bb_teaser">
<figure></figure>
<a class="headline" href="elementchecker/seite-1.html" title="Seite 1 anzeigen">Seite 1</a>
<p class="teaser">teaser<br><a class="button" href="elementchecker/seite-1.html" title="Seite 1 anzeigen">Seite 1</a></p>
</div>
Contao scheint nun die Ausgabe neu zu rendern.
Mir will es nicht gelingen, das <picture>-Element in das <figure>-Element zu bringen
Hat hier jemand eine Idee?
mfg
Hauge
Lesezeichen