Produktbilder/Thumbnails Größenprobleme

[pr_shop]

Hallo, ich habe das Problem, dass bei mir im Shop (6.5.0.0) in der Desktopversion meine Bilder auf den Produktseiten, die einer Erlebniswelt zugeordnet sind, alle zu klein angezeigt werden. Das ist schon seit einigen Versionen so der Fall. In der Erlebniswelt habe den Anzeigemodus auf „Beinhalten“ gestellt.

Die Ursache des Problems ist, dass die Bilder, die einer Erlebniswelt zugeordnet sind, im HTML über den „sizes“-Parameter verfügen und deswegen so klein-gerendert angezeigt werden. Ein Auszug:

<img src=„bild.jpg“ srcset=„link.jpg“ 400w, bild.jpg_1280x1280.jpg 1280w, bild.jpg_800x800.jpg 800w" sizes=„(min-width: 1200px) 454px, (min-width: 992px) 400px, (min-width: 768px) 331px, (min-width: 576px) 767px, (min-width: 0px) 575px, 34vw“ class=„img-fluid gallery-slider-image magnifier-image js-magnifier-image“ data-full-image=„bild.jpg“ data-object-fit=„contain“ itemprop=„image“ style=„cursor: default;“>

Das Bild wird auf meinem Desktop jetzt also in 454px gerendert, was auf Desktop entschieden zu klein ist. Außenrum bis zu den Außengrenzen des Slider-Containers ist noch reichlich Platz. Warum wird hier nicht der Slider-Container ausgefüllt? Meine Bilder lege ich normalerweise in 1280px Länge an.

Wenn das Produkt keiner Erlebniswelt zugeordnet ist, fehlen die „sizes“-Parameter im Quellcode und das Bild wird so groß angezeigt, wie der Slider-Container für die Bilder ist – so hätte ich es auch gern.

Wenn ich bei „Medien“ den Thumbnail-Generator ausschalte und die Bilder neu hochlade, geht es auch mit zugeordneter Erlebniswelt. Allerdings werden dann keine Thumbnails mehr generiert und deswegen auch keine sizes-Parameter. Jetzt habe ich allerdings auch auf den Listings/Übersichtsseiten große Bilder, die einfach nur kleiner angezeigt werden – das ist ja dann auch doof für die Ladezeit. Da machen die Thumbnails schon Sinn.

Da ich kein Entwickler bin, würde ich ungern im Theme an den sizes-Parametern rumschrauben, da hatte ich mich schon drauf verlassen, dass man das mit Shopware out of the box hinbekommt, dass ein 1280px großes Bild auf Desktop bei „Beinhalten“ auch so groß wie mein Container angezeigt wird.

Jetzt kennt Ihr das Problem – hat jemand nen Rat? Danke.

[R4M]

Ich denke die Bilder ansich passen schon, nur das CSS vom Theme muss ggf. angepasst werden.

[klogges]

Nach einam Update auf 6.6 haben wir plötzlich auch das Problem.
Das ist definitiv kein CSS-Problem sondern falsche Werte im SrcSet-Attribut.
In der Desktop-Darstellung über 1200px Viewportbreite wird das bild nur mit 454 px gerendert ((min-width: 1200px) 454px).
Hat jemand dafür eine Lösung?

Das Problem haben auch andere:

Artikelbilder - "sizes" geben falsche Bildgrößen aus

Ich bitte wieder einmal um Hilfe. Wir haben über Erlebniswelten eine neue Shopseite angelegt. Anzeigemodus „Beinhalten“ Minimale Höhe „430px“ Thumnails werden korrekt generiert,…kurz und knapp: sizes="(min-width: 1200px) 454px, (min-width: 992px) 400px, (min-width: 768px) 331px, (min-width: 576px) 767px, (min-width: 0px) 575px, 34vw" Woher kommen diese Werte? Kann ich die abändern? Das kann man zwar mit CSS width 100% schnell lösen, aber mich würde echt interessieren woher diese Werte kom…

und hier:

Landscape product images. How do you do it?

Hi According to the docs, the recommended product image is square and 1920x1920 px (for optimal quality). But how do you do it if you want to product images in landscape format? Shopware creates a srcset for images, but I can not get it to work for the larger viewports (size). From a viewport of 768px, a landscape image is way to small. Have tried all kind of sizes and settings for the image gallery. Checking the size of the image area, and it’s 454x251 px. Scaling that up …

[blitzblank]

Das Problem besteht auch schon bei 6.4, zumindest bei uns.

Nach ausführlicher Recherche habe ich Folgendes herausgefunden:

1. Die ganze Ausgabe wird durch storefront/utilities/thumbnails.html.twig gesteuert
2. Dort wird eine Berechnung mit einer Variable „columns“ für die unterschiedlichen Breakpoints durchgeführt
3. Wir haben nun in unserer cms-block-gallery-buybox und in der product-detail/index.html die columns auf 2 gesetzt

Das srcset hat sich dadurch wie folgt angepasst.
(min-width: 1200px) 680px, (min-width: 992px) 600px, (min-width: 768px) 496px, (min-width: 576px) 767px, (min-width: 0px) 575px, 50vw

Vielleicht hilft euch das ja weiter.

[siqu]

Man kann einiges diesbezüglich in den Element-Einstellungen ändern.
Inhalt/Erlebniswelten/Produktseite, eigenes Layout erstellen/verwenden (oder Duplikat vom Standard, welches man nicht anpassen kann) und allen Produkten zuweisen (rechtes Menüband, drei verbundenen Kreise, „Als Standardlayout verwenden“).
Auf das Galeriebild klicken und dann auf das Zahnrad, Reiter „Einstellungen“ und hier entsprechend die Änderungen vornehmen.

Bisschen ausführlicher beschreiben, für andere die das mal finden.