# Plugin: Bild in Template über die volle Seite anzeigen

**URL:** <https://forum.shopware.com/t/plugin-bild-in-template-ueber-die-volle-seite-anzeigen/100776>\
**Category:** Shopware 6 (German)\
**Created:** [8. August 2023 um 13:39 UTC](https://forum.shopware.com/t/plugin-bild-in-template-ueber-die-volle-seite-anzeigen/100776 "2023-08-08T13:39:26Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![Frank\_2812](https://avatars.discourse-cdn.com/v4/letter/f/b19c9b/32.png) [@Frank\_2812](https://forum.shopware.com/u/Frank_2812)\
**Post date:** [8. August 2023 um 13:39 UTC](https://forum.shopware.com/t/plugin-bild-in-template-ueber-die-volle-seite-anzeigen/100776/1 "2023-08-08T13:39:26Z")

</div>

Hallo,

irgendwie stehe ich gerade auf dem Schlauch: Ich möchte ein Bild, welches ich aus meiner Plugin-Konfiguration auslese, im Twig-Template über die volle Breite, also gestreckt, anzeigen:

```auto
{% if config("myPlugin.config.teaserMedia") %}
   {% set teaser_media = config("myPlugin.config.teaserMedia") %}
   ...
{% endif %}

```

Nimmt man dafür `cms-element-image` ? Wenn ja, wie müsste ich dass konfigurieren und aufrufen ?

Viele Grüße, Frank

---

<div class="post-metadata">

**Author:** ![R4M](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/r4m/32/9983_2.png) [@R4M](https://forum.shopware.com/u/R4M)\
**Post date:** [8. August 2023 um 14:01 UTC](https://forum.shopware.com/t/plugin-bild-in-template-ueber-die-volle-seite-anzeigen/100776/2 "2023-08-08T14:01:42Z")

</div>

Wie ist denn diese Frage gemeint? Bild als Hintergrundbild? Bild in einer Landingpage? Wo im Template?

---

<div class="post-metadata">

**Author:** ![Frank\_2812](https://avatars.discourse-cdn.com/v4/letter/f/b19c9b/32.png) [@Frank\_2812](https://forum.shopware.com/u/Frank_2812)\
**Post date:** [8. August 2023 um 14:05 UTC](https://forum.shopware.com/t/plugin-bild-in-template-ueber-die-volle-seite-anzeigen/100776/3 "2023-08-08T14:05:58Z")

</div>

ich habe einen Controller, der eine eine zusätzliche Shopseite erstellt und dafür ein eigenes Twig-Template mitbringt.

Dort möchte ich, ganz oben als Teaser, das Bild anzeigen.

Viele Grüße, Frank

---

<div class="post-metadata">

**Author:** ![Frank\_2812](https://avatars.discourse-cdn.com/v4/letter/f/b19c9b/32.png) [@Frank\_2812](https://forum.shopware.com/u/Frank_2812)\
**Post date:** [8. August 2023 um 14:45 UTC](https://forum.shopware.com/t/plugin-bild-in-template-ueber-die-volle-seite-anzeigen/100776/4 "2023-08-08T14:45:20Z")

</div>

… also jetzt noch mal ganz einfach gefragt:

mit config(„myPlugin.config.teaserMedia“) kommt die id des Bildes zurück, welches in der Plugin-Konfiguration ausgewählt bzw. hochgeladen wurde.

„teaser\_media“ =\> „0c14a4486bbc43a9a81534b2f9672cfc“

Wie kann ich nun mittels der Variable `teaser_media` das Bild gestreckt, über die volle Breite, darstellen?

Viele Grüße, Frank

---

<div class="post-metadata">

**Author:** ![tom\_prok](https://avatars.discourse-cdn.com/v4/letter/t/e99b99/32.png) [@tom\_prok](https://forum.shopware.com/u/tom_prok)\
**Post date:** [8. August 2023 um 14:55 UTC](https://forum.shopware.com/t/plugin-bild-in-template-ueber-die-volle-seite-anzeigen/100776/5 "2023-08-08T14:55:12Z")

</div>

Moin Frank,

ist das Problem das du nicht an die Bilddatei sondern nur an die Id rankommst?

Dann schau mal hier: [Using custom fields of type media - Shopware Developer](https://developer.shopware.com/docs/guides/plugins/plugins/plugin-fundamentals/custom-fields-of-type-media)

Ungetestet, mit deiner Variabel:

```auto
    {% set mediaCollection = searchMedia([teaser_media], context.context) %}
	{% set sportsMedia = mediaCollection.get(teaser_media) %}
	<img class="w-100 mw-100" src="{{sportsMedia.url}}" alt="TESt123">

```

Viele Grüße  
Tom

---

<div class="post-metadata">

**Author:** ![Frank\_2812](https://avatars.discourse-cdn.com/v4/letter/f/b19c9b/32.png) [@Frank\_2812](https://forum.shopware.com/u/Frank_2812)\
**Post date:** [9. August 2023 um 07:24 UTC](https://forum.shopware.com/t/plugin-bild-in-template-ueber-die-volle-seite-anzeigen/100776/6 "2023-08-09T07:24:15Z")

</div>

Moin Tom,

vielen Dank. Das war genau die Lösung, die ich gesucht habe 👍.

Viele Grüße, Frank

---

<div class="post-metadata">

**Author:** ![Frank\_2812](https://avatars.discourse-cdn.com/v4/letter/f/b19c9b/32.png) [@Frank\_2812](https://forum.shopware.com/u/Frank_2812)\
**Post date:** [14. August 2023 um 13:53 UTC](https://forum.shopware.com/t/plugin-bild-in-template-ueber-die-volle-seite-anzeigen/100776/7 "2023-08-14T13:53:38Z")

</div>

Hallo,

wie bekomme ich das Bild über die volle Breite angezeigt, so dass es links und rechts bis zum Rand geht?

Die Klasse „w-100 mw-100“ bleibt im dreispaltigen Layout, so dass links und rechts Freiräume entstehen.

Viele Grüße, Frank

---

<div class="post-metadata">

**Author:** ![littleAmused](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/littleamused/32/13261_2.png) [@littleAmused](https://forum.shopware.com/u/littleAmused)\
**Post date:** [14. August 2023 um 15:47 UTC](https://forum.shopware.com/t/plugin-bild-in-template-ueber-die-volle-seite-anzeigen/100776/8 "2023-08-14T15:47:37Z")

</div>

Moin Frank!

Ich vermute, dass um die Bilder herum noch ein `div`-Element mit der Klasse „container“ ist - diese haben im Standard einen Padding, der den Abstand verursachen kann - gib den Containern einfach zusätzlich die Klasse `p-0`, um die Paddings zu entfernen.

Außerdem ist/sind meistens innerhalb jedes Containers ein (oder mehrere) `div` 's mit der Klasse „row“ - hier kannst du mit `no-gutters` (Shopware v6.4) oder `g-0` (Shopware v6.5) bewirken, dass die Innenabstände der einzelnen Spalten entfernt werden - Mehr Info: [Gutters · Bootstrap v5.3](https://getbootstrap.com/docs/5.3/layout/gutters/#no-gutters)

LG;LA

---

<div class="post-metadata">

**Author:** ![Frank\_2812](https://avatars.discourse-cdn.com/v4/letter/f/b19c9b/32.png) [@Frank\_2812](https://forum.shopware.com/u/Frank_2812)\
**Post date:** [14. August 2023 um 17:15 UTC](https://forum.shopware.com/t/plugin-bild-in-template-ueber-die-volle-seite-anzeigen/100776/9 "2023-08-14T17:15:43Z")

</div>

Hallo @littleAmused,

danke erstmal für den Tipp. Allerdings komme ich da noch nicht so recht weiter:

```auto
{% block base_content %}

    {% if config("MeinPlugin.config.teaserMedia") %}
        {% set teaser_media_id = config("MeinPlugin.config.teaserMedia") %}
        
        {% set mediaCollection = searchMedia([teaser_media_id], context.context) %}
	    {% set media = mediaCollection.get(teaser_media_id) %}
  
        <img class="w-100 mw-100" src="{{media.url}}" alt="Teaser">
  
    {% endif %}

    ...

{% endblock %}

```

Das Template beginnt mit `{% block base_content %}` und das erste, was ich tue, ist das Bild zu laden und darzustellen. Der Container mit den Paddings ist da aber schon vorhanden, wird also wohl schon früher erstellt. Wie bekomme ich die Paddings für das Bild denn nun weg?

Viele Grüße, Frank

---

<div class="post-metadata">

**Author:** ![littleAmused](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/littleamused/32/13261_2.png) [@littleAmused](https://forum.shopware.com/u/littleAmused)\
**Post date:** [15. August 2023 um 08:34 UTC](https://forum.shopware.com/t/plugin-bild-in-template-ueber-die-volle-seite-anzeigen/100776/10 "2023-08-15T08:34:01Z")

</div>

Moin!

In dem Fall kannst du einen Block nehmen, der „höher“ liegt, also den „base\_content“ Block selbst umschließt. Ich hab da mal einen Blick in die Base-Datei des Standard-Themes geworfen ([https://github.com/shopware/platform/blob/v6.5.4.0/src/Storefront/Resources/views/storefront/base.html.twig#L81](https://github.com/shopware/platform/blob/v6.5.4.0/src/Storefront/Resources/views/storefront/base.html.twig#L81)) und würde folgendes Snippet für Deine Plugin-Datei vorschlagen:

```auto
{% block base_main_inner %}
    {% block base_main_container %}
        <div class="container-main">
            {{ block('base_breadcrumb') }}

            {% block base_content %}
                {% if config("MeinPlugin.config.teaserMedia") %}
                    {% set teaser_media_id = config("MeinPlugin.config.teaserMedia") %}
                    {% set mediaCollection = searchMedia([teaser_media_id], context.context) %}
                    {% set media = mediaCollection.get(teaser_media_id) %}

                    <img class="w-100 mw-100" src="{{media.url}}" alt="Teaser">
                {% endif %}

                <div class="container">
                    ...
                </div>
            {% endblock %}
        </div>
    {% endblock %}
{% endblock %}

```

In dem Code habe ich das `div` mit der Klasse „container“ vom Block „base\_main\_inner“ in den Block „base\_content“ verschoben. Beachte bitte, dass du ggf. andere Bereiche nun explizit erneut mit einem „container“-div umschließen musst.

Hoffe, es hilft 🙂

LG;LA

---

<div class="post-metadata">

**Author:** ![Frank\_2812](https://avatars.discourse-cdn.com/v4/letter/f/b19c9b/32.png) [@Frank\_2812](https://forum.shopware.com/u/Frank_2812)\
**Post date:** [15. August 2023 um 09:56 UTC](https://forum.shopware.com/t/plugin-bild-in-template-ueber-die-volle-seite-anzeigen/100776/11 "2023-08-15T09:56:37Z")

</div>

Moin,

danke Dir. Das werde ich gleich testen …

Viele Grüße, Frank

---

<div class="post-metadata">

**Author:** ![Frank\_2812](https://avatars.discourse-cdn.com/v4/letter/f/b19c9b/32.png) [@Frank\_2812](https://forum.shopware.com/u/Frank_2812)\
**Post date:** [15. August 2023 um 10:22 UTC](https://forum.shopware.com/t/plugin-bild-in-template-ueber-die-volle-seite-anzeigen/100776/12 "2023-08-15T10:22:48Z")

</div>

Hallo @littleAmused,

thx, so funktioniert dass.

Viele Grüße, Frank