Bildergröße der Einkaufswelt - Bilder unscharf / gestreckt

Hallo Leute, ich habe so ziemlich mein Theme an mich nun angepasst und habe noch ein wenig mit der Einkaufswelt zu kämpfen. Bei SW4 konnte ich die exakte Blockgröße in px herausfinden und Bildchen exakt anpassen dass diese nicht gedehnt/gestreckt wurden und scharf waren. Hier mit dem Responsive weiß ich nun nicht wie ich das anstellen soll. Da ich die genaue pixelgröße nicht kenne. Wie funktioniert das, wie bekomme ich ein scharfes Bild für die Einkaufswelt hin?

melde mich dazu an, habe das gleiche Problem …

Dito *Wenn man denn in etwa wüsste, welche Abmessungen die Elemente ca haben* themes-und-design-f101/einkaufsweltenelemente-relative-grosze-t26889.html

Hi, mir ist dieses Problem auch schon untergekommen. Das Problem ist, dass die in den Einstellungen der Einkaufswelt gesetzte Zellenhöhe nicht exakt übernommen wird. Ich habe z.B. 109 Pixel Zellenhöhe eingestellt und bei 2 Zellen werden aus den 2x109 Pixeln 228 statt 218. Bei 3 Zellen werden aus den 3x109 auf einmal 347 Pixel statt 327… Es scheint sich um einen Bug zu handeln. Irgendwas ist vermutlich mit der Umrechnung von px in rem faul. Wenn wer ein Ticket schreiben möchte - nur zu. Ich bin noch nicht dazu gekommen

[quote=„mrnielsen“]Hi, Ich habe z.B. 109 Pixel Zellenhöhe eingestellt und bei 2 Zellen werden aus den 2x109 Pixeln 228 statt 218. Bei 3 Zellen werden aus den 3x109 auf einmal 347 Pixel statt 327… [/quote] Das war in SW4 auch schon so. Die 10px mehr bei zwei Zellen kommen durch die eingestellten 10 „Abstand“. Der Abstand kommt bei verbundenen Zellen ja noch dazu! 3 Zellen : 3x109 + 2x10 = 327 + 20 = 347 => passt! Das nervige daran: nun muss man selber rechnen - in SW4 wurde die Elementgröße ja noch angezeigt.

1 „Gefällt mir“

Hallo zusammen, ihr könnt für die Angabe der Größen ja gerne mal ein Ticket aufmachen, vielleicht kann man die ja auch wieder anzeigen lassen: jira.shopware.de Natürlich wird es schwer das für jeden Breakpoint korrekt zu berechnen, aber für den Desktop geht das sicherlich. Generell ist die Desktopansicht, wenn ich mich nicht täusche, 1160px breit. Wenn ihr euch also an die Höhe (definiert durch euer Raster) + die Breite (1160px / Spaltenanzahl * Spaltenanzahl des Elementes) haltet, sollte es auch auf kleineren Viewports keine Probleme geben, da das Bild korrekt skaliert wird. Generell sind wir in diesem Bereich ja auch auf Feedback der Usability angewiesen. Shopware 5 kann ja nicht erst seit letzter Woche begutachtet werden. Da hier während der RC-Phase wenig Feedback in diesem Bereich kam, wurde da auch nichts umgesetzt oder mit hinweisen ausgestattet. Das kann man aber sicherlich in einem der nächsten Updates nochmal vereinfachen wenn das gewünscht ist. Grüße Moritz

Moritz, ich verstehe es nicht. Wenn ich die Datei aus SW4 in SW5 übernehme ( ein Banner 4-zeilig ) dann ist es gestreckt und unscharf in der Desktop-Ansicht. Was muß ich denn nun anders machen ? Wo gibt es hierfür eine Dokumentation ? Danke Peter

Hallo, die komplette Seite ist mit Shopware 5 auch breiter geworden. Deine Banner werden daher in der Breite auseinandergezogen um zu passen. Daher sind die auch Matsch. Die Dokumentation im Wiki kommt noch, die ist aktuell noch in Arbeit. Ich gebe dir mal ein konkretes Beispiel: Shopware 4: Breite Desktop: 1008px Höhe Zeilen: 185px Shopware 5: Breite Desktop: 1160px Höhe Zeilen: 185px Nehmen wir jetzt an, du setzt auf das 3 spaltige Layout und benutzt 2 Reihen für deinen Banner. Shopware 4: Höhe: 2x 185px = 370px + Abstand Breite: 1008px Shopware 5: Höhe: 2x185px = 370px + Abstand Breite: 1160px Entsprechend muss dein Banner in SW5 dann 1160x370px sein und nicht mehr 1008x370px. Ich hoffe das hilft dir etwas. Wenn du die Zeilenhöhe verändert hast zum Standard, musst du das natürlich anpassen. Die genauen Angaben erstmal ohne gewähr, die Breite müsste ich morgen nochmal im Detail nachschauen! Grüße Moritz

Dann hat die Breitenangabe für die Einkaufswelt - also 1008 - keine Funktion mehr im Responsive? Es wird zwar die eingestellte Höhe genommen, aber die Breite kommt nur noch aus dem Theme/Responsive - richtig verstanden? Wenn zwar die Höhe berücksichtigt wird, nicht aber die Breite, bekomme ich früher oder später immer eine Verzerrung. Und das dürfte dann auch bedeuten, dass ich bei einem Update von SW4 Orange auf SW5 responsive alle Einkaufswelten in die Tonne kloppen kann. :frowning: Die Bilder sind ja nur ein Prolem - HTML-Boxen sind im responsive ja leider garnicht “kontrollierbar” - entweder Box zu klein oder Schrift zu winzig :cry:

