TWIG Gallery - Link erweitern für Lightbox mit Attributen aus dem Bild

[winchester]

Hy Leute,

Ich komm leider mit den Twig Templates überhaupt nicht klar - ja es scheint viele Verbesserungen in der Architektur zu haben nur wenn man nicht der Hardcore Entwickler ist, empfinde ich es einfach als einen neuen Layer of ethernal suffering....

Folgende Aufgabe - wir verwenden UIKIT für die Lightbox und ich will dort eine Caption einfügen.

Was habe ich geschafft:
Lightbox öffnet sich und die Caption (statischer text) wird angezeigt.

Wie schaffe ich es dem link nun die Variablen der Bilder (Alt, Caption, Author usw...) mitzugeben?

{% block media_link %}
    {% set link_attributes = attrs(link_attributes|default).set('data-caption', '<h3>headline</h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed risus tortor, aliquam nec iaculis sed, elementum at nibh. Mauris eget blandit lectus, nec porttitor lorem. Etiam pellentesque lacus erat. Vivamus porttitor scelerisque accumsan. Vivamus placerat nulla finibus neque efficitur interdum. Integer porttitor ut tellus pharetra aliquam. Nunc rhoncus non urna in iaculis. Donec vel gravida nulla, facilisis feugiat arcu. Nullam ac quam ipsum. Cras consequat ante non finibus porttitor. Nam elementum, augue quis dignissim pellentesque, velit ipsum finibus nibh, eu mattis quam neque id massa.') %}
    {{ parent() }}
{% endblock %} 

Mein Problem hier ist - ich habe keine Ahnung wo ich mich hier befinde - das Ganze wurde für mich so abstrakt und ich sehe gerade kein Licht.

Ich denke ich muss hier massiv umdenken aber ich finde den Anfang des roten Fadens einfach nicht.

Mein aktueller Stand ist, dass die Variablen die ich suche gar nicht da sind weil ich mich im Element "Media" befinde und jetzt bin ich ratlos - hat jemand hier einen hint für mich?

Viele Grüße

[winchester]

Puh hat den keiner einen Tipp für mich?
Ich finde einfach den Anfang des roten Fadens nicht und fische da im Trüben.

Ein Beispiel oder eine Anregung würde mir schon sehr helfen

Viele Grüße

[Spooky]

Ich zumindest verstehe generell nicht, was genau du haben möchtest. Vielleicht ist es am besten, wenn du Beispielhaft mal den aktuellen HTML Output postest - und danach welchen HTML Output du nun gerne haben möchtest.

[winchester]

Es geht darum, dass bei der Gallery die Metadaten ausgelesen werden sollen vom Bild.

Ich verwende das UIKIT und möchte hier die Caption erweitern:
https://getuikit.com/docs/lightbox#caption

<div uk-lightbox>
    <a href="image.jpg" data-caption="Caption - HIER MÖCHTE ICH DIE META TEXTE AUSGEBEN"></a>
</div> 

Html technische ist das kein Problem und funktioniert bestens und ich habe das bereits geschafft meinen Platzhalter auszugeben (siehe Beispiel) aber ich stecke fest und weiß nicht wie ich an die Meta Attribute des Bildes kommen.

Habe schon alle Blöcke probiert aber keiner scheint diese Variablen zu haben - ich finde eine Spur und die führt jedes Mal ins Leere

Kannst du damit was anfangen?

[Spooky]

Leider nein, ich verstehe immer noch nicht was du haben möchtest. Betrifft deine Frage nun "UIKIT" oder Contao bzw. Twig?

[winchester]

UIKIT Ist kein Problem, mein Output sieht so aus in der Galerie:

<li>                
<figure>
<a href="bildpfad.jpg" data-lightbox="lb36190" role="button">                                                                                    
<img src="/files/inhalte/bildpfad.jpg" alt="" width="1024" height="708">
</a>
</figure>
</li> 

Was ich brauche:

<li>                
<figure>
<a href="bildpfad.jpg" data-lightbox="lb36190" role="button" data-caption="Caption - HIER MÖCHTE ICH DIE META TEXTE AUSGEBEN vom Bild ">                                                                                    
<img src="/files/inhalte/bildpfad.jpg" alt="" width="1024" height="708">
</a>
</figure>
</li> 

