Contao 5.3. - TWIG - Link um die Caption der Gallery

[Wian]

Nach einem Update auf 5.3. und den Wegfall der gewohnten Templates, habe ich heute zum ersten Mal versucht Twig-Templates anzupassen. Hier mein zweites Template, wo ich leider nicht den Fehler finde und hoffe, dass Ihr mir helfen könnt.

Contao 5.3.40
Das Gallery-Template soll den gleichen Link um die Caption bekommen wie das Bild.

{# templates/content_element/gallery.html.twig #} 
{% use "@Contao/component/_figure.html.twig" %}
  {%- block caption_inner -%}
    {{ parent() }}
    {% if image.caption %}
      {% if image.hasLink %}
        <figcaption>
          <a href="{{ image.linkHref }}"{{ image.linkAttributes|raw }}>
            {{ image.caption }}
          </a>
        </figcaption>
      {% else %}
        <figcaption>{{ image.caption }}</figcaption>
      {% endif %}
    {% endif %}
  {% endblock %} 

Bin sehr gespannt. Falls Ihr noch Lehrvideos zu Twig kennt, bitte Info. Das von Maren (CK2023) habe ich mir schon mehrmals angesehen.
Danke!

[zoglo]

Keine Lehrvideos. Twig ist nicht Contao-spezifisch.

Es gibt hier einige viele Templates, welche du dir sicherlich anschauen könntest.
Kopieren ist nicht, du musst sie halt auch verstehen können.

Hier die Beispiele (Für die Nachwelt, es wird irgendwann im main gemerged sein):
https://github.com/contao-thememanag.../pull/44/files

Das "sm" ist der StyleManager. Du solltest diese Anweisungen dann nicht übernehmen.

[Wian]

Einige Videos später habe ich es geschafft und komme mir vor, als hätte ich die Zugspitze zu Fuß bestiegen. (leicht übertrieben - keine Ahnung, wie sich das anfühlt)

Meine Lösung war letztlich eine Test-Contao-Version (5.6) mit dem Template-Studio zu installieren und so konnte ich lange genug auf den ursprünglichen Code starren, bis dann die Erleuchtung kam. Denn in 5.3. hatte ich vor allem Mühe die originalen Twig-Templates zu finden.

[miniA4kuser]

Und wie sieht deine Lösung aus?
Oder hast du deinen Anfangspost entsprechend aktualisiert?

[Wian]

Mein Anfangscode war komplett falsch. Ich habe mir letztlich nur den Block caption_inner aus figure genommen und darin den media-Link platziert und dann nur noch die Ausgabe vom Bild auf Caption geändert. Dann habe ich das noch in eine Variante gepackt, damit ich es pro Inhaltselement zuordnen kann.

Nachdem ich zuerst wie ein Kaninchen vor der Schlange saß, finde ich Twig cool - aber nur mit Unterstützung vom Template Studio - ohne das wäre es für mich ein Grauen.

[dtptiger]

Zeigen zeigen zeigen

[Wian]

{% extends "@Contao/content_element/gallery.html.twig" %}
{% use "@Contao/component/_figure.html.twig" %}
        {%- block caption_inner -%}
               {% 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 }}>{{- figure.metadata.caption|raw -}}</a>
       {%- endblock -%} 

Letztlich liegt ein Varianten-Template unter Gallery.
Am Anfang hatte ich _figure angepasst. Dadurch waren aber auch die captions der normalen content-text-Bilder mit Link.

Allerdings frage ich mich, ob es noch eine elegantere Lösung gibt, denn {% set link_attributes ... %} ist ja nichts neues. Wie integriert man den schon vorhandenen Code besser?

[dtptiger]

Wirklich großen Dank!
Das Twig "zeich" mit den Vererbungen ist mir noch nicht genz geheuer, und deine Ansatz gibt mir Mut die Hölle erneut zu betreten
Die twigs einger Extensions sind ja möglicherweise auch nicht der Weisheit letzter Schluß, denn im augenblick verwende ich CSS um eine dopelt generierte Textausgebe auszublenden.
Was ja geht, doch wirkich sauber ist da ja nicht. Doch befür ich den Entwickler frage warum das so ist will ich erstmal selber verstehen.

Gruß
dtptiger

[derRenner]

Hallo,

geht es dir nur darum, dass die <figcaption> für die Verlinkung mit anklickbar ist?

Mit deiner Template-Anpassung generierst du 2 Verlinkungen in einem Element - und jeder Link hat das idente Ziel ... das sieht z.B. Barrierefreiheit dann nicht so gerne.

Abhilfe: reine (S)CSS Lösung.
Beispiel

.content-gallery {

    figure {
        position: relative;

        > a::before {
            content: '';
            position: absolute;
            inset: 0;
        }
    }    
}

ggf. musst du dein (S)CSS dann noch etwas modifizieren, damit es zu deinem ausgespielten HTML passt.

[dtptiger]

Ok, Butter bei die Fische...

Im Gallery-Creator wird im element "gc-album-list-item" der Teasertext an zwei Stellen eingeblendet, soferne es keine Albumbeschreibung gibt.
Und das versuche ich im Twigtemplate zu verstehen

Diese eine Ausgabe ist ein <figcaption> element welches ich mit CSS ausblenden kann.

Gruß dtptiger

[Wian]

Ich nutze die Galerie gern als eine Art Navigation und mache um die Caption auch noch eine h3 drum. Man klickt also wie bei News auf Überschrift und Bild.

[dtptiger]

Ja, mit PHP hab ich das begriffen, mit twig noch nicht.
Ich werde mir dafür mal die extra Zeit nehmen die es braucht.
Das "Problemchen" ist zum glück nicht drängend.