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 oder Shopware Storytelling (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:
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
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.
Hallo @naturdrogerie,
was hast Du den genau angepasst und wo?
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 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 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 andere Fehler oder Nachlässigkeiten drin. Mal ist es die hier besprochene, fehlerhafte 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.
Immer ganz gut bzw. hilfreich in solchen Fällen: https://t1p.de/fg4z
@Murmeltier schrieb:
Immer ganz gut bzw. hilfreich in solchen Fällen: https://t1p.de/fg4z
Cool, kannte ich bisher gar nicht.