# Shopware 5 Einkaufswelten (Optimale Einstellungen für alle Anzeigen)

**URL:** <https://forum.shopware.com/t/shopware-5-einkaufswelten-optimale-einstellungen-fur-alle-anzeigen/59855>\
**Category:** Themes & Design\
**Created:** [4. Juni 2019 um 21:05 UTC](https://forum.shopware.com/t/shopware-5-einkaufswelten-optimale-einstellungen-fur-alle-anzeigen/59855 "2019-06-04T21:05:53Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Siggi123b](https://avatars.discourse-cdn.com/v4/letter/s/c89c15/32.png) [@Siggi123b](https://forum.shopware.com/u/Siggi123b)\
**Post date:** [4. Juni 2019 um 21:05 UTC](https://forum.shopware.com/t/shopware-5-einkaufswelten-optimale-einstellungen-fur-alle-anzeigen/59855/1 "2019-06-04T21:05:53Z")

</div>

Guten Abend.

Ich stehe vor einem blödem Problem und komme einfach nicht mehr weiter und hoffe einmal ein Feedback von Euch zu erhalten.

Ich möchte meine Startseite gestalten, z.B mit [Digital Publishing](https://store.shopware.com/swag369885808847t/digital-publishing.html) oder [Shopware Storytelling](https://store.shopware.com/swag986953104487t/shopware-storytelling.html) (gerade im Test-Modus).

Aber bekomme keine passende Größe hin und Frage einmal in die Runde:

Die **Thumbnails** sind doch eigentlich dazu da, um die passende Größe aus zu geben oder nicht? Bei mir nimmt er immer das größte was auf Desktop gut aussieht. Bei anderen Ansichten ist es Katastrophal.

Hier einmal meine Einstellungen:  
&nbsp;

**Einkaufswelten Thumbnails** :

- 800x800
- 1280x1280
- 1920x1920

**Einkaufswelten Einstellungen** :

**Modus:**

- **Fluid / Responsive**
- **Vollflächig**
- Spalten: **12**
- Zeilenabstand: **30**
- Zeilen-Höhe: **150**

**Elemente** :

- Digital Publishing Slider
- Auf vier Zeilen gezogen

&nbsp;

---

<div class="post-metadata">

**Author:** ![naturdrogerie](https://avatars.discourse-cdn.com/v4/letter/n/b5ac83/32.png) [@naturdrogerie](https://forum.shopware.com/u/naturdrogerie)\
**Post date:** [5. Juni 2019 um 06:24 UTC](https://forum.shopware.com/t/shopware-5-einkaufswelten-optimale-einstellungen-fur-alle-anzeigen/59855/2 "2019-06-05T06:24:44Z")

</div>

Das hatte bei uns auch erst richtig an allen Stellen geklappt, nachdem ich die Template-Dateien im eigenen Theme passend überschrieben habe. Trotzdem passt es bei Digital Publishing teilweise immer noch nicht.

---

<div class="post-metadata">

**Author:** ![Siggi123b](https://avatars.discourse-cdn.com/v4/letter/s/c89c15/32.png) [@Siggi123b](https://forum.shopware.com/u/Siggi123b)\
**Post date:** [5. Juni 2019 um 08:56 UTC](https://forum.shopware.com/t/shopware-5-einkaufswelten-optimale-einstellungen-fur-alle-anzeigen/59855/3 "2019-06-05T08:56:48Z")

</div>

H‍allo @naturdrogerie‍,

was hast Du den genau angepasst und wo?

&nbsp;

---

<div class="post-metadata">

**Author:** ![naturdrogerie](https://avatars.discourse-cdn.com/v4/letter/n/b5ac83/32.png) [@naturdrogerie](https://forum.shopware.com/u/naturdrogerie)\
**Post date:** [5. Juni 2019 um 09:36 UTC](https://forum.shopware.com/t/shopware-5-einkaufswelten-optimale-einstellungen-fur-alle-anzeigen/59855/4 "2019-06-05T09:36:30Z")

</div>

Puh. Da habe ich einige Stellen angepasst – und der Code ist auf uns zugeschnitten (WebP-Unterstützung, spezielles Layy Loading …). Das Beispiel hier (component\_banner.tpl) sollte die richtige Idee geben:

```
{extends file="parent:widgets/emotion/components/component_banner.tpl"}

{block name="widget_emotion_component_banner_image"}

    {if $Data.thumbnails}
        {$baseSource = $Data.thumbnails[0].source}

        {foreach $element.viewports as $viewport}
            {$cols = ($viewport.endCol - $viewport.startCol) + 1}
            {$elementSize = $cols * $cellWidth}
            {$size = "{$elementSize}vw"}

            {if $breakpoints[$viewport.alias]}

                {if $viewport.alias === 'xl' && !$emotionFullscreen}
                    {$size = "calc({$elementSize / 100} * {$baseWidth}px)"}
                {/if}

                {$size = "(min-width: {$breakpoints[$viewport.alias]}) {$size}"}
            {/if}

            {$itemSize = "{$size}{if $itemSize}, {$itemSize}{/if}"}
        {/foreach}

        {foreach $Data.thumbnails as $image}
            {$srcSet = "{if $srcSet}{$srcSet}, {/if}{$image.source} {$image.maxWidth}w"}

            {if $image.retinaSource}
                {$retinaImageMaxWidth = ($image.maxWidth * 2)}
                {$retinaSrcSet = "{if $retinaSrcSet}{$retinaSrcSet}, {/if}{$image.retinaSource} {$retinaImageMaxWidth}w"}
            {/if}
        {/foreach}
    {else}
        {$baseSource = $Data.source}
    {/if}

    
        
        

        {* Fallback *}
        
    
{/block}

```

(Bereinigt um die genannten Stellen, damit es allgemeingültiger ist.)

Der Code war in der Template-Datei schon recht gut und musste nur &nbsp;wenig angepasst werden. Der wichtige Punkt, den die Shopware-Bare-Vorlage falsch macht, ist die Angabe der Pixelbreite der Bilder. Hier wurde für die hochauslösenden Thumbnails&nbsp;einfach die Thumbnail-Größe (z.B. 1600) genommen, statt der korrekten Angabe (also zweifache Menge an Pixeln in der Breite – was 3200 statt 1600 wären). Im Code habe ich daher $retinaImageMaxWidth ergänzt und als w-Angabe bei den sizes für die Retina-Bilder gesetzt.

Bei anderen Template-Komponenten sind immer&nbsp;andere Fehler oder Nachlässigkeiten drin. Mal ist es die&nbsp;hier besprochene, fehlerhafte&nbsp;w-Angabe, mal werden die Thumbnails gar nicht genutzt (Kategoriebanner). Ich habe mir daher alle Stellen, die mir aufgefallen sind, vorgenommen. Wie gesagt, ist der Code aber nicht allgemeingültig, wegen der individuellen Ausgestaltung bei uns.

Ich hoffe, dass Shopware 6 im Standard-Theme besser darauf achtet, dass die Angaben richtig und möglichst konsistent sind. Meine einzige Erklärung für die teils schlechte Unterstützung der Thumbnail-Einstellungen in Shopware 5 ist, dass die jeweiligen Stellen in den Template-Dateien zu völlig unterschiedlichen Zeitpunkten umgesetzt wurden und man nicht alles nachgezogen hat.

---

<div class="post-metadata">

**Author:** ![Murmeltier](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/murmeltier/32/16126_2.png) [@Murmeltier](https://forum.shopware.com/u/Murmeltier)\
**Post date:** [5. Juni 2019 um 09:48 UTC](https://forum.shopware.com/t/shopware-5-einkaufswelten-optimale-einstellungen-fur-alle-anzeigen/59855/5 "2019-06-05T09:48:28Z")

</div>

Immer ganz gut bzw. hilfreich in solchen Fällen:&nbsp;[https://t1p.de/fg4z](https://t1p.de/fg4z)

---

<div class="post-metadata">

**Author:** ![Shopwareianer](https://avatars.discourse-cdn.com/v4/letter/s/b4bc9f/32.png) [@Shopwareianer](https://forum.shopware.com/u/Shopwareianer)\
**Post date:** [5. Juni 2019 um 15:58 UTC](https://forum.shopware.com/t/shopware-5-einkaufswelten-optimale-einstellungen-fur-alle-anzeigen/59855/6 "2019-06-05T15:58:52Z")

</div>

> [@Murmeltier schrieb:](https://forum.shopware.com/profile/26331/Murmeltier "Murmeltier")
> 
> Immer ganz gut bzw. hilfreich in solchen Fällen:&nbsp;[https://t1p.de/fg4z](https://t1p.de/fg4z)

Cool, kannte ich bisher gar nicht.&nbsp;
