Contao-Summit 2026
Ergebnis 1 bis 2 von 2

Thema: (Twig) Text-Element um Link erweitern

  1. #1
    Contao-Fan
    Registriert seit
    03.01.2012.
    Beiträge
    907

    Standard (Twig) Text-Element um Link erweitern

    Hallo,

    ich möchte etwas eigentlich sehr simples realisieren:

    - Überschrift
    - Bild
    - Text
    - Button/Link

    Hierfür gibt es natürlich viele Vorgehensweisen. Normalerweise würde ich es wahrscheinlich mit Custom Elements umsetzen.

    Um meine Twig-Kenntnisse zu verbessern, möchte ich das ganze aber mal mit einem einfachen Inhaltselement vom Typ "Text" lösen.

    Das Problem hierbei ist, dass es kein Feld für einen Button bzw. Link gibt. Ich möchte, dass unter dem Text ein "mehr erfahren" Link erscheint. Hierfür will ich die Meta-Daten des Bildes missbrauchen und diesem einen Link mitgeben, der aber unterhalb des Textes angezeigt werden soll, anstatt das Bild zu umschließen.

    Ich weiß nicht mal, ob meine Vorgehensweise überhaupt richtig ist. Auf jeden Fall habe ich mir aus _figure.html.twig die Stelle

    Code:
    <a{{ link_attributes }}>mehr erfahren</a>
    kopiert und sie unter dem Textblock gesetzt. Es wird aber kein Link ausgegeben, sondern nur "mehr anzeigen" als reiner Text. Ich schätze mal, dass link_attributes leer ist, weil der Bezug zum media-Block fehlt? Ich weiß aber nicht, wie genau ich mein Template verändern müsste.

    So sieht mein Template aus (ganz am Ende befindet sich der Link):

    PHP-Code:
    {% block figure_component %}
        {% 
    set figure_attributes = attrs()
            .
    mergeWith(figure.options.attr|default)
            .
    mergeWith(figure_attributes|default)
        %}
        <
    figure{{ figure_attributes }}>
            {% if 
    not figure.linkHref|default %}
                {
    # Media #}
                
    {% block media %}
                    {{ 
    block('picture_component') }}
                {% 
    endblock %}
            {% else %}
                {
    # Media wrapped with link #}
                
    {% block media_link %}
                    {% 
    set link_attributes = attrs(figure.linkAttributes(true)|default)
                        .
    setIfExists('title', figure.hasLightbox and figure.hasMetadata ? figure.metadata.title : null)
                        .
    mergeWith(figure.options.link_attr|default)
                        .
    mergeWith(link_attributes|default)
                    %}
                    {{ 
    block('media') }}
                {% 
    endblock %}
            {% endif %}

            {
    # Caption #}
            
    {% block caption %}
                {% if 
    figure.metadata and figure.metadata.caption %}
                    {% 
    set caption_attributes = attrs()
                        .
    mergeWith(figure.options.caption_attr|default)
                        .
    mergeWith(caption_attributes|default)
                    %}
                    <
    figcaption{{ caption_attributes }}>
                        {%- 
    block caption_inner -%}
                            {{- 
    figure.metadata.caption|raw -}}
                        {%- 
    endblock -%}
                    </
    figcaption>
                {% endif %}
            {% 
    endblock %}
        </
    figure>
    {% 
    endblock %}

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

        {
    # Richtext #}
        
    {% block text %}
            {% 
    set text_attributes = attrs()
                .
    addClass('rte')
                .
    mergeWith(text_attributes|default)
            %}
            <
    div{% block text_attributes %}{{ text_attributes }}{% endblock %}>
                {{ 
    text|csp_inline_styles|insert_tag|encode_email|raw }}
            </
    div>
        {% 
    endblock %}

        {% if 
    layout == 'below' %}
            {{ 
    block('text_media') }}
        {% endif %}
        
        <
    a{{ link_attributes }}>mehr erfahren</a>
    {% 
    endblock %} 

  2. #2
    Community-Moderatorin & Contao-Urgestein Avatar von mlweb
    Registriert seit
    10.07.2011.
    Beiträge
    7.940
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Über
    Code:
    {{ dump() }}
    kannst Du Dir die verfügbaren Template-Variablen ausgeben lassen https://docs.contao.org/manual/de/la...tes/twig/data/
    Contao-Dokumentation: Contao-Handbuch und Contao-Entwickler-Doku
    Contao-Online-Video-Kurse: Contao Academy
    Funktionalität erweitern: Contao-Erweiterungen

    :cool:Für Dinge die man mit HTML und CSS lösen kann, braucht man kein javascript.






Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •