# Statische Ressourcen wie Bilder, Schriften im Plugin Public Folder

**URL:** <https://forum.shopware.com/t/statische-ressourcen-wie-bilder-schriften-im-plugin-public-folder/60799>\
**Category:** Programmierung\
**Created:** [1. August 2019 um 17:52 UTC](https://forum.shopware.com/t/statische-ressourcen-wie-bilder-schriften-im-plugin-public-folder/60799 "2019-08-01T17:52:54Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![mdsw](https://avatars.discourse-cdn.com/v4/letter/m/94ad74/32.png) [@mdsw](https://forum.shopware.com/u/mdsw)\
**Post date:** [1. August 2019 um 17:52 UTC](https://forum.shopware.com/t/statische-ressourcen-wie-bilder-schriften-im-plugin-public-folder/60799/1 "2019-08-01T17:52:54Z")

</div>

Moin moin,&nbsp;

hat es schon mal jemand geschafft eine statische Ressource wie ein Bild oder eine Schriftart über ein Plugin einzubinden und in CSS / SCSS zu verwenden?

&nbsp;

Unter&nbsp;[Add Custom Assets | Shopware Documentation](https://docs.shopware.com/en/shopware-platform-dev-en/how-to/storefront-assets) steht dort Folgendes:

> If you want to add static assets like images or fonts, you can place them in the public folder of your Plugin. They will be copied to the public folder of Shopware 6 when you build the storefront. Your plugin shouldn’t put its assets into another directory outside of its scope though - but how do those assets from plugins actually work then?

&nbsp;

Das hilft mir jedoch nicht weiter. Wie muss dieser Ordner aussehen? Und wie verwende ich ein Bild darin beispielsweise als Hintergrundbild in einem CSS Befehl - also wie lautet der Pfad zur Datei…&nbsp;

&nbsp;

---

<div class="post-metadata">

**Author:** ![Larineso](https://avatars.discourse-cdn.com/v4/letter/l/b5e925/32.png) [@Larineso](https://forum.shopware.com/u/Larineso)\
**Post date:** [1. August 2019 um 19:21 UTC](https://forum.shopware.com/t/statische-ressourcen-wie-bilder-schriften-im-plugin-public-folder/60799/2 "2019-08-01T19:21:43Z")

</div>

Ich habe eine Schrift eingebunden, indem ich ich sie unter src/Resources/storefront/asset/font/arial eingefügt und dann über font-face eingebunden habe.

```
// src/Resources/storefront/style/_arial-fontface.scss
@font-face {
    font-family: 'Arial';
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url(../asset/font/arial/arial.woff2) format('woff2'),
    url(../asset/font/arial/arial.woff) format('woff');
}

```

Danach einmal ./psh.phar storefront:build ausführen.&nbsp;

Ich habe den asset-Ordner genommen, weil der bei der Generierung des Plugins automatisch erstellt wurde und ich in den Docs nichts finden konnte. Es kann also sein, dass sich an der Ordnerstruktur noch was ändert, aber das wäre ja auch kein Problem. Habe es nur mit dem master auf Github getestet, nicht mit der EA.

Liebe Grüße

PS: Komischerweise funktioniert es nur dann, wenn die scss-Datei direkt im style-Ordner liegt. Wenn ich in styles einen neuen Ordner vendor anlege, die scss-Datei dort platziere und @font-face an den neuen Pfad anpasse, kommt es zu Fehlern.

PPS: Ich sehe gerade, dass es mit dem vendor-Ordner funktioniert, wenn man den Pfad nicht&nbsp;anpasst. Eigentlich müsste man den Pfad mit …/…/asset/usw angeben, aber dann kommt es zu Fehlern. Wenn ich den Pfad falsch mit …/ angebe, kompiliert Shopware alles korrekt. Nur PhpStorm meckert, weil der Pfad so ja eigentlich falsch ist. Das liegt vermutlich&nbsp;an der Art wie Shopware die Themes zur Zeit kompiliert.

---

<div class="post-metadata">

**Author:** ![mdsw](https://avatars.discourse-cdn.com/v4/letter/m/94ad74/32.png) [@mdsw](https://forum.shopware.com/u/mdsw)\
**Post date:** [2. August 2019 um 06:55 UTC](https://forum.shopware.com/t/statische-ressourcen-wie-bilder-schriften-im-plugin-public-folder/60799/3 "2019-08-02T06:55:02Z")

</div>

Ich hatte das so versucht und die Pfade mit **…/…/asset/** in einem **vendor-** Ordner angegeben. Meine IDE hat die Datei so finden können, aber in der Storefront waren die Pfade nicht passend. Ich werde das mal testen, wie du beschrieben hast. Danke!

---

<div class="post-metadata">

**Author:** ![imises](https://avatars.discourse-cdn.com/v4/letter/i/b2d939/32.png) [@imises](https://forum.shopware.com/u/imises)\
**Post date:** [2. August 2019 um 07:54 UTC](https://forum.shopware.com/t/statische-ressourcen-wie-bilder-schriften-im-plugin-public-folder/60799/4 "2019-08-02T07:54:15Z")

</div>

Ich hatte damit bisher auch keine Probleme in SW6 (Font und Images per SCSS).

Was ich allerdings nicht hinbekommen habe ist, ein Bild aus dem Plugin Ordner direkt (img-Tag) in einem Template zu integrieren.  
Die Assets werden&nbsp;im Public Ordner immer in einem dynamisch benannten Ordner abgelegt. Ich habe aber keine Möglichkeit gefunden, an den&nbsp;dynamischen Pfad zu kommen.

Hat da evtl. jemand einen Tipp?

---

<div class="post-metadata">

**Author:** ![mdsw](https://avatars.discourse-cdn.com/v4/letter/m/94ad74/32.png) [@mdsw](https://forum.shopware.com/u/mdsw)\
**Post date:** [3. August 2019 um 12:52 UTC](https://forum.shopware.com/t/statische-ressourcen-wie-bilder-schriften-im-plugin-public-folder/60799/5 "2019-08-03T12:52:48Z")

</div>

@Larineso‍

Irgendwie funktioniert das bei mir nicht. Getestet in verschiedenen aktuellen commits…&nbsp;

&nbsp;

Ich habe meine Schriftart unter verschiedenen Ordnern getestet:&nbsp;

- src/Resources/storefront/ **asset** /font/SCHRIFT.ttf
- src/Resources/storefront/ **assets** /font/SCHRIFT.ttf
- src/Resources/ **dist** /storefront/ **asset** /font/SCHRIFT.ttf
- src/Resources/ **dist** /storefront/ **assets** /font/SCHRIFT.ttf

Angegeben habe ich die Schriftart im SCCS vendor Ordner (src/Resources/storefront/style/vendor/font.scss):

- …/ **asset** /font/SCHRIFT.ttf
- …/ **assets** /font/SCHRIFT.ttf

Im Frontend sucht das System die Schriftart unter:&nbsp;

- [http://192.168.33.10/theme/18c30fa9eb1a357e7d3a2f16b472566d/](http://192.168.33.10/theme/18c30fa9eb1a357e7d3a2f16b472566d/) **asset** /font/SCHRIFT.ttf
- [http://192.168.33.10/theme/18c30fa9eb1a357e7d3a2f16b472566d/](http://192.168.33.10/theme/18c30fa9eb1a357e7d3a2f16b472566d/) **assets** /font/SCHRIFT.ttf

&nbsp;

Wenn ich mir dir Sources anschaue habe ich nicht das Gefühl, dass meine Schriften irgendwie erreichbar wären… Der Order&nbsp;theme/18c30fa9eb1a357e7d3a2f16b472566d beinhaltet nur css und js…

&nbsp;

&nbsp;

 ![](https://europe1.discourse-cdn.com/flex013/uploads/shopware/original/2X/6/67a8ba720139128fe1ea7f64ed758870e8c8844b.png)

---

<div class="post-metadata">

**Author:** ![Larineso](https://avatars.discourse-cdn.com/v4/letter/l/b5e925/32.png) [@Larineso](https://forum.shopware.com/u/Larineso)\
**Post date:** [3. August 2019 um 14:41 UTC](https://forum.shopware.com/t/statische-ressourcen-wie-bilder-schriften-im-plugin-public-folder/60799/6 "2019-08-03T14:41:56Z")

</div>

Der Pfad sieht gut aus. Wenn ich den Pfad richtig angegeben habe, hat shopware immer in theme/asset/usw gesucht, also ohne hash.

Offenbar werden die assets nur nicht in dein Theme geladen.

Hast du&nbsp;./psh.phar storefront:build ausgeführt?

Liebe Grüße

---

<div class="post-metadata">

**Author:** ![mdsw](https://avatars.discourse-cdn.com/v4/letter/m/94ad74/32.png) [@mdsw](https://forum.shopware.com/u/mdsw)\
**Post date:** [3. August 2019 um 15:03 UTC](https://forum.shopware.com/t/statische-ressourcen-wie-bilder-schriften-im-plugin-public-folder/60799/7 "2019-08-03T15:03:49Z")

</div>

Hallo @Larineso‍

ich habe&nbsp; **./psh.phar storefront:build** und auch&nbsp; **./psh.phar storefront:dev** ausgeführt und das ganze auch mit einem ganz frischen Commit einmal getestet.&nbsp;  
Bevor wir hier aneinander vorbei reden. Es geht hier um ein reines Plugin. Kein Plugin-Theme. Gibt es hierbei unterschiede?

**Muss man noch irgendwas tun, damit die assets in das Theme geladen werden?**

Es gab ja vor ein paar Wochen noch eine Anleitung wie man JS und SCSS mit einer main.js und Webpack kompiliert. Meines Wissens nach wurde dabei im Theme auch immer ein dist/ Ordner angelegt?!

---

<div class="post-metadata">

**Author:** ![Larineso](https://avatars.discourse-cdn.com/v4/letter/l/b5e925/32.png) [@Larineso](https://forum.shopware.com/u/Larineso)\
**Post date:** [3. August 2019 um 16:43 UTC](https://forum.shopware.com/t/statische-ressourcen-wie-bilder-schriften-im-plugin-public-folder/60799/8 "2019-08-03T16:43:20Z")

</div>

Nein, das sollte so reichen. Ein ./bin/console cache:clear kann aber auch nicht schaden.

Inwiefern sich in dem Punkt&nbsp;reine&nbsp;Plugins von&nbsp;Plugin-Themes&nbsp;unterscheiden habe ich noch nicht getestet. Ich teste&nbsp;es nachher&nbsp;mal mit einem normalen Plugin. Ich nutze ein Plugin-Theme, das ich auch in der Konfiguration der Storefront ausgewählt habe.

Liebe Grüße

---

<div class="post-metadata">

**Author:** ![Larineso](https://avatars.discourse-cdn.com/v4/letter/l/b5e925/32.png) [@Larineso](https://forum.shopware.com/u/Larineso)\
**Post date:** [3. August 2019 um 17:27 UTC](https://forum.shopware.com/t/statische-ressourcen-wie-bilder-schriften-im-plugin-public-folder/60799/9 "2019-08-03T17:27:39Z")

</div>

Mit einem normalen Plugin funktioniert es bei mir auch nicht.&nbsp;Ob es eine Möglichkeit gibt, die Schrift in das normale Theme zu kompilieren, kann ich dir leider nicht sagen.

Liebe Grüße

---

<div class="post-metadata">

**Author:** ![mdsw](https://avatars.discourse-cdn.com/v4/letter/m/94ad74/32.png) [@mdsw](https://forum.shopware.com/u/mdsw)\
**Post date:** [4. August 2019 um 16:21 UTC](https://forum.shopware.com/t/statische-ressourcen-wie-bilder-schriften-im-plugin-public-folder/60799/10 "2019-08-04T16:21:40Z")

</div>

Okay, dann hat Shopware wohl für normale Plugins keinen Public-folder implementiert. Schade … dann heißt es also weiterhin warten …&nbsp;

---

<div class="post-metadata">

**Author:** ![mdsw](https://avatars.discourse-cdn.com/v4/letter/m/94ad74/32.png) [@mdsw](https://forum.shopware.com/u/mdsw)\
**Post date:** [5. August 2019 um 08:21 UTC](https://forum.shopware.com/t/statische-ressourcen-wie-bilder-schriften-im-plugin-public-folder/60799/11 "2019-08-05T08:21:56Z")

</div>

[@Moritz Naczenski]([http://forum.shopware.com/profile/14574/Moritz](http://forum.shopware.com/profile/14574/Moritz) Naczenski „Moritz Naczenski“)‍ übersehen wir hier etwas oder gibt es hierzu noch keine Möglichkeit?

Das ist für viele Frontend Storefront-Plugins wirklich wichtig ![Sticking-out-tongue](https://forum.shopware.com/plugins/CKEditor/plugins/smiley/images/sticking-out-tongue.png "Sticking-out-tongue")

---

<div class="post-metadata">

**Author:** ![Moritz\_Naczenski](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/moritz_naczenski/32/7792_2.png) [@Moritz\_Naczenski](https://forum.shopware.com/u/Moritz_Naczenski)\
**Post date:** [5. August 2019 um 08:27 UTC](https://forum.shopware.com/t/statische-ressourcen-wie-bilder-schriften-im-plugin-public-folder/60799/12 "2019-08-05T08:27:22Z")

</div>

Keine Ahnung - wenn ich helfen könnte, würde ich es tun 😉

Ich hab den Thread mal den Kollegen rüber geschickt, bei Zeit wird sich das sicher mal jemand ansehen.

---

<div class="post-metadata">

**Author:** ![el\_afilador](https://avatars.discourse-cdn.com/v4/letter/e/ebca7d/32.png) [@el\_afilador](https://forum.shopware.com/u/el_afilador)\
**Post date:** [7. August 2019 um 11:36 UTC](https://forum.shopware.com/t/statische-ressourcen-wie-bilder-schriften-im-plugin-public-folder/60799/13 "2019-08-07T11:36:34Z")

</div>

Hallo zusammen,

ich hatte das gleiche Problem beim setzen eines Hintergrund-Bildes.

Ich hoffe, ich erzähle Euch nichts, was Ihr schon wisst.

Beim Theme-Plugin habe ich es wie folgt geschafft:

Im Ordner

⁨development/custom/plugins/DEIN-PLUGIN-NAME/src/Resources⁩/storefront/asset

finden sich alle Assets, die beim build mit kopiert werden. Sie sind nachher hier zu finden:  
[www.Deine-URL.de/theme/HASH-xyz-123/asset/dein-bild.jpg](http://www.Deine-URL.de/theme/HASH-xyz-123/asset/dein-bild.jpg)

Um später in der SCSS-Datei darauf zuzugreifen:  
background: url("…/asset/dein-bild.jpg");

Ich hoffe das hilft irgendwem…

---

<div class="post-metadata">

**Author:** ![mdsw](https://avatars.discourse-cdn.com/v4/letter/m/94ad74/32.png) [@mdsw](https://forum.shopware.com/u/mdsw)\
**Post date:** [7. August 2019 um 11:56 UTC](https://forum.shopware.com/t/statische-ressourcen-wie-bilder-schriften-im-plugin-public-folder/60799/14 "2019-08-07T11:56:54Z")

</div>

Hallo @el\_afilador‍

es geht hier leider nicht um ein Theme-Plugin. In normalen Plugins scheint das so nicht zu funktionieren. Siehe weiter oben im Beitrag.

---

<div class="post-metadata">

**Author:** ![mdsw](https://avatars.discourse-cdn.com/v4/letter/m/94ad74/32.png) [@mdsw](https://forum.shopware.com/u/mdsw)\
**Post date:** [13. August 2019 um 09:52 UTC](https://forum.shopware.com/t/statische-ressourcen-wie-bilder-schriften-im-plugin-public-folder/60799/15 "2019-08-13T09:52:19Z")

</div>

[@Moritz Naczenski]([http://forum.shopware.com/profile/14574/Moritz](http://forum.shopware.com/profile/14574/Moritz) Naczenski „Moritz Naczenski“)‍

&nbsp;

gibt es irgendeine Rückmeldung vom Kollegen?

---

<div class="post-metadata">

**Author:** ![Jens\_K](https://avatars.discourse-cdn.com/v4/letter/j/c67d28/32.png) [@Jens\_K](https://forum.shopware.com/u/Jens_K)\
**Post date:** [13. August 2019 um 11:01 UTC](https://forum.shopware.com/t/statische-ressourcen-wie-bilder-schriften-im-plugin-public-folder/60799/16 "2019-08-13T11:01:32Z")

</div>

Moin!

Das Handling von assets funktioniert in Shopware 6&nbsp;ein wenig anders als man das von z.B. von Shopware 5 kennt. Ihr könnt&nbsp;assets in den public Order eures Plugins legen. Bei jedem ./psh.phar storefront:build wird dann am Ende der Befehl bin/console assets:install ausgeführt. Dieser kopiert die assets von eurem public Order im&nbsp;Plugin in den public Ordner der Shopware Installation. Um genau zu sein,&nbsp;in den Ordner&nbsp;public/bundles/{bundleName}/

Wenn ihr die assets innerhalb eines Twig Templates nutzen möchtet, könnt ihr asset(‚bundles/my-plugin/image.jpg‘) nutzen. So wird der asset Pfad automatisch aufgelöst. Per CSS/JS ist es etwas schwieriger.

CSS/JS wird&nbsp;seit der EA1 Version&nbsp;konkateniert und unter public/theme/{themeHash}/css/all.cs bzw js/all.js abgelegt. Von dort würdet ihr relativ per …/…/…/bundles/{bundleName}/image.jpg auf euer asset kommen.

---

<div class="post-metadata">

**Author:** ![kilb\_software](https://avatars.discourse-cdn.com/v4/letter/k/9d8465/32.png) [@kilb\_software](https://forum.shopware.com/u/kilb_software)\
**Post date:** [17. Oktober 2019 um 11:42 UTC](https://forum.shopware.com/t/statische-ressourcen-wie-bilder-schriften-im-plugin-public-folder/60799/17 "2019-10-17T11:42:35Z")

</div>

> [@Jens\_K schrieb:](https://forum.shopware.com/profile/25958/Jens_K "Jens\_K")
> 
> Moin!
> 
> Das Handling von assets funktioniert in Shopware 6&nbsp;ein wenig anders als man das von z.B. von Shopware 5 kennt. Ihr könnt&nbsp;assets in den public Order eures Plugins legen. Bei jedem ./psh.phar storefront:build wird dann am Ende der Befehl bin/console assets:install ausgeführt. Dieser kopiert die assets von eurem public Order im&nbsp;Plugin in den public Ordner der Shopware Installation. Um genau zu sein,&nbsp;in den Ordner&nbsp;public/bundles/{bundleName}/
> 
> Wenn ihr die assets innerhalb eines Twig Templates nutzen möchtet, könnt ihr asset(‚bundles/my-plugin/image.jpg‘) nutzen. So wird der asset Pfad automatisch aufgelöst. Per CSS/JS ist es etwas schwieriger.
> 
> CSS/JS wird&nbsp;seit der EA1 Version&nbsp;konkateniert und unter public/theme/{themeHash}/css/all.cs bzw js/all.js abgelegt. Von dort würdet ihr relativ per …/…/…/bundles/{bundleName}/image.jpg auf euer asset kommen.

Übrigens - für alle, die vor dem selben Problem stehen:&nbsp;mit „public Order im Plugin“ ist das Verzeichnis „custom/plugins/DeinPlugin/src/Resources/public“ gemeint.

---

<div class="post-metadata">

**Author:** ![compragmbh](https://avatars.discourse-cdn.com/v4/letter/c/d07c76/32.png) [@compragmbh](https://forum.shopware.com/u/compragmbh)\
**Post date:** [23. März 2020 um 11:50 UTC](https://forum.shopware.com/t/statische-ressourcen-wie-bilder-schriften-im-plugin-public-folder/60799/18 "2020-03-23T11:50:28Z")

</div>

Ich greife das Thema nochmal auf, da mittlerweile etwas Zeit verstrichen ist.

**Frage** : Wie müssten Dateien im public Ordner des Plugins aufbereitet sein, dass Sie beim Installieren des Plugins direkt verwendet werden können?

&nbsp;

**Hintergrund** : nehmen wir an, man hat ein Plugin mit ein paar Bildern die im Plugin unter /src/Resources/public/img liegen. Ich müsste nun ./psh.phar storefront:build aufrufen, damit die Dateien in den Shopware-Bundles Ordner gelangen.

Für ein Plugin, welches in den Shopware Store soll, ist es aber ungünstig, wenn der Kunde zunächst über eine Konsole storefront:build aufrufen müsste damit die Bilder angezeigt werden können.

&nbsp;

Viele Grüße  
Dennis

---

<div class="post-metadata">

**Author:** ![masmut](https://avatars.discourse-cdn.com/v4/letter/m/e8c25b/32.png) [@masmut](https://forum.shopware.com/u/masmut)\
**Post date:** [23. März 2020 um 14:45 UTC](https://forum.shopware.com/t/statische-ressourcen-wie-bilder-schriften-im-plugin-public-folder/60799/19 "2020-03-23T14:45:08Z")

</div>

Wenn Bilder in custom/plugins/DeinPlugin/src/Resources/public abegelegt werden und dann ein storefront:build ausgeführt wird, geht es.

Aber **storefront:hot-proxy** funktioniert nicht mehr und gibt immer Fehlermeldung aus.

[https://forum.shopware.com/discussion/67068/webpack-error-no-loader-configured-hintergrundbild#latest](https://forum.shopware.com/discussion/67068/webpack-error-no-loader-configured-hintergrundbild#latest)

---

<div class="post-metadata">

**Author:** ![compragmbh](https://avatars.discourse-cdn.com/v4/letter/c/d07c76/32.png) [@compragmbh](https://forum.shopware.com/u/compragmbh)\
**Post date:** [24. März 2020 um 09:53 UTC](https://forum.shopware.com/t/statische-ressourcen-wie-bilder-schriften-im-plugin-public-folder/60799/20 "2020-03-24T09:53:11Z")

</div>

> [@masmut schrieb:](https://forum.shopware.com/profile/34470/masmut "masmut")
> 
> Wenn Bilder in custom/plugins/DeinPlugin/src/Resources/public abegelegt werden und dann ein storefront:build ausgeführt wird, geht es.
> 
> Aber **storefront:hot-proxy** funktioniert nicht mehr und gibt immer Fehlermeldung aus.
> 
> [https://forum.shopware.com/discussion/67068/webpack-error-no-loader-configured-hintergrundbild#latest](https://forum.shopware.com/discussion/67068/webpack-error-no-loader-configured-hintergrundbild#latest)

Hi!  
Ich glaube du hast meine zweite Frage nicht ganz verstanden: Ich suche nach einer Lösung, die genau dies beim Installieren des Plugins übernimmt. EIn Kunde, der das Plugin bspw. im Shopware Store kauft, herunterlädt und dann in seinem Shop installiert, hat ggf. nicht die Ahnung, dass noch ein zusätzlicher Befehl über die Konsole ausgeführt werden muss.

Die Erwartungshaltung ist da natürlich, dass das Plugin installiert wird und die entsprechenden Bilder direkt und ohne weiteres zutun angezeigt werden.

Viele Grüße  
Dennis

[Nächste Seite](https://forum.shopware.com/t/statische-ressourcen-wie-bilder-schriften-im-plugin-public-folder/60799.md?page=2)
