Contao 5 Twig Template: ce_text Bildadresse herausfinden

[rumata]

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

<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

[bizon]

Kommentare im Twig Template sehen so aus :

{# Das ist ein Kommentar #}

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

{{ dump() }}

TemplateVars nur für das Image abfragen:

{{ dump(image) }}

Gibt den Bildpfad des Inhaltselementes Text aus:

{{ image.image.filePath }}

[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:

{% 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 ...

[bizon]

@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.

[rumata]

{{ image.image.filePath }}


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

Vielen Dank, Frage beantwortet.

[bizon]

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.

[highdawndesign]

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:

{% 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?