Contao 5 Twig Template: ce_text Bildadresse herausfinden

Hallo Community

in Contao 3 und 4 konnte ich das hochgeladene Bild vom ce_text Element abfangen und als DIV-Hintergrund auf folgende Weise verwenden

Code:

---

<div style="background-image:url(<?php echo $this->picture['img']['src'] ?>)" >
...
</div>

---

aber in Contao 5, wie könnte man das mit twig machen, also den reinen image source herausfinden?

Herzlichen Dank für die Hinweise

Kommentare im Twig Template sehen so aus :

Code:

---

{# Das ist ein Kommentar #}

---

Die TemplateVars in Twig abfragen: (dump-Anweisungen funktionieren nur im Debug-Modus)

Code:

---

{{ dump() }}

---

TemplateVars nur für das Image abfragen:

Code:

---

{{ dump(image) }}

---

Gibt den Bildpfad des Inhaltselementes Text aus:

Code:

---

{{ image.image.filePath }}

---

Moritz hatte da auch was in Slack geschrieben u.a. mit folgenden Link.

In Zusammenhang mit dem Core template fürs Inhaltselement vom Typ »Text«
evtl. dann so:

Code:

---

{% extends "@Contao/content_element/text.html.twig" %}
{% block content %}
    {% block text_media %}
        {% if image %}
            {% with {figure: image} %}{{ block('figure_component') }}
           
            <pre>{{ figure.image.getImageSrc(true) }}</pre>
           
            {% endwith %}
        {% endif %}
    {% endblock %}
{% endblock %}

---

Weiß aber auch nicht ob es anders/besser geht ...

@Franko
Die von dir gepostete Version gibt den Bildpfad im assets/ Verzeichnis aus, während mein Vorschlag in Post #2 den Pfad in files/... holt.

{{ image.image.filePath }}


funktioniert von überall im Template, und nicht nur aus dem figure-Element heraus, ist viel praktischer.

Vielen Dank, Frage beantwortet.

Die Methode aus Frankos Post finde ich auch nicht schlecht , vor allem dann nicht, wenn entsprechende Bildgrößen angelegt sind. Die Bilddateien(webp) sind dann wesentlich kleiner, was der Performance zugute kommt.

Zitat:

---

Zitat von Franko

Moritz hatte da auch was in Slack geschrieben u.a. mit folgenden Link.

In Zusammenhang mit dem Core template fürs Inhaltselement vom Typ »Text«
evtl. dann so:

Code:

---

{% extends "@Contao/content_element/text.html.twig" %}
{% block content %}
    {% block text_media %}
        {% if image %}
            {% with {figure: image} %}{{ block('figure_component') }}
           
            <pre>{{ figure.image.getImageSrc(true) }}</pre>
           
            {% endwith %}
        {% endif %}
    {% endblock %}
{% endblock %}

---

Weiß aber auch nicht ob es anders/besser geht ...

---

Ne Idee, wie genau das im Gallery Template funktionieren könnte?