Plugin: Bild in Template über die volle Seite anzeigen

Shopware 6 (German)
1

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:

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

2

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

3

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

4

… 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

5

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

Ungetestet, mit deiner Variabel:

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

1 „Gefällt mir“
6

Moin Tom,

vielen Dank. Das war genau die Lösung, die ich gesucht habe :+1:.

Viele Grüße, Frank

7

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

8

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

LG;LA

9

Hallo @littleAmused,

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

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

10

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) und würde folgendes Snippet für Deine Plugin-Datei vorschlagen:

{% 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 :slight_smile:

LG;LA

1 „Gefällt mir“
11

Moin,

danke Dir. Das werde ich gleich testen …

Viele Grüße, Frank

12

Hallo @littleAmused,

thx, so funktioniert dass.

Viele Grüße, Frank

1 „Gefällt mir“