Ergebnis 1 bis 3 von 3

Thema: Beim Bildelement das Bild als Hintergrundbild verwenden

  1. #1
    Community-Moderatorin & Contao-Urgestein Avatar von mlweb
    Registriert seit
    10.07.2011.
    Beiträge
    7.430
    Contao-Projekt unterstützen

    Support Contao

    Standard Beim Bildelement das Bild als Hintergrundbild verwenden

    Wegen einer Frage im Forum habe ich es mal getestet. Hier mein Ergebnis

    Code:
    {% extends "@Contao/content_element/image.html.twig" %}
    
    {# Setzen des Hintergrundbildes mit set #}
    {# Verwendung vom images.0.image.img.src, weil image hier schon um ein Figure-Objekt ist #}
    {% if images and not as_editor_view %}
        {% set attributes = attrs()
            .set('style', 'background-image: url(' ~ images.0.image.img.src ~ ')')
            .addClass('content-image--bg-parallax')
            .mergeWith(content_layout_attributes|default) %}
    {% endif %}
    
    {% block content %}
        {#  Damit wird die normale Bildausgabe verhindert, Anzeige nur im Backend #}
        {% if as_editor_view %}
    
            {% if images %}
                {% with {figure: images|first} %}{{ block('figure_component') }}{% endwith %}
            {% endif %}
    
        {% endif %}
    {% endblock %}
    Edit: Verbesserungsvorschlag von @Spooky ergänzt. Danke.
    Geändert von mlweb (21.05.2025 um 17:11 Uhr)
    Ich habe Dir mit meinen Hinweisen geholfen und Du möchtest Dich bedanken?
    Unterstütze bitte das Contao-Projekt (Button Links)
    Weitere Spendenmöglichkeiten
    ------------------------------------------------------------------------------------------------------
    Contao-Dokumentation: Contao-Handbuch und Contao-Entwickler-Doku
    Contao-Online-Video-Kurse: Contao Academy
    Funktionalität erweitern: Contao-Erweiterungen

    Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.




  2. #2
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    37.054
    Partner-ID
    10107

    Standard

    Das set attributes vielleicht noch in {% if images and not as_editor_view %} wrappen.
    » sponsor me via GitHub or Revolut

  3. #3
    Community-Moderatorin & Contao-Urgestein Avatar von mlweb
    Registriert seit
    10.07.2011.
    Beiträge
    7.430
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Ich habe es oben im Code ergänzt.
    Ich habe Dir mit meinen Hinweisen geholfen und Du möchtest Dich bedanken?
    Unterstütze bitte das Contao-Projekt (Button Links)
    Weitere Spendenmöglichkeiten
    ------------------------------------------------------------------------------------------------------
    Contao-Dokumentation: Contao-Handbuch und Contao-Entwickler-Doku
    Contao-Online-Video-Kurse: Contao Academy
    Funktionalität erweitern: Contao-Erweiterungen

    Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.




Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 14 (Registrierte Benutzer: 0, Gäste: 14)

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •