Image Template Link anpassen

[gm-team]

Hallo,

ich bin noch sehr neu in der twig-Welt und habe es noch nicht geschafft folgendes zu erreichen:

Im Template für Images soll das <a> Tag nicht das <img> umfließen, sondern bereits vor dem <img> geschlosen werden.

IST-Stand:

<a href=""><img src="" alt=""></a>

SOLL-Stand:

<a href=""></a><img src="" alt="">

Also ich nehme an das muss hier erfolgen: templates/mytheme/content_element/image.html.twig

Ich habe hier bereits über folgenden Code vergeblich versucht sowas zu realisieren:

{% block media_link %}
    <a href="{{ media.href }}"{{ media.attributes }}></a>
{% endblock %}

{% block image %}
    <img src="{{ image.src }}" alt="{{ image.alt }}" title="{{ image.title }}" width="{{ image.width }}" height="{{ image.height }}">
{% endblock %}

Wäre sehr dankbar falls hier jemand behilflich sein könnte. Danke.

[Kopfnuss]

Schau mal ob das funktioniert, hab es nicht getestet.
Neues Twig Template im Ordner: templates/component/ anlegen mit dem Namen: _figure.html.twig

_figure.html.twig

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

{% 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)
    %}
    <a{{ link_attributes }}></a>{{ block('media') }}
{% endblock %}

Edit: Das würde für alle Elemente zutreffen. Ich glaube, wenn du das einzeln zuweisen möchtest musst du den Namen umbenennen und dann eine custom image.html.twig, wo du das _figure Template extendes, erstellen und im Inhaltselement auswählen. Ich bin mir da aber nicht ganz sicher.

[gm-team]

Recht herzlichen Dank, das hat auf Anhieb geklappt.

Ich musste nur das Template verschieben.
templates/mytheme/component/_figure.html.twig hat nämlich nicht geklappt, bei templates/component/_figure.html.twig funktioniert es.
Denn meine vorigen Versuche an image.html.twig waren auch allesamt im Theme-Ordner, deswegen hatte ich es initial auch hier versucht.

[Bennie]

Hallo zusammen, ich versuche gerade das so umzustellen dass das a href das figure umschließt und bin auf diesen Thread gestoßen - bekomme das aber irgendwie nicht hin.
Ich möchte das im gallery.html.twig umsetzen und benötige ausnahmsweise diese Verschiebung des a tags.
Also anstatt

<figure>
<a href=">
<picture>

</picture>
</a>
</figure>

diese Striuktur

<a href=">
<figure>

<picture>

</picture>

</figure>
</a>

Kann mir da jemand auf die Sprünge helfen?

[Bennie]

...übrigens die Methode das </a> zu verschieben, wie in #2 beschrieben würde in meinem Fall evtl. auch schon helfen - aber!!
wenn ich das mache dann ist der titel der glightbox nicht mehr vorhanden, bzw. steht dann dort data-glightbox="title..." anstatt dem eingetragenen titel des Bildes,, also wieder ein anderes Problem

Am liebsten wäre mir wenn ich eben doch das a tag außerhalb des figure bekäme , alles andere (z.B Klassen hinzufügen) hat geklappt aber die Position des a tag zu ändern will nicht gelingen

als Ergänzug hier noch das gallery template das ich angepasst habe

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


{% block list_attributes %}
    {# add class to <ul> #}
    {{ parent() }} class="row"
{% endblock %}

{% block list_item_attributes %}
    {# add class to <li> #}
    {{ parent() }} class="col-md-4 col-6"
{% endblock %}  

{% block caption %}
    {% set caption_attributes = attrs(caption_attributes|default).addClass('caption') %}
   {{ parent() }}
{% endblock %} 

{% block caption_inner %}    
     <span class="caption-inner">{{ parent() }}</span>
{% endblock %}

[contaotester]

Am liebsten wäre mir wenn ich eben doch das a tag außerhalb des figure bekäme , alles andere (z.B Klassen hinzufügen) hat geklappt aber die Position des a tag zu ändern will nicht gelingen

Der Link bzw. {% block media_link %} ist in _figure.html.twig definiert. Du müsstest demnach vermutlich {% block figure_component %} irgendwie abändern/überschreiben. Wie man das am besten macht weiß ich leider nicht.

Aber bevor du da zuviel Zeit reinsteckst: Die Position des Links innerhalb des < figure > und nur um das < picture > herum hat ein Grund:

< figure > kann eine < figcaption > enthalten, welche wiederum einen eigenen Link enthalten kann. Vereinfacht ausgedrückt: Möglicherweise haben Bilder eine Bildbeschreibung, die einen Link enthalten. Das bedeutet, wenn du den Link wie von dir gewünscht abänderst, kann es passieren, das ein Link innerhalb eines anderen Links erzeugt wird. Das wäre weder valide noch sonderlich sinnvoll.

Daher beschreibe vielleicht zunächst etwas näher, warum du den Link um das figure-Element herum haben möchtest, vielleicht gibt es eine andere Lösung...

[Bennie]

Das mit dem Link im Link ist ein Argument dagegen, da hast du recht.
In meinem Fall ist es so dass die figcaption und mein dazu gesetztes "caption-inner" ein Overlay bilden so dass bei hover ein Hintergrund und ein zoomender Text angezeigt werden.

Ich hatte einiges auch mit CSS Pseudo Elementen versucht aber das scheiterte (bisher ) immer weil dann der Link nicht anwählbar war.

Ziel ist also bei hover die figcaption aks Layer über dem Bild einzublenden (das ist noch easy) - aber dann soll auch immer noch der Link anwählbar sein für das Öffnen in der Lightbox

Ich schrieb ja ua. dass wenigstens ein Link außerhalb dabei helfen würde also:

<a href="></a>
<figure>

<picture>

</picture>

</figure>

dann könnte man den Link auch als Layer darüber legen und es wäre dennoch valide sollte ein Link in der caption sein - der dann zugegebenermaßen nicht anwählbar wäre aber eben nicht Link im Link.

[mlweb]

Link zur Seite mit dem Problem?

[dazzle89]

Sehr wahrscheinlich lässt es sich anders und vor allem besser lösen. Aber wenn ein Link nicht klickbar ist, weil ein Element darüber liegt, benutze ich gerne mal pointer-events: none;

[Kopfnuss]

...übrigens die Methode das </a> zu verschieben, wie in #2 beschrieben würde in meinem Fall evtl. auch schon helfen - aber!!
wenn ich das mache dann ist der titel der glightbox nicht mehr vorhanden, bzw. steht dann dort data-glightbox="title..." anstatt dem eingetragenen titel des Bildes,, also wieder ein anderes Problem

Am liebsten wäre mir wenn ich eben doch das a tag außerhalb des figure bekäme , alles andere (z.B Klassen hinzufügen) hat geklappt aber die Position des a tag zu ändern will nicht gelingen

als Ergänzug hier noch das gallery template das ich angepasst habe

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


{% block list_attributes %}
    {# add class to <ul> #}
    {{ parent() }} class="row"
{% endblock %}

{% block list_item_attributes %}
    {# add class to <li> #}
    {{ parent() }} class="col-md-4 col-6"
{% endblock %}  

{% block caption %}
    {% set caption_attributes = attrs(caption_attributes|default).addClass('caption') %}
   {{ parent() }}
{% endblock %} 

{% block caption_inner %}    
     <span class="caption-inner">{{ parent() }}</span>
{% endblock %}

Was du Versuchen könntest wäre folgendes (ungetestet):

Erstelle unter templates->component eine neue Datei _figure_wrapping_a.html.twig
Schreibe das Twig Template so um das a figure umschließt, orginal Template findest du hier:
https://github.com/contao/contao/blo...gure.html.twig

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

{% block figure_component %}
    {% set figure_attributes = attrs()
        .mergeWith(figure.options.attr|default)
        .mergeWith(figure_attributes|default)
    %}
    {% if figure.linkHref|default %}
    {# Media wrapped with 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)
        %}
        <a{{ link_attributes }}>
    {% endif %}
    <figure{{ figure_attributes }}>
        {% if not figure.linkHref|default %}
            {# Media #}
            {% block media %}
                {{ block('picture_component') }}
            {% endblock %}
        {% else %}
            {# Media wrapped with link #}
            {% block media_link %}
                {{ 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>
    {% if figure.linkHref|default %}
        </a>
    {% endif %}
{% endblock %}

Danach erstellst du unter templates->content_element->gallery-> eine neue Datei gallery_wrapping_a.html.twig

{% extends "@Contao/content_element/gallery.html.twig" %}
{% use "@Contao/component/_figure_wrapping_a.html.twig" %}

{% block list_item %}
    {% with {figure: item} %}{{ block('figure_component') }}{% endwith %}
{% endblock %}

Jetzt kannst du in dem Galerie Inhaltselement das eben angelegte Template auswählen. Falls alles funktioniert sollte das a um das figure sein.

[Bennie]

Sehr wahrscheinlich lässt es sich anders und vor allem besser lösen. Aber wenn ein Link nicht klickbar ist, weil ein Element darüber liegt, benutze ich gerne mal pointer-events: none;

Danke, gute Idee, das funktioniert, dass es damit gehen könnte hatte ich an der Stele nicht erwartet

@Kopfnuss
da bekomme ich eine Fehlermeldung

Template "@Contao_Global/component/_figure_wrapping_a.html.twig" cannot be used as a trait

[Kopfnuss]

Danke, gute Idee, das funktioniert, dass es damit gehen könnte hatte ich an der Stele nicht erwartet

@Kopfnuss
da bekomme ich eine Fehlermeldung

Dann geht das so wohl nicht, hab da auch keine Lösung.
Müsste ich mir mal genauer anschauen.

[Bennie]

Dann geht das so wohl nicht, hab da auch keine Lösung.
Müsste ich mir mal genauer anschauen.

Doch ich glaub der Teil in _figure_wrapping_a.html.twig

{% use "@Contao/component/_picture.html.twig" %}

muss raus