Bilder im eigenen Theme

Shopware 5 Themes & Design
1

Ich habe das Problem das ich in meiner LEss Datei vom eigenen Theme keine Bilder verlinkt bekomme.

 

Beispiel:

.product--box .product--badges .badge--newcomer{
background: url('../img/Neu-Button_100px.png') 50% 50% no-repeat;
}

Anbei die Theme Verzeichnisstruktur:

mytheme

  • frontend
    • _public
      • src
        • less
          • all.less ( mit obigem css schnipsel)
        • img
          • Neu-Button_100px.png  (wwird nicht angezeigt und link führt ins leere auf der Webseite)

Der Link führt dann auf der Webseite zu : myseite.de

 

Was mache ich falsch? Im Templates ordner der 4er Version klappte alles noch…

2

@pixelecho‍,

da habe ich auch eine Ewigkeit gebraucht bis es geklappt hat.

musste es dann so machen.

Ich habe in /themes/Frontend/mein_Theme/frontend/_public/src/less/_components/meine.less folgendes drin.

/* Pfad für Bilder */
@baseUrlImage: "../../../src/img";

und dann die Bilder so in der less

background: url('@{baseUrlImage}/Neu-Button_100px.png') 50% 50% no-repeat;

ich glaube aber das es so auch nicht funktioniert hatte, obwohl es eigentlich das gleiche wie oben ergibt, ist aber schon lange her:

background: url('../../../src/img/Neu-Button_100px.png') 50% 50% no-repeat;

Uwe

1 „Gefällt mir“
3

Wieso die Bilder nicht im Media Ordner einfügen und in der Less

Background: url (/media/…);

Wenn du das Bild über den Medien Manager im Backend importierst, das Bild anklickst hast du unten rechts den pfad…!

4

Danke für den Tip Uwe,

leider klappt es dennoch nicht. Habe in meiner all.less die _components/meine.less importiert. Schade das sich Shopware zu diesem Thema bedeckt hält. In der 3.5er und bis zur 4.1er ging es ja auch ohne Probleme erst seit der Umstellung auf das Themes folder funktioniert es nicht mehr. Da Bilder und css Dateien anscheind an verschiedenen Orten liegen. Den Media Ordner kann man zwar nutzen halte ich aber für nicht sinvoll, da das Bild im Grunde ja zum Theme gehört.

Dann muss ich wohl oder übel einen Absoluten Pfad als Variable im LESS hinterlegen was ich eigentlich nicht machen wollte.

Weiter ist mir aufgefallen das ich im Chrome nicht in das Forum Textfenster schreiben kann… das ganze funktioniert bei mir nur im Firefox. Sehr seltsam… aber das ist hier Offtopic.

5

Hallo pixelecho

Die Lösung habe ich dir oben geschrieben, das funktioniert, war in der 4 er Version nicht anders, ausser das der Bildpfad jetzt kürzer ist.

Hat glaube ich mit der Performance zu tun.

VG  Zeljko

6

Der relative Pfad zu Deinen Bildern passt nicht.
Also, Bilder kommen in (inkl. Beispiel) …

frontend/_public/src/img/example.png

In deiner LESS lassen diese sich folgend einbinden:

.foo {

background: url("../../img/example.png");

}

Das klappt :wink:
Und, absolute Pfade würde ich vermeiden - was ist, wenn der Shop mal irgendwo anders hinwandert?
Dann müsste man das alles anpassen … die Variante hier gerade ist die sicherste und wie ich finde auch die einfachste.
Gerade, wenn man Bilder im Theme mitliefern möchte.

Schöne Grüße,
Niklas

7

@pixelecho schrieb:

Danke für den Tip Uwe,

leider klappt es dennoch nicht. Habe in meiner all.less die _components/meine.less importiert. Schade das sich Shopware zu diesem Thema bedeckt hält. In der 3.5er und bis zur 4.1er ging es ja auch ohne Probleme erst seit der Umstellung auf das Themes folder funktioniert es nicht mehr. Da Bilder und css Dateien anscheind an verschiedenen Orten liegen. Den Media Ordner kann man zwar nutzen halte ich aber für nicht sinvoll, da das Bild im Grunde ja zum Theme gehört.

Dann muss ich wohl oder übel einen Absoluten Pfad als Variable im LESS hinterlegen was ich eigentlich nicht machen wollte.

Weiter ist mir aufgefallen das ich im Chrome nicht in das Forum Textfenster schreiben kann… das ganze funktioniert bei mir nur im Firefox. Sehr seltsam… aber das ist hier Offtopic.

Wenn du  möchtest kannst du mir mal den FTP-Zugang senden da schaue ich mir mal das ganze an , ich habe es bei mir so umgesetzt und es funktioniert.

Mit dem Mediamanager hatte ich es vorher auch eingebunden, man hat aber das Problem wenn man das Template auf einem Testshop schiebt fehlen die Bilder die man dann erst wieder über den Mediamanager Hochladen muss, die Bilder von Style sollten schon auch direkt im eigenen Theme liegen.

Uwe

8

Ich werde das ganze die Tage noch einmal ausprobieren und euch dann berichten. Danke erst mal für die Zahlreichen Antworten :wink: