# Navigation Flyout mit Kategorie Thumbnails

**URL:** https://forum.shopware.com/t/navigation-flyout-mit-kategorie-thumbnails/103221
**Category:** Programmierung
**Created:** [5. März 2024 um 15:38 UTC](https://forum.shopware.com/t/navigation-flyout-mit-kategorie-thumbnails/103221 "2024-03-05T15:38:20Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![it-brockmann](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/it-brockmann/32/9650_2.png) [@it-brockmann](https://forum.shopware.com/u/it-brockmann)
#### Post date: [5. März 2024 um 15:38 UTC](https://forum.shopware.com/t/navigation-flyout-mit-kategorie-thumbnails/103221/1 "2024-03-05T15:38:20Z")

</div>

Moin zusammen,

wir würden gerne in der Navigation vor den Subkategorie Titelnamen im Flyout das Kategoriebild ausgeben.  
In Shopware 5 hatten wir dafür die entsprechende Variable und es war kein Problem… in Shopware 6 gestaltet sich das jetzt scheinbar schwieriger bzw. haben wir noch nicht die richtige Variable für die entsprechende Kategoriebild URL gefunden.

Aktuell sieht es wie folgt aus, nur leider bleibt der gewünschte Pfad zum Kategoriebild noch leer…

```auto
{% block layout_navigation_categories_item_link %}
    {% if treeItem.category.type == 'folder' %}
        <div class="nav-item nav-link navigation-flyout-link is-level-{{ level }}" title="{{ name }}">
            <span itemprop="name">{{ name }}</span>
        </div>
    {% else %}
        <a class="nav-item nav-link navigation-flyout-link is-level-{{ level }}{% if id == activeId or id in activePath %} active{% endif %}"
           href="{{ link }}"
           itemprop="url"
           {% if category_linknewtab(treeItem.category) %}target="_blank"
               {% if treeItem.category.linkType == "external" %}rel="noopener noreferrer"{% endif %}
           {% endif %}
           title="{{ name }}">
            <span itemprop="name">
                **<span style="vertical-align: left; display: table-cell; height:50px; min-width:50px;">**
 **<img style="" src="{{ treeItem.category.media.url }}" width="50" height="50" />**
 **</span>**
                {{ name }}
            </span>
        </a>
    {% endif %}
{% endblock %}

```

Jemand eine Idee dazu? Wir wären auch für „kostenpflichtige“ Hilfe dankbar…

---

<div class="post-metadata">

### Author: ![ZeiW](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/zeiw/32/22617_2.png) [@ZeiW](https://forum.shopware.com/u/ZeiW)
#### Post date: [5. März 2024 um 19:06 UTC](https://forum.shopware.com/t/navigation-flyout-mit-kategorie-thumbnails/103221/2 "2024-03-05T19:06:20Z")

</div>

Hi

Ich habe dies gerade lokal bei mir getestet.  
Zuerst hat es mir das Kategoriebild auch nicht angezeigt.  
Hast du überall die Kategoriebilder gesetzt?

Ich habe dann zuerst versucht dies via Thumbnails zu laden, was funktioniert hatte.  
Dann habe ich deine Lösung nochmals inkludiert und beides funktioniert.

Ich habe dies lokal ohne Cache gemacht und zur Sicherheit auch den Cache geleert.

```auto
php bin/console cache:clear

```

Dies ist der Code (zeigt beide Bilder bei mir an), der Thumbnail jedoch nicht in der richtigen Grösse.

```auto
                    <a class="nav-item nav-link navigation-flyout-link is-level-{{ level }}{% if id == activeId or id in activePath %} active{% endif %}"
                       href="{{ link }}"
                       itemprop="url"
                       {% if category_linknewtab(treeItem.category) %}target="_blank"
                       {% if treeItem.category.linkType == "external" %}rel="noopener noreferrer"{% endif %}
                        {% endif %}
                       title="{{ name }}">
                        <span itemprop="name" style="vertical-align: left; display: table-cell; height:25px; min-width:25px;">
                            <img style="" src="{{ treeItem.category.media.url }}" width="50" height="50" />

                            {% sw_thumbnails 'navigation-flyout-teaser-image-thumbnails' with {
                                media: treeItem.category.media,
                                sizes: {
                                    'default': '25px'
                                }
                            }
                            %}
                            {{ name }}
                        </span>
                    </a>

```

---

<div class="post-metadata">

### Author: ![it-brockmann](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/it-brockmann/32/9650_2.png) [@it-brockmann](https://forum.shopware.com/u/it-brockmann)
#### Post date: [5. März 2024 um 21:00 UTC](https://forum.shopware.com/t/navigation-flyout-mit-kategorie-thumbnails/103221/3 "2024-03-05T21:00:59Z")

</div>

Hi!

Vielen Dank, auch wenn’s bei uns leider nach wie vor nicht funktioniert… sehr merkwürdig 😕

Kategoriebilder sind gesetzt und Cache geleert.

---

<div class="post-metadata">

### Author: ![stan\_o](https://avatars.discourse-cdn.com/v4/letter/s/6de8d8/32.png) [@stan\_o](https://forum.shopware.com/u/stan_o)
#### Post date: [6. März 2024 um 09:43 UTC](https://forum.shopware.com/t/navigation-flyout-mit-kategorie-thumbnails/103221/4 "2024-03-06T09:43:03Z")

</div>

Bei uns funktioniert es ohne Probleme auf dem Testsystem mit ZeiWs Version. Eben probiert Shopware 6.5.8.  
Auch bei einer Erweiterung der Shopware-Divitis gab es kein Problem (2 spaltige Linknamen sah sonst doof aus)

```auto
<span itemprop="name">
<div>
<div style="float:left; padding-right:5px;">
 {% sw_thumbnails 'navigation-flyout-teaser-image-thumbnails' with {media: treeItem.category.media,
                                sizes: {
                                    'default': '45px'
                                }
                            }
                            %}
</div>
{{ name }}
</div>
 </span>

```

---

<div class="post-metadata">

### Author: ![it-brockmann](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/it-brockmann/32/9650_2.png) [@it-brockmann](https://forum.shopware.com/u/it-brockmann)
#### Post date: [6. März 2024 um 12:02 UTC](https://forum.shopware.com/t/navigation-flyout-mit-kategorie-thumbnails/103221/5 "2024-03-06T12:02:17Z")

</div>

Hmm in einem anderen Shop von uns läuft es auch… dann muss Sherlock wohl nochmal auf Spurensuche gehen 🧐