5.7.x Titel doppelt - content_element/text

[Thomas Hinze]

Ich habe klassische Inhaltselement "Text" und möchte mehrere Templates erstellen, da ich

Als erstes das Bild benötige, dann den Titel (Überschrift), dann den Textblock und dann die Meta Angaben vom Bild wie URL und Caption.
Ich verstehe Twig nach wie vor leider nicht und versuche mich schon mit LLMs zu behelfen, aber die kommen auch nicht klar. Die Templates die auf Basis der Doku von Contao in Twig erstellt werden funktionieren selten.


Das hier ist das Standard Twig für "Text"

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

{% set content_layout_attributes = attrs()
    .addClass('media media--' ~ layout, layout and image)
    .mergeWith(content_layout_attributes|default)
%}

{# By default we add the layout attributes to the wrapper element. If you want to
 disable this behavior, set "default_content_layout" to false. #}
{% set attributes = attrs(attributes|default)
    .mergeWith(content_layout_attributes, default_content_layout is not defined or default_content_layout)
%}

{# Media #}
{% block text_media %}
    {% if image %}
        {% with {figure: image} %}{{ block('figure_component') }}{% endwith %}
    {% endif %}
{% endblock %}

{% block content %}
    {% if layout != 'below' %}
        {{ block('text_media') }}
    {% endif %}

    {# Richtext #}
    {% block text %}
        {% with {text, attributes: text_attributes|default} %}{{ block('rich_text_component') }}{% endwith %}
    {% endblock %}

    {% if layout == 'below' %}
        {{ block('text_media') }}
    {% endif %}
{% endblock %}

Ich möchte einfach nur (wenn vorhanden) das Bild zuerst, danach (wenn vorhanden) den Titel, danach (wenn vorhanden) den Text, danach (wenn vorhanden) einen Hyperlink aus der Meta Angabe "URL" des Bildes und als Linktext den Meta Titel der URL

ich bekomme solche Vorschläge

{% extends '@Contao/content_element/_base.html.twig' %}
{% use '@Contao/component/_figure.html.twig' %}
{% use '@Contao/component/_rich_text.html.twig' %}
{# Headline-Block leer lassen #}
{% block headline %}{% endblock %}
{% block content %}
    {% if image %}
        {% if image.linkHref %}
            <a href="{{ image.linkHref }}"
               {% if image.linkTitle %}title="{{ image.linkTitle }}"{% endif %}
               {{ image.linkAttributes|default('')|raw }}>
                {% with {figure: image} %}{{ block('figure_component') }}{% endwith %}
            </a>
        {% else %}
            {% with {figure: image} %}{{ block('figure_component') }}{% endwith %}
        {% endif %}
    {% endif %}

    {# 2. Headline #}
    {% if headline.text %}
        <{{ headline.tag|default('h3') }}>
            {{ headline.text }}
        </{{ headline.tag|default('h3') }}>
    {% endif %}

    {# 3. Text #}
    {% block text %}
        {% with {text, attributes: text_attributes|default} %}
            {{ block('rich_text_component') }}
        {% endwith %}
        
        {% if image.linkHref %}
            <a href="{{ image.linkHref }}">Mehr erfahren
               {% if image.linkTitle %}title="{{ image.linkTitle }}"{% endif %}
            </a>
        {% endif %}
        {% endblock %}
{% endblock %}

Der Titel (headline) wird im Frontend zweimal ausgegeben.
Über dem Bild und darunter.
Ich komme nicht an die Metabeschreibung "titel" vom Bild als Link-Text. Im Moment statisch eingetragen

[Thomas Hinze]

{% extends '@Contao/content_element/_base.html.twig' %}
{% use '@Contao/component/_figure.html.twig' %}
{% use '@Contao/component/_rich_text.html.twig' %}
{# Headline-Block leer lassen #}
{% block headline_component %}{% endblock %}
{% block content %}
    {% if image %}
            {% with {figure: image} %}{{ block('figure_component') }}{% endwith %}
    {% endif %}
    {# 2. Headline #}
    {% if headline.text %}
        <{{ headline.tag|default('h3') }}>
            {{ headline.text }}
        </{{ headline.tag|default('h3') }}>
    {% endif %}

    {# 3. Text #}
    {% block text %}
        {% with {text, attributes: text_attributes|default} %}
            {{ block('rich_text_component') }}
        {% endwith %}
        
        {% if image.linkHref %}
            <a href="{{ image.linkHref }}">Mehr erfahren
               {% if image.linkTitle %} {{ image.linkTitle }} {% endif %}
            </a>
        {% endif %}
        {% endblock %}
{% endblock %}

Doppelter Titel ist weg.
Aber ich kann nach wie vor nicht den {{ image.linkTitle }} als Linktext verwenden :-(

[lbableck]

So wärs denke ich am elegantesten:

{% extends "@Contao/content_element/text.html.twig" %}

{% block inner %}
    {{ block('text_media') }}
    {{ parent() }}
{% endblock %}

{% block content %}
    {{ block('text') }}
{% endblock %}

{% block text %}
    {{ parent() }}
    {% if image.linkHref|default %}
        <a{{ image.linkAttributes(true) }}>
           {% if image.metadata.title|default %} {{ image.metadata.title }} {% endif %}
        </a>
    {% endif %}
{% endblock %}

[Thomas Hinze]

DAs mit dem Linktext klappt so. Vielen Dank!
Aber wie kann ich in deiner Variante die Überschrift (headline) zu h3 zwingen?
Das ist mir wichtig, damit die Redakteure da nichts verstellen können,

[zoglo]

Die Templates die auf Basis der Doku von Contao in Twig erstellt werden funktionieren selten.

Deine LLMs müssen 1. Twig verstehen, hat nix mit Contao zu tun und 2. die Template-Hierarchie kennen.
"Mach Twig auf Contao, Make no Mistakes" wird nicht funktionieren.

Füttere die Twig Doku aus TWIG + die Contao Templates, damit ein LLM dies verstehen kann. Es halluziniert sonst zu viel.

DAs mit dem Linktext klappt so. Vielen Dank!
Aber wie kann ich in deiner Variante die Überschrift (headline) zu h3 zwingen?
Das ist mir wichtig, damit die Redakteure da nichts verstellen können,

Ungetestet, tag_name überschreiben:
{% set headline = headline|default|merge({tag_name: 'h3'}) %}

[Thomas Hinze]

es wäre mir lieber ich würde es verstehen :-(

Mit der LLM bin ich schon gut voran gekommen aber wenn ich die Resultate sehen was die LLM ausgibt und funktioniert und was hier an Feedback kommt hilft das kaum beim lernen.

Diese Zeile erzeugt irgendwie ein Ergebnis wenn ich es WO eintrage?

{% set headline = headline|default|merge({tag_name: 'h3'}) %}

Das Ergebnis der LLM funktioniert, ist lang, aber irgendwie noch verständlich

{% block content %}
    {% if image %}
            {% with {figure: image} %}{{ block('figure_component') }}{% endwith %}
    {% endif %}
    {# 2. Headline #}
    {% if headline.text %}
        <{{ headline.tag|default('h3') }}>
            {{ headline.text }}
        </{{ headline.tag|default('h3') }}>
    {% endif %}

Seit Twig verstehe ich Contao nur noch bedingt.
Gibt leider keine verständlichen Tutorials.
Insbesondere wenn man Templates umschreiben muss

[lbableck]

Diese Zeile erzeugt irgendwie ein Ergebnis wenn ich es WO eintrage?

Im Grunde egal wo, hauptsache bevor die Variable verwendet wird. In dem Fall ist das im inner Block des Templates, aber es funktioniert auch einfach außerhalb der Blöcke. Im content Block funktioniert es beispielsweise nicht.
Vom Prinzip ist das ja genauso wie bei Variablen in PHP.

Insbesondere wenn man Templates umschreiben muss

Umschreiben musst du eigentlich fast nie, bzw. solltest du vermeiden.
Die meisten Templates kannst du einfach anpassen indem du nur bestimmte Blöcke überschreibst, wie im Template das ich gepostet habe.
Dann nutzt du weiterhin die Blöcke aus dem Original-Template die du nicht überschrieben hast.

Du musst dir eigentlich immer nur das Template, bzw. die Blöcke darin, das du anpassen willst ansehen und ggf. die Templates von denen extended wird.
Dann ist das, finde ich, eh immer recht klar.

[Thomas Hinze]

Ich muss eine Menge umschreiben, da ich Contao schon sehr lange über mehrere Generationen hinweg nutze.
Das Umschreiben/aufbauen von Templates ist mMn mit die wichtigste Aufgabe, damit die Redakteure nur noch Content pflegen und nix mit der Gestaltung am Hut haben.
Die Aussage "egal wo" zeugt nicht grad von Einheit und Konsistenz :-(
Aber es geht voran...

Nächste Baustelle sind News Archive mit Schleifen :-(

Im Grunde egal wo, hauptsache bevor die Variable verwendet wird. In dem Fall ist das im inner Block des Templates, aber es funktioniert auch einfach außerhalb der Blöcke. Im content Block funktioniert es beispielsweise nicht.
Vom Prinzip ist das ja genauso wie bei Variablen in PHP.


Umschreiben musst du eigentlich fast nie, bzw. solltest du vermeiden.
Die meisten Templates kannst du einfach anpassen indem du nur bestimmte Blöcke überschreibst, wie im Template das ich gepostet habe.
Dann nutzt du weiterhin die Blöcke aus dem Original-Template die du nicht überschrieben hast.

Du musst dir eigentlich immer nur das Template, bzw. die Blöcke darin, das du anpassen willst ansehen und ggf. die Templates von denen extended wird.
Dann ist das, finde ich, eh immer recht klar.

[mlweb]

Ich bin auch der Meinung, dass man viel machen kann ohne Templates in großem Umfang umschreiben zu müssen. Vieles lässt sich heutzutage mit modernem CSS lösen.

Ich muss eine Menge umschreiben, da ich Contao schon sehr lange über mehrere Generationen hinweg nutze.

Manchmal muss man m.E. aus seiner Komfortzone raus und Umdenken.

Das Umschreiben/aufbauen von Templates ist mMn mit die wichtigste Aufgabe, damit die Redakteure nur noch Content pflegen und nix mit der Gestaltung am Hut haben.

Das stimmt - Redakteure müssen und sollten sich nicht mit der Gestaltung befassen müssen. Mit dem semantischen Aufbau ihrer Inhalte sollten sie sich m.E. aber schon befassen. Damit sollten sich Redakteure also auch mit der Überschriftenhierarchie befassen dürfen, sonst passiert es unter Umständen, das die Überschriftenhierarchien nicht korrekt verwendet werden können, sobald der Redakteur ein Element an einer nicht dafür vorgesehenen Stelle einfügt/einfügen möchte.
Semantik hat ja nichts mit der Gestaltung zu tun.

Ich habe Twig, tatsächlich mit der Twig-Doku (https://twig.symfony.com/doc/3.x/) gelernt und versuche mit diesem Wissen, den Rafinessen der Core-Templates auf die Spur zu kommen. Es ist zugegebener Maßen nicht immer ganz einfach alles zu verstehen, aber insgesamt finde ich das Konzept von extend und use etc. sehr pfiffig.