Contao 5: URL von Inhaltselement Bild finden

[uliverse]

Hi,
ich bin am verzweifeln... Ich benötige die Variable, die mir im Template eine URL zur Quell-Datei eines Bildes (z.B. im Inhaltselement Artikel oder Bild) ausgibt. Ich finde da nichts... {{ dumb() }} gibt mir zwar alle Variablen aus, aber da ist nichts, was ich gebrauchen könnte. Wird die URL gar nicht mehr hinterlegt wie früher?
Ich möchte das Bild als CSS-Hintergrund ausgeben können.
Hat jemand einen Tipp für mich?
Danke!

[mlweb]

Ich habe das für das Inhaltselement vor einiger Zeit als Beispieltemplate hier im Forum zur Verfügung gestellt.
https://community.contao.org/de/show...rwenden-(Twig)

[uliverse]

Ich habe das für das Inhaltselement vor einiger Zeit als Beispieltemplate hier im Forum zur Verfügung gestellt.
https://community.contao.org/de/show...rwenden-(Twig)

Danke, genau was ich gesucht hatte! Es ist also doch etwas komplizierter. Für Inhaltselement „Text” klappt das, wie beschrieben. Leider ist Inhaltselement „Bild” wieder anders, jedenfalls bekomme ich es damit nicht hin... Das Templating-System ist schon ziemlich verzwickt...

[Spooky]

Das selbe Prinzip kannst du auch im Template für das Bild Inhaltselement anwenden.

{% if images %}
    {% set image = images|first %}
    {% set imageUrl = image.image.img.src %}
{% endif %} 

[uliverse]

Danke...
Ich habe es nun so weit, aber offensichtlich mache ich was falsch...

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

{% block content %}
{% if images %}
    {% set image = images|first %}
    {% set imageUrl = image.image.img.src %}
    
<div class="hero_bg" style="background-image: url('imageUrl');"></div>

{% endif %}
{% endblock %}

[Spooky]

Du lässt deine Variable gar nicht ausgeben.

[Spooky]

Aber unabhängig davon: macht es denn überhaupt Sinn das Bild eines Bild Inhaltselementes als Hintergrund Bild (im Element selbst) auszugeben? Warum positionierst du das Bild an sich nicht einfach absolut und kannst so die Vorteile von Responsive Images nutzen.

[uliverse]

Du lässt deine Variable gar nicht ausgeben.

Offensichtlich... Was ist denn die richtige Variable? I am lost...

Warum ich das überhaupt mache: ich möchte, dass die User für die Hero-Gestaltung im BE ein Bild aussuchen können (das dann mit Parallax-Effekt dargestellt werden kann) und ein Text-Element wird dann darüber gelegt. Das hat bis auch 4.13 geklappt, aber jetzt kriege ich das nicht mehr gebastelt.

[Spooky]

Du hast die Variable "imageUrl" benutzt, die musst du nun ausgeben lassen.

[uliverse]

Danke!
Für den Fall, dass das jemand mal liest, hiermit habe ich geschafft:

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

{% block content %}
    {% if images %}
        {% set image = images|first %}
        {% set imageUrl = image.image.img.src %}
        
        <div class="hero_bg" style="background-image: url('{{ imageUrl }}');"></div>
    {% endif %}
{% endblock %} 

[Spooky]

Warum ich das überhaupt mache: ich möchte, dass die User für die Hero-Gestaltung im BE ein Bild aussuchen können (das dann mit Parallax-Effekt dargestellt werden kann) und ein Text-Element wird dann darüber gelegt. Das hat bis auch 4.13 geklappt, aber jetzt kriege ich das nicht mehr gebastelt.

Ja aber wie gesagt - wenn du dafür ohnehin ein separates Element machst, dann kannst du auch gleich einfach das normale Bild nutzen - und somit auch die Vorteile von Responsive Images.

[uliverse]

Ja aber wie gesagt - wenn du dafür ohnehin ein separates Element machst, dann kannst du auch gleich einfach das normale Bild nutzen - und somit auch die Vorteile von Responsive Images.

Das wäre auch eine Möglichkeit, ist aber in diesem Fall schwierig, da sich die Hero-Größe ändern kann. Ich werde es mir aber noch mal genauer anschauen. Danke für den Hinweis.

[Spooky]

In wie fern ist das schwierig?

[mlweb]

Ich habe es mal ausgetestet und es bei den modifizierten Templates zur Verfügung gestellt https://community.contao.org/de/show...840#post595840

[uliverse]

Ich habe es mal ausgetestet und es bei den modifizierten Templates zur Verfügung gestellt https://community.contao.org/de/show...840#post595840

Nice! Der Code sieht elegant aus...

[uliverse]

In wie fern ist das schwierig?

Weil ich dem Redakteur die Möglichkeit geben will, die Höhe des Hero-Elements per CSS im umschließenden Artikel zu steuern (z.B. ganzer Viewport), denn nicht immer wird ein Bild als Hintergrund verwendet, sondern es kann auch mal nur eine Farbfläche sein. Deshalb möchte ich die Höhe nicht über die Bildgröße steuern (obwohl das - wie du sagst - auch seine Vorteile hätte).

[mlweb]

Man kann das ja auch bei Bildern über CSS steuern oder verstehe ich Dein Szenario nicht?

[Spooky]

Die Höhe musst du ja nicht über das Bild steuern, das machst du genau so wie wenn du das Hintergrund Bild verwenden würdest.

[uliverse]

Ich wüßte nicht, wie... Wenn ich ein Bild als Hintergrund einfüge, und auf

background-size: cover;

setze, füllt es immer den zur Verfügung stehenden Raum aus, egal welches Seitenverhältnis. Das ist das ideale Verhalten für ein Cover-Bild (oder Hero), das die ganze Breite und eine gewisse Viewport-Höhe einnehmen soll und wird ja meistens auch so gemacht. Zwar werden dann Bereiche eventuell abgeschnitten und das Bild ist potentiell größer als es sein müßte, aber dafür ist der Rahmen fluid.
Wenn ich ein <picture> Element verwende, hat das ja ein festgelegtes Seitenverhältnis, das ich zwar mit Breakpoints an verschiedene Viewports anpassen kann, aber darin behält es jeweils das Seitenverhältnis bei (es sei denn ich verzerre das Bild).
Aber vielleicht wißt ihr mehr als ich. Ich lerne gerne dazu...

[Spooky]

Ich wüßte nicht, wie... Wenn ich ein Bild als Hintergrund einfüge, und auf

background-size: cover;

setze, füllt es immer den zur Verfügung stehenden Raum aus, egal welches Seitenverhältnis.

Das kannst du mit CSS auch mit normalen Bildern machen (Stichwort object-fit: cover).

[uliverse]

Das kannst du mit CSS auch mit normalen Bildern machen (Stichwort object-fit: cover).

Das kannte ich in der Tat noch nicht! Man lernt nie aus. Danke! Das ist sehr brauchbar.