Custom Content Element erstellen

[mPunkt]

Ich habe ein Random-Image Contentelement erstellt. Die Dateistruktur entspricht dem Contao 4 skeleton bundle.
Der Controller sieht so aus:

namespace Test\RandomImageBundle\Controller;

use Contao\System;
use Contao\ContentModel;
use Contao\CoreBundle\Controller\ContentElement\AbstractContentElementController;
use Contao\CoreBundle\Filesystem\FilesystemUtil;
use Contao\CoreBundle\Filesystem\VirtualFilesystemInterface;
use Contao\CoreBundle\Image\Studio\Figure;
use Contao\CoreBundle\Image\Studio\Studio;
use Contao\CoreBundle\Twig\FragmentTemplate;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;

class RandomImageController extends AbstractContentElementController
{
    private VirtualFilesystemInterface $filesStorage;
    private Studio $studio;
    public function __construct(Studio $studio, VirtualFilesystemInterface $filesStorage)
    {
        $this->filesStorage = $filesStorage;
        $this->studio = $studio;
    }

    protected function getResponse(FragmentTemplate $template, ContentModel $model, Request $request): Response
    {

        $isBackend = System::getContainer()
            ->get('contao.routing.scope_matcher')
            ->isBackendRequest(System::getContainer()->get('request_stack')->getCurrentRequest() ?? Request::create(''));

        $filesystemItems = FilesystemUtil::listContentsFromSerialized($this->filesStorage, $model->multiSRC);

        foreach($filesystemItems as $item) {
            if ( preg_match( '/(png|jpg|jpeg|gif|tif|tiff|bmp)$/i',  $item->getExtension() ) ){
                $imageList[] = $item->getUuid();
            }
        }
        if ( isset( $imageList ) ) {
            $i = mt_rand(0, ( count( $imageList )-1 ) );
            $figureBuilder = $this->studio
                ->createFigureBuilder()
                ->setSize($model->size)
                ->setLightboxGroupIdentifier('lb'.$model->id)
                ->enableLightbox($model->fullsize)
                ->setMetadata($model->getOverwriteMetadata());
            ;
            $template->set('images', $figureBuilder->fromUuid($imageList[$i])->build());
        }
        $template->set('counter', $isBackend ? isset($i) ? 'Bild ' . $i+1 . ' von ' . count($imageList) : 'Kein Bild' : null );
        return $template->getResponse();
    }
} 

Als Template benutze ich eine Kopie von image.html.twig mit einem zusätzlichen Element 'counter'

{% extends "@Contao/content_element/_base.html.twig" %}
{% use "@Contao/component/_figure.html.twig" %}

{% block content %}
    {% if counter %} {{ counter }} {% endif %}
    {% if images %}
        {% with {figure: images} %}{{ block('figure_component') }}{% endwith %}
    {% endif %}
{% endblock %}

Es funktioniert soweit eigentlich ganz ordentlich, d.h im Backend kann ich das neue Inhaltselement auswählen und es erzeugt auch Zufallsbilder.

Soweit ist alles gut, aber:

• Die unter Experteneinstellungen konfigurierten CSS-Klassen, werden nicht übernommen.
  Der div-Container des Bildes enthält nur class="content-random_image"

• Wenn ich den Content Elementtyp z.B. von Zufallsbild nach Bild ändern möchte, kommt ein Internal Server Error
  "Tried to list template options for the modern fragment type "content_element/random_image" but could not find any template."

• Im Debugmodus kommt immer die Fehlermeldung
  "Too few arguments to function Test\RandomImageBundle\Controller\RandomImageContr oller::__construct(), 1 passed"

Irgendwas mache ich falsch, ich habe aber keine Ahnung, wo ich ansetzen müsste.

[Spooky]

Die unter Experteneinstellungen konfigurierten CSS-Klassen, werden nicht übernommen.
Der div-Container des Bildes enthält nur class="content-random_image"

Das konnte ich nicht nachvollziehen.