Was ich aktuell habe:

{% block media_link %}
    {% set link_attributes = attrs(link_attributes|default).set('data-caption', 'MUSTERTEXT') %}
    {{ parent() }}
{% endblock %} 

Eingefügt sollen die Metadaten von hier:
https://docs.contao.org/manual/en/fi...ger/meta-data/

Ich schaff es einfach nicht über den Mustertext hinauszukommen - ich habe einfach keinen Ansatz wie ich im Block Media_link auf die Metadaten des Bildes zugreifen kann.

Hoffe ich konnte das gut erklären

[Spooky]

Was genau möchtest du in data-caption ausgeben?

[winchester]

Am besten alles - super Start wäre Caption oder LIcense URL

[Spooky]

Und für welches Inhaltselement bzw. Template?

[winchester]

Gallery

Hab es schon erweitert damit die Lightbox geht:

Momentan sieht es so aus:

{# Mit dem Block kann man die html Attribute für das ul dieses Elements hinzufügen #}
{% block list_attributes %}
    {# mit parent() lädt man den Block vom ursprünglichen Inhaltselement, ohne parent{} würde man den gesamten Block überschreiben #}
    {{ parent() }}
    {% if data.fullsize %}
        uk-lightbox="animation: slide"
    {% endif %}
{% endblock %}

{% block media_link %}
    {% set link_attributes = attrs(link_attributes|default).set('data-caption', {{ "The %s in %s falls mainly on the %s!"|format('alpha','bravo','charlie') }}) %}
    {{ parent() }}
{% endblock %} 

[Spooky]

Mit {{ dump() }} kannst du dir die zur Verfügung stehenden Template Variablen ausgeben lassen (siehe https://docs.contao.org/manual/en/la...tes/twig/data/). Die Metadaten des Bildes stehen dir in figure.metadata zur Verfügung.

[winchester]

Ja das dump kenne ich nur das verwirrt mich maximal

folgendes gemacht:

{% block figure.metadata %}
    {{ dump() }}
{% endblock %} 

Ergibt einen Fehler

{% block figure_metadata %}
    {{ dump() }}
{% endblock %} 

Ergibt nichts

{% block metadata %}
    {{ dump() }}
{% endblock %} 

Ergibt irgendwas

array:20 [?
  "type" => "gallery"
  "template" => "content_element/gallery/gallery_grid"
  "as_editor_view" => false
  "data" => array:115 [?]
  "nested_fragments" => []
  "section" => "main"
  "properties" => []
  "element_html_id" => ""
  "element_css_classes" => ""
  "headline" => array:2 [?]
  "sort_mode" => null
  "randomize_order" => false
  "limit" => null
  "images" => array:7 [?]
  "items_per_page" => null
  "items_per_row" => 4
  "contao" => 
Contao\CoreBundle\Twig\Global
\
ContaoVariable {#2111 ?}
  "request_token" => Stringable@anonymous {#1965 ?}
  "app" => 
Symfony\Bridge\Twig
\
AppVariable {#2010 ?}
  "attributes" => 
Contao\CoreBundle\String
\
HtmlAttributes {#3140 ?}
]

Wo ich einfach überfordert bin ist die Frage wie bekomm ich den Block Metadata in den Block media_link und kann ich im Block Media_link überhaupt darauf zugreifen?
Zum Start wäre ich schon mal happy wenn ich irgendwas ausgeben könnte aber hier scheitert es schon bei mir weil metadata irgendwie.

[Spooky]

figure.metadata ist kein Block. figure ist ein dir im Template zur Verfügung stehendes Objekt (das Figure Objekt, wo alle Informationen für das Figure drin stehen, inkl. Metadaten).

[zonky]

Ich schaff es einfach nicht über den Mustertext hinauszukommen - ich habe einfach keinen Ansatz wie ich im Block Media_link auf die Metadaten des Bildes zugreifen kann.

z. B. könntest Du hier gucken https://pdir.de/news/contao-5-twig-t...ngen.html#file wie das gemacht wurde

{%- set metaFields = data.singleSRC|file('metaFields') %}

{{ dump(metaFields) }}

{%- set metaData = data.singleSRC|file('metadata') %}

{{ dump(metaData) }} 

[Spooky]

Das ist nicht notwendig, in figure.metadata sollte bereits alles drin sein.

[winchester]

Hy Leute,

{{figure.metadata.caption}} 

Funktioniert wunderbar aber wenn ich die link Attribute erweitere, wird es als unkomplizierter Text ausgegeben.

   {% set link_attributes = attrs(link_attributes|default).set('data-caption', "{{figure.metadata.caption}}") %} 

Spielt keine Rolle ob einfache oder doppelte Anführungszeichen

a href="/files/01.jpeg" data-lightbox="lb36190" data-caption="{{figure.metadata.caption}}" role="button"> 

Was ich zusätzlich nicht verstehe wie mit dump hilft - bzw. wie würde ich in der Praxis es schaffen auf Metadata zu kommen? Das ist für mich ein wenig ein generisches Kauderwelsch

array:36 [?
  "figure" => 
Contao\CoreBundle\Image\Studio
\
Figure {#1186 ?}
  "items" => array:3 [?]
  "type" => "gallery"
  "template" => "content_element/gallery/gallery_grid"
  "as_editor_view" => false
  "data" => array:115 [?]
  "nested_fragments" => []
  "section" => "main"
  "properties" => []
  "element_html_id" => ""
  "element_css_classes" => ""
  "headline" => array:2 [?]
  "sort_mode" => null
  "randomize_order" => false
  "limit" => 3
  "images" => array:3 [?]
  "items_per_page" => 3
  "items_per_row" => 4
  "contao" => 
Contao\CoreBundle\Twig\Global
\
ContaoVariable {#2111 ?}
  "request_token" => Stringable@anonymous {#1965 ?}
  "app" => 
Symfony\Bridge\Twig
\
AppVariable {#2010 ?}
  "attributes" => 
Contao\CoreBundle\String
\
HtmlAttributes {#2702 ?}
  "list" => array:21 [?]
  "tag_name" => "ul"
  "number_of_items" => 3
  "limit_elements" => false
  "number_of_pages" => 1.0
  "add_pagination" => false
  "list_attributes" => 
Contao\CoreBundle\String
\
HtmlAttributes {#2725 ?}
  "_parent" => array:28 [?]
  "_seq" => array:3 [?]
  "loop" => array:8 [?]
  "item" => 
Contao\CoreBundle\Image\Studio
\
Figure {#1186 ?}
  "_key" => 0
  "figure_attributes" => 
Contao\CoreBundle\String
\
HtmlAttributes {#2743 ?}
  "link_attributes" => 
Contao\CoreBundle\String
\
HtmlAttributes {#2755 ?}
] 

[Spooky]

Was meinst du mit "unkomplizierter Text"?

[winchester]

UNKOMPILIERT - verdammte Autokorrektur

[Spooky]

Ich denke dir fehlen hier noch einige Twig Grundlagen. Mit {{ … }} gibst du Inhalte direkt an dieser Stelle aus, ähnlich zu <?= … ?> in PHP Templates. Du willst aber die Variable figure.metadata.caption nicht direkt ausgeben, sondern zu dem entsprechenden HTML Attribut hinzufügen, also als Parameter an die set() Funktion übergeben.

Momentan übergibst du den String {{figure.metadata.caption}} anstatt die Variable bzw. den Inhalt von figure.metadata.caption.

[winchester]

Danke vielmals für deine Geduld - ich konnte auch kleine Erfolge verzeichnen

Du hast Recht - mir fehlen hier bestimmt noch einige Basics und ich und eine Kollegin tun uns damit unglaublich schwer.
Irgendwann waren wir mit unserem Latein am Ende und haben alle weiteren Anpassungen dann einfach direkt in der alten HTML 5 Umgebung gelöst.

Wir machen kleinere Sachen so gut wie möglich in TWIG aber für größere Sachen scheitern wir einfach ehrenlos

Aber deine Tipps haben mich schon ein gutes Stück weiter gebracht