Picture Element ausgeben - responsive Bilder

[kalterwind]

Hey,

hab noch so einige Probleme mit Contao 5.
Vorher reichte aus:

$objFile = \FilesModel::findByUuid($nachricht["singleSRC"]);
echo $this->replaceInsertTags( '{{picture::'.urlencode($objFile->path).'?size=10}}' ); 

In einer Template Datei:

use Contao\FilesModel;
use Contao\System;
$objFile = FilesModel::findByUuid($row["bild"]);
if ($objFile !== null) {
$insertTagService = System::getContainer()->get('contao.insert_tag.parser');
$figureTag = '{{picture::' . $objFile->id . '?size=1&setLinkAttributes[href]=' . urlencode($row["link"]) . '}}';
echo $insertTagService->replace($figureTag);
} 

Es wird jedoch nur ein einzelnes Bild ausgegeben, ich möchte, dass die verschiedenen Größen übernommen werden.

Gruss

Ps. Das Problem bestand unter anderem (siehe unten) an falschen Testbildern, diese waren in den Abmessungen zu Klein und dann wurden keine Pixeldichten Versionen generiert!

[Spooky]

In einem PHP Template nimmst du ab Contao 4.13 am besten $this->figure()

[kalterwind]

In einem PHP Template nimmst du ab Contao 4.13 am besten $this->figure()

Kannst du mir das etwas näher ausführen?

$imageId = $objFile->id;
$imageConfig = array(
    'size' => array(200, 200, 'crop')
);
echo $this->figure($imageId, $imageConfig); 

Funktioniert nicht, ob mit Bild ID oder Path.
Ich hab schon zig Varianten mit ChatGPT versucht, aber komm nicht weiter.

Die Bild ID ist korrekt.
Die PHP Datei befindet sich im normalen Template Ordner.

[zoglo]

Poste mal bitte das ganze Template (Und auch den Templatenamen... sind das News?)

[kalterwind]

Poste mal bitte das ganze Template (Und auch den Templatenamen... sind das News?)

Handelt sich um keine News und kein Modul.
Die PHP Datei binde ich über {{file::thema.php}} in einem ungefilterten HTML Element ein.
/templates/thema.php:

<?php
global $objPage;

use Contao\FilesModel;
use Contao\FrontendTemplate;
use Contao\System;

//Funktioniert:

$imageid = 701;
$insertTagService = System::getContainer()->get('contao.insert_tag.parser');
$figureTag = '{{picture::' . $imageid . '?size=1}}';
echo $insertTagService->replace($figureTag);

//Funktioniert nicht:

$imageConfig = array(
    'size' => array(200, 200, 'crop')
);
echo $this->figure($imageid, $imageConfig); 

?>

Fehler:

[2024-06-14T18:03:05.621610+02:00] request.CRITICAL: Uncaught PHP Exception Twig\Error\RuntimeError: "An exception has been thrown during the rendering of a template ("Call to undefined method Contao\CoreBundle\InsertTag\Resolver\LegacyInsertTag::figure()")." at html.html.twig line 6 {"exception":"[object] (Twig\\Error\\RuntimeError(code: 0): An exception has been thrown during the rendering of a template (\"Call to undefined method Contao\\CoreBundle\\InsertTag\\Resolver\\LegacyInsertTag::figure()\"). at ..../vendor/contao/core-bundle/contao/templates/twig/content_element/html.html.twig:6)\n[previous exception] [object] (Error(code: 0): Call to undefined method Contao\\CoreBundle\\InsertTag\\Resolver\\LegacyInsertTag::figure() at ..../templates/thema.php:20)"} {"request_uri":"..../themen/abenteuer/","request_method":"GET"}

[Spooky]

Achso, du bist nicht in einem Template. Dann musst du dir das Image Studio vom Service Container holen.

[kalterwind]

Achso, du bist nicht in einem Template. Dann musst du dir das Image Studio vom Service Container holen.

Das war alles früher so viel einfacher
Der finalen Lösung spendiere ich mit 5€ über PayPal gerne das nächste EM Bier

use Contao\System;
use Contao\FilesModel;
use Contao\FrontendTemplate;
use Contao\CoreBundle\InsertTag\InsertTagParser;
use Contao\CoreBundle\Image\Studio\Studio;

//Beispiel von der Webseite für ein PHP Template kopiert:
echo $this->figure($objFile->path, '1'); 

$objFile->path enthält den korrekten Pfad.
Sorgt für einen Fehler:

[2024-06-15T11:17:35.670016+02:00] request.CRITICAL: Uncaught PHP Exception Twig\Error\RuntimeError: "An exception has been thrown during the rendering of a template ("Call to undefined method Contao\CoreBundle\InsertTag\Resolver\LegacyInsertTag::figure()")." at html.html.twig line 6 {"exception":"[object] (Twig\\Error\\RuntimeError(code: 0): An exception has been thrown during the rendering of a template (\"Call to undefined method Contao\\CoreBundle\\InsertTag\\Resolver\\LegacyInsertTag::figure()\"). at xxx/vendor/contao/core-bundle/contao/templates/twig/content_element/html.html.twig:6)\n[previous exception] [object] (Error(code: 0): Call to undefined method Contao\\CoreBundle\\InsertTag\\Resolver\\LegacyInsertTag::figure() at xxx/templates/thema.php:101)"} {"request_uri":"xxx/themen/abenteuer/","request_method":"GET"}

[Spooky]

Das war alles früher so viel einfacher

Ich verstehe in deinem Beispiel gar nicht, warum du diesen Code so benutzt. Warum nicht einfach direkt den Insert Tag ausgeben? Du kannst auch direkt den {{figure}} Insert Tag nutzen. Du machst es dir denke ich unnötig kompliziert . Auch dass du {{files::something.php}} nutzt, solltest du so nicht machen. Beschreibe mal genauer deinen Use-Case.

[kalterwind]

Ich verstehe in deinem Beispiel gar nicht, warum du diesen Code so benutzt. Warum nicht einfach direkt den Insert Tag ausgeben? Du kannst auch direkt den {{figure}} Insert Tag nutzen. Du machst es dir denke ich unnötig kompliziert . Auch dass du {{files::something.php}} nutzt, solltest du so nicht machen. Beschreibe mal genauer deinen Use-Case.

Ich bin für einfachere Lösungen offen, kenne keine

UPDATE:
Ähm, nachdem ich die Seite mit folgendem Code nochmal geladen habe, habe ich gerade die Pixeldichten dabei, ich bin mir sicher, dass ich das gestern in unzähligen Tests und trotz Cache löschen nicht hatte.

            $insertTagService = System::getContainer()->get('contao.insert_tag.parser');
            $figureTag = '{{figure::' . $objFile->id . '?size=1&setLinkAttributes[href]=' . urlencode($row["link"]) . '}}';
            echo $insertTagService->replace($figureTag); 

Hiermit bekomme ich nur das Ergebnis:

<figure class="image_container">
<a href="/redner/prominenter_xy/">
<img src="/assets/images/7/redner_889vxma394p6kp2.jpg" alt="" width="164" height="209" loading="lazy">
</a>
</figure>

Bildgröße 1 hätte jedoch Pixeldichten von 1x, 1.5x, 2x, die hier fehlen oder bei anderen Bildgrößen verschiedene Media Queries.
Früher hatte ich als Ergebnis etwas wie:

<img class="img" srcset="assets/images/b/plakate_1-79549e6e.jpg, assets/images/7/plakate_1-49ee2a22.jpg 1.5x,assets/images/3/plakate_1-19dc5118.jpg 2x" src="assets/images/b/plakate_1-79549e6e.jpg" alt="Emigholz">

Es handelt sich um eine Redner Agentur. Ich habe ein Modul geschrieben, in dem alle Redner mit mehreren Themen usw angelegt werden.
Die Liste und Detailseite der Redner mache ich über das Modul, mit den Templates, Klassen & Co - wie man es auch korrekterweise machen würde.

Auf einer Unterseite der Themenseite zB /themen/abenteuer/ möchte ich jetzt, ganz einfach, ohne irgendein extra Modul oder sonst etwas, alle Redner zum Thema "abenteuer" abgreifen und mit Namen und Bild darstellen. Das sind ja nur ein paar Zeilen Code und alles läuft, außer das mir die Bilder nicht responsive wiedergegeben werden.
Mir ist klar, dass man normal mein Modul einfach erweitern würde, aber ich finde es manchmal sehr viel praktischer, schneller und einfacher, wenn man sich Dinge direkt aus der Datenbank zieht, sei es per Ajax oder sonst was und alles in 10 Zeilen Code in einer Datei hat, als erstmal unzählige Dateien für eine eigene Erweiterung zu erstellen.

Und würde gerne verstehen, wie man es hinbekommt, von Contao 2 bis 4 war das alles so easy

[Spooky]

Mach es am besten per Modul. Oder in Contao 5 zumindest per Template plus dem {{template}} Insert Tag (dann kannst du auch $this->figure nutzen).

[kalterwind]

Mach es am besten per Modul. Oder in Contao 5 zumindest per Template plus dem {{template}} Insert Tag (dann kannst du auch $this->figure nutzen).

Was meinst du mit dem "{{template}} Insert Tag"?
Finde dazu nichts.

Kleine Spende ging raus für deine Zeit, war auch nicht die Erste.

[Spooky]

Ist momentan leider nicht dokumentiert, funktioniert aber grundsätzlich genau so wie {{file}} (aber halt nur für Templates).

Aber selbst diesen Insert-Tag brauchst du nicht. Du kannst auch einfach ein ce_html_* oder mod_html_* Template anlegen und das direkt als HTML Inhaltselement oder Modul einbinden.

[kalterwind]

Ich hab mich so lange damit beschäftigt am Wochenende, jetzt fiel mir erst der Fehler auf.
Dummheit tut weh, aber vielleicht hat irgendwann noch Jemand das Problem:

Mein Testbild war total klein, daher gab es keinen weiteren Code mit Pixeldichten, bei den anderen Bildern die größer waren war der Code korrekt.

[zoglo]

Ich habe die Vermutung, dass dein alter Code dann doch evtl. funktionieren würde

[zoglo]

Mach es am besten per Modul. Oder in Contao 5 zumindest per Template plus dem {{template}} Insert Tag (dann kannst du auch $this->figure nutzen).

Ein Template-Inserttag gibt es mMn nicht (auch nicht im code).
Wahrscheinlich ist hier das "Individuelle Template" Inhalts-Element gemeint:

Siehe:
https://github.com/contao/contao/blo...rtTag.php#L624

'contao/core-bundle', '5.0', 'Using the file insert tag to include templates has been deprecated and will no longer work in Contao 6. Use the "Template" content element instead.'