[quote=“sonic”]Dann hat die Breitenangabe für die Einkaufswelt - also 1008 - keine Funktion mehr im Responsive? Es wird zwar die eingestellte Höhe genommen, aber die Breite kommt nur noch aus dem Theme/Responsive - richtig verstanden? Wenn zwar die Höhe berücksichtigt wird, nicht aber die Breite, bekomme ich früher oder später immer eine Verzerrung. Und das dürfte dann auch bedeuten, dass ich bei einem Update von SW4 Orange auf SW5 responsive alle Einkaufswelten in die Tonne kloppen kann. :([/quote] Genau, die Breite hat sich entsprechend geändert. Daher passend auch die SW4 Einkaufswelten nicht mehr und bei der Angabe im Backend steht explizit, dass diese nur im alten Template verwendet wird. Durch das Responsive muss halt die Proportion des Bildes passen, sonst wird es beim verkleinern ja immer verzerrt. [quote=“sonic”]Die Bilder sind ja nur ein Prolem - HTML-Boxen sind im responsive ja leider garnicht “kontrollierbar” - entweder Box zu klein oder Schrift zu winzig :cry:[/quote] Das hatte ich schon im anderen Thread gesehen. Leider hab ich mich damit noch nicht im Detail beschäftigt, ich hab das aber einmal weitergegeben, damit ggf. jemand aus dem Team was dazu sagen kann, der davon auch Ahnung hat :slight_smile: Ich denke das da ggf. morgen eine Rückmeldung kommt, haben ja schon alle Feierabend.

Je nach “Breite” und Aufbau der Einkaufswelt wird ein Element zu breit angezeigt. Bsp.: Raster 4 Spalten “Masonry-Effekt” 1. Zeile Banner über 4 Spalten 2. Zeile Banner über 3 Spalten, danach eine leere Spalte 3. Zeile Banner über 3 Spalten, danach eine leere Spalte So zerhaut der “Masonry-Effekt” völlig die Seitenverhältnisse. Ergebniss: Fenster: :thumbdown: Vollbild: :thumbup:

Hallo, verstehe das Problem da noch nicht ganz. Du solltest die Zeilen auch am besten vollständig füllen. Wenn da was frei bleibt wird das versucht flexibel aufzufüllen. Der Designer sollte am besten immer voll sein je Zeile. Es gibt ja bei responsive keine fixen Brwiten wie in einem starren Grid Sebastian PS: du kannst auch einige Einstellungen im Demoshop einsehen

Naja, der Designer bildet ein Raster ab - und eigentlich erwarte ich, dass das Raster auch berücksichtigt wird! Das Problem jetzt: Es ist pure Kaffeesatzleserei, welche Seitenverhältnisse ein Element WANN hat. Klar versuche ich, eine Zeile zu füllen - könnte aber auch mal sein, dass mir gerade ein “Füllelement” fehlt. Und dann zerhaut es mir im “Masonry-Effekt” völlig das Layout. Es ist ja sogar so, dass selbst bei vollen Zeilen beim “Masonry-Effekt” beim Viewport-Verkleinern durch die Umbrüche permanent die Seitenverhältnisse von Elementen GROB schwanken. Und schon habe ich ein Problem: der “Masonry-Effekt” taugt absolut nicht für Banner/Bannerslider, für “Resize der Elemente” muss man seinem Shop für alles, was KEINE Grafik ist, eine Leselupe beilegen, weil die Schrift einfach *winzig* wird.

Bei dem Problem hing ich auch… In der „emotion.less“ für die Slider, Banner, etc den CSS Befehl background-size: cover auskommentieren. Beispiel: .banner-slider–item { height: 100%; background-position: center center; /* background-size: cover; */ background-repeat: no-repeat; background-color: transparent; } Dann wird das Bild bzw. Element nicht mehr skaliert und ihr könnt mit einer festen Höhe arbeiten. Höhe Grafik + Padding aus der Raster Konfiguration = Bildhöhe im Frontend. Die Grafik ist 1280x384px als Slider und es kommt gut hin. 6 Spalten bei 128px Zeilenhöhe. Ich hoffe ihr könnt was mit der Info anfangen.

Ich habe dasselbe Problem. Wenn ich einen Kategorie Teaser mit 300x300px einbinde wird in der 4-Spaltigen Standardansicht das Bild gestreckt und abgeschnitten. Wenn ich aber eine 6-Spaltige Ansicht erstelle mit einem Abstand von 30px, werden die Teaser korrekt ausgegeben, das Ganze wird mir jedoch viel zu klein.

Das ist doch viel zu kompliziert! Bitte, bitte ein Beispiel: Breite 1160 px 3 Spalten - 4 Zeilen Gesamthöhe ??? Zeilenbreite ?? Zellenhöhe ?? Warum gibt es diesen 10 px Abstand?! Was soll das!? Kann man nicht einfach ein blödes Template .jpg machen und dann hau ich meine Grafiken drauf, speicher es ab, lad es hoch und voila. Wäre über Antworten sehr dankbar.

Ich bräuchte auch ein konkretes Beispeil. Weder finde ich in SW 5 die Einstellung für die Zeilenhöhe - noch erschliesst sich mir die Addition von 10px etc.
Ist es nicht möglich mit eine Bannergrösse zu nennen die nicht skaliert wird (und dadurch unhscharf) - 4 spaltig / 3 zeilig / responsive Theme ?

Wieso ist das bei SW so eine Doktorarbeit?

Danke

P.

Meine Rede, 
Shopware muss hier echt nachbessern !

Wie ich lese war das bei der Version 4 wohl ganz einfach die richtigen Bildermaße zu setzen. 
Man kann nicht risige Bilder einfach rein legen und gut ist. Das hat wohl nicht mit Shopstyling tun  oder. Auserdem wirkt dann bald jeder Shop gleich…
 

1 „Gefällt mir“