Wenn ich den Content Elementtyp z.B. von Zufallsbild nach Bild ändern möchte, kommt ein Internal Server Error
"Tried to list template options for the modern fragment type "content_element/random_image" but could not find any template.

Auch das konnte ich nicht nachvollziehen. Wann genau kommt es zu diesem Fehler? Poste detaillierte Schritte.

Im Debugmodus kommt immer die Fehlermeldung
"Too few arguments to function Test\RandomImageBundle\Controller\RandomImageContr oller::__construct(), 1 passed"

Prüfe deine Service-Definition und lösche ggf. var/cache/dev manuell.

[mPunkt]

Problem 1: Mit dem open geposteten Template werden die CSS-Klassen nicht gesetzt (vermutlich wegen Twig\Error "Variable "element_html_id" does not exist", denn ich aber nur Debugmodus sehe).
Das kann ich jederzeit reproduzieren. Ich benutze jetzt dieses Template, damit ist der Fehler weg und die Klassen sind da.

% extends '@Contao/block_searchable' %}
{% import '@ContaoCore/Image/Studio/_macros.html.twig' as studio %}

{% block content %}
    {% if counter %} {{ counter }} {% endif %}
    {% if images %}
        {{ studio.figure(images)}}
    {% endif %}
{% endblock %}

Problem 2: Zwischenzeitlich funktioniert es. Ich kann nur nicht sagen warum.

Problem 3: Das manuelle Löschen des Cache mit rm -r var/cache/* hat geholfen.

Besten Dank!

[Spooky]

Problem 1: Mit dem open geposteten Template werden die CSS-Klassen nicht gesetzt (vermutlich wegen Twig\Error "Variable "element_html_id" does not exist", denn ich aber nur Debugmodus sehe).
Das kann ich jederzeit reproduzieren.

Ich leider nicht. Habe es mit exakt deinem Template versucht.

[mPunkt]

Dann muss es bei mir immer noch einen Fehler geben. Hasst Du eine Idee, wo ich ansetzen könnte?

[mPunkt]

Ich wollte ja ein reines Twig-Template einsetzen, das (so wie viele core-Templates) auf content_element/_base.html.twig aufbaut.

Bei mir fehlen neben 'element_html_id' auch die Variablen 'element_css_classes' und 'headline'. Diese werden eigentlich im AbstractContentElementController mit der Methode addDefaultDataToTemplate dem Template zugefügt. In meinem Fall passiert das aber nicht, weil das Template als 'legacy' erkannt wird. Um alle Fehler auszuschließen, habe ich es mit dem Beispiel aus der Developer Dokumentation https://docs.contao.org/dev/framework/content-elements versucht.

// src/Controller/ContentElement/MyContentElementController.php
namespace App\Controller\ContentElement;

use Contao\ContentModel;
use Contao\CoreBundle\Controller\ContentElement\AbstractContentElementController;
use Contao\CoreBundle\ServiceAnnotation\ContentElement;
use Contao\Template;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;

/**
 * @ContentElement(category="texts")
 */
class MyContentElementController extends AbstractContentElementController
{
    protected function getResponse(Template $template, ContentModel $model, Request $request): Response
    {
        $template->text = $model->text;
        return $template->getResponse();
    }
} 

Auch hier liefert der AbstractContentElementController die genennaten Variablen nicht, weil das Template als 'legacy' eingestuft wird.

Wie und wo legt man fest, dass ein Template nicht 'legacy' ist? Die Extension .html.twig genügt offenbar nicht.

[mPunkt]

Ich hab' den Stein der Weisen endlich gefunden.
Vielen Dank an alle, die mitgedacht haben.

[fiedsch]

Ich hab' den Stein der Weisen endlich gefunden.

Verrätst Du es uns auch? Danke.

[mPunkt]

Ja gerne, die Lösung findet sich hier: https://docs.contao.org/dev/framewor...ure/#twig-root. "For any other place, such as the main template directory (contao/templates) and inside bundles, you need to add a special marker file .twig-root to denote that this directory should be used as the naming root."