(Twig) Text-Element um Link erweitern

**dazzle89** · 23.05.2024, 10:18

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 %}