$this->insert('picture_default', $picture) zerschießt FE-Ausgabe

[Hauge]

Hallo Zusammen,
ich möchte gerne das <picture>-Element manuell in einem Template verwenden.
Hierzu habe ich folgenden code eingebunden:

$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:

<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:

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:

<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

[Spooky]

Das sieht alles sehr unüblich aus. Warum benutzt du die echo Anweisungen für HTML in einem Template? Beschreibe deine Extension mal genauer. Ist das was du gepostet hast überhaupt der tatsächliche Source Code Output der Seite oder die resultierende DOM Struktur im Browser?

[Hauge]

Hallo,

nun, ich verwende das ganze im dma-Elementgenerator.
Bisher habe ich mir die variablen "zu Fuß" ohne responsive img's zusammengebaut.
Ich verwende die einzelnen echo's zum testen...
Habe bereits mehrere Varianten durchgespielt (auch schon mit insert_tag - und ohne echo's) etc.
Da es auf diesem Weg nicht funktionerte hab ich mir angesehen, was der insert_tag macht und hab's nachgebaut.
Daraus resultierten dann die echo's...

[Spooky]

Du hast nicht alle meine Fragen beantwortet .

Poste das gesamte Template und einen Link zur Seite wo man den Fehler sehen kann.

[Hauge]

Hier das Template:

<div class="bb_middler <?php echo $this->class; ?> block"<?php echo $this->cssID; ?><?php if ($this->style): ?> style="<?php echo $this->style; ?>"<?php endif; ?>>

<?php 

global $objPage;//globals laden
$page_suffix=$GLOBALS['TL_CONFIG']['urlSuffix'];//globalen Seitensuffix holen

//Nächste Ebene aus dem Trail holen
$sql = "SELECT title,id,slider_1,teaser,alias FROM tl_page WHERE pid=$objPage->id AND published=1 AND hide!=1 ORDER BY sorting";
$dbQuery = Database::getInstance()->prepare($sql);
$dbResult = $dbQuery->execute();
while($row = $dbResult->fetchRow()){
$page_name=$row[0];
$page_image=$row[2];
$page_teaser=$row[3];
$page_alias=$row[4].$page_suffix;
/*Responsive Bildausgabe erstellen*/
$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);//bildausgabe erzeugen
/*Ende Bildausgabe*/

echo '<div class="bb_teaser">';
echo '<figure>';
echo $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>';


}  



//$this->showTemplateVars(); 


?>

</div>

und der Link: Link entfernt (mfg Hauge)

[Hauge]

Das scheint wohl ein Problem im Elementgenerator zu sein.
Habe das jetzt in einem Templat von isotope nachgestellt -> hier funktioniert es.
Mit dem html-Inhaltselement als Modul wiederum nicht.

Ist iwi seltsam, dass sich das nicht über den angebotenen insert-tag sauber lösen lässt und das Verhalten in den verschiedenen templates immer ein anderes ist.
However - ich zerleg mir jetzt mal das array und bau mir das mal händisch ein.

Danke für die Mühe
mfg
Hauge

[Hauge]

Ok,
so hat's funktioniert:

         <div class="bb_teaser">
            <figure>
                <?php
                    /*Responsive Bildausgabe erstellen*/
                    $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
                    $this->insert('picture_default', $picture);//bild ausgeben
                    /*Ende Bildausgabe*/
                ?>
            </figure>
            <a class="headline" title="<?php echo $page_name; ?> anzeigen" href="<?php echo $page_alias; ?>">
                <?php echo $page_name; ?>
            </a>
            <p class="teaser">
                <?php echo $page_teaser; ?>
                <a class="button" title="<?php echo $page_name; ?> anzeigen" href="<?php echo $page_alias; ?>">
                    <?php echo $page_name; ?>
                </a>
            </p>
        </div>>

Da stand ich wohl mit dem "$picture=" und "echo $picture" auf dem Schlauch

Danke für die Hilfe...

[Spooky]

Ja, $this->insert macht ja bereits die Ausgabe. Und in deinem initialen Post hattest du das ja auch eigentlich schon richtig benutzt (wenn auch seltsam, mit einem echo für jede HTML Zeile) - daher habe ich nach deinem tatsächlichen Template gefragt, wo das offensichtlich nicht mehr so war

[Nacht69]

Danke, hatte das selbe Problem und dieser Thread hat mir sehr weitergeholfen.
Leider brauche ich in meinem img Tag noch eine ID und eine Klasse. Wie stelle ich das an?

[Spooky]

Warum brauchst du es direkt am img?

[Nacht69]

Der von mir verwendete CSS slider arbeitet so.

[Spooky]

Naja, was genau macht der, poste mal einen Link zur Seite oder zu dem Script.

[heyho]

Ich brauche die Rückgabe als String, nicht direkt als Ausgabe.

ob_start();
$this->insert('picture_default', $sliderImage);
$renderedImage = ob_get_clean(); 

Funktioniert vorerst, kann noch nicht sagen ob es wo zu Problemen kommt...