Lösung: Einkaufswelt Bilder nicht beschneiden

Shopware 5 Themes & Design
1

Ich hattte wie viele von euch das Problem dass in einer Einkaufswelt im “Fluid / Responsive” Modus die Bilder immer beschnitten werden.
Das ist natürlich bei Bildern mit weissem Rahmen oder Transparenz (Produktbilder) ärgerlich.

Hier präsentiere ich eine simple Lösung für das Problem (erstes Bild normal, im zweiten Bild werden Kamera und Zitrone nicht mehr beschnitten):

858×879 124 KB
 
853×880 115 KB

Dazu fügt man ein “Code-Element” irgendwo in der Einkaufswelt ein.
Dorf fügt man foldenden Code ein:
 

$('.ew-nocrop').each(function(){
  $(this).find(".banner--content").css('background-image', 'url(' + $(this).find('img').attr('src') + ')');
 });


.ew-nocrop .banner--content{
    width: 100% !important;
    height: 100% !important;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center; 
}
.ew-nocrop img{
display: none;
}

Leider kann ich hier im Forum die eckigen Klammern nicht richtig einfügen. Aber so sollte das dann aussehen:

Wer will kann dieses “Code-Element” danach auf unsichtbar setzen, der Code wird trotzdem ausgeführt.
 

Danach fügt man bei jedem Banner(Bild) die CSS Klasse “ew-nocrop” hinzu:

Ich hoffe das konnte einigen von euch helfen!

2

Funktioniertr bei mir leider nicht. Wenn ich das so wie in der Anleitung mache werden gar keine Bilder mehr angezeigt im Bannerslider.

Kann natürlich sein das deine Anleitung nach der Einführung der „neuen“ Einkaufswelten nicht mehr gilt?

3

Schade, geht bei mir leider auch nicht. 

4

Hallo,

seit Shopware 5.2 gibt es ja etliche Optimierungen und auch Änderungen.

Der neue Zeilenmodus z.B. beschneidet nichts mehr und richtet sich dynamisch immer nach dem höchsten Element einer Zeile

Sebastian

5

Im kategorieteaser werden die bilder aber in der neuesten version immer noch je nach Bildschirmgröße in der höhe oder breite beschnitten.

 

6

@malzfons schrieb:

Im kategorieteaser werden die bilder aber in der neuesten version immer noch je nach Bildschirmgröße in der höhe oder breite beschnitten.

 

Das lässt sich im CSS anpassen. Es sind im Kategorie-Teaser Hintergrundbilder und deren Größe wird mittels background-size gesetzt. Mit dem Wert contain werden die Bilder nicht „beschnitten“. Es entstehen dann weiße Randbereiche - bzw. in der Farbe die als Hintergrund gesetzt wird. Alternativ kann man auch background-size: 100% setzen. Die 3 Alternativen haben alle Vor- und Nachteile. Wenn die Darstellung des gesamten Bildes zwingend ist, weil dort Informationen enthalten sind, die immer sichtbar sein müssen, darf man den Shopware-Standard mit background-size: contain nicht verwenden. 

2 „Gefällt mir“
7

Hallo hth,

erstmal ein gutes neues Jahr - dein Post ist zwar mittlerweile schon 1 Jahr her, aber ich stehe nun genau vor dem Problem, dass mein Bild egal in welcher Größe ich es erstelle beschnitten wird. Ich verstehe leider deine Anleitung nicht ganz, wie ich das einstellen kann, dass die Bilder eben gerade nicht beschnitten werden? Könntest du das evtl. genauer erläutern?

Vielen Dank.

Gruß
Mathias

8

@timespring schrieb:

Hallo hth,

erstmal ein gutes neues Jahr - dein Post ist zwar mittlerweile schon 1 Jahr her, aber ich stehe nun genau vor dem Problem, dass mein Bild egal in welcher Größe ich es erstelle beschnitten wird. Ich verstehe leider deine Anleitung nicht ganz, wie ich das einstellen kann, dass die Bilder eben gerade nicht beschnitten werden? Könntest du das evtl. genauer erläutern?

Vielen Dank.

Gruß
Mathias

Auf eine Antwort wirst du vermutlich vergeblich warten, der Verfasser ist seit 6 Monaten nicht mehr aktiv.  Wink 

Kann nicht verstehen warum SW es mit den EW so kompliziert macht, und dadurch extrem viele User Probleme mit den Bildern haben. Undecided

Wie schon von @Sebastian erwähnt, nimm den „Zeilenmodus“ damit wird nichts mehr abgeschnitten.

9

@timespring schrieb:

Hallo hth,

erstmal ein gutes neues Jahr - dein Post ist zwar mittlerweile schon 1 Jahr her, aber ich stehe nun genau vor dem Problem, dass mein Bild egal in welcher Größe ich es erstelle beschnitten wird. Ich verstehe leider deine Anleitung nicht ganz, wie ich das einstellen kann, dass die Bilder eben gerade nicht beschnitten werden? Könntest du das evtl. genauer erläutern?

Vielen Dank.

Gruß
Mathias

Hallo @timespring​

 

Einstellen kannst Du das nicht, die CSS-Anweisungen müssen in dein eigenes Theme. Weißt Du nicht, wie man ein Theme anlegt, die richtige Stelle im CSS findet oder wie die Anweisung genau heißt oder alles zusammen?

.emotion–category-teaser .category-teaser–link { background-size: contain}

 

@vitago: 6 Monate halte ich persönlich für ein Gerücht. Das System von Shopware hat auch Vorteile, man kann „Schmuckbilder“ wie Landschaften in einen Kategorieteaser setzen ohne immer exakt auf Höhen/Breitenverhältnisse oder weiße Ränder achten zu müssen. Der Zeilenmodus ist nicht die eierlegende Wollmilchsau, um den Beschnitt von Bildern zu verhindern. Dieser hat andere Nachteile bei der Veränderung der Viewports oder Lücken bei unterschiedlich hohen Inhalten  benachbarter EK-Elemente. Wenn man ein bestehendes System nur dahingehend anpassen möchte, dass die Kategorieteaser-Bilder nicht beschnitten werden, ist das nicht unbedingt ein sinnvolles Vorgehen. 

 

10

@hth schrieb:

@vitago: 6 Monate halte ich persönlich für ein Gerücht. 

@hth‍  

 

…Dieser hat andere Nachteile bei der Veränderung der Viewports oder Lücken bei unterschiedlich hohen Inhalten  benachbarter EK-Elemente.

Ah…hatte mich schon gewundert warum auf einmal bei unserem Hersteller Bild in der EK eine Lücke ist die davor in der 5.1 nicht war. 

11

@hth vielen dank für deine Rückmeldung bezüglich den Bildern in der Einkaufswelt.

Ich habe mein Theme gekauft und nich selbst erstellt, daher weiß ich nicht genau wo oder wie ich die richtige Stelle im CSS finde oder wie die Anweisung genau heißt.

Gibt es hierzu vielleicht eine halbwegs leicht verständliche Anleitung wo ich mich einlesen kann? Oder kannst du mir vielleicht sagen wo ich was eintragen muss?

Vielen Dank mal schon für deine Rückmeldung.

12

@timespring schrieb:

@hth vielen dank für deine Rückmeldung bezüglich den Bildern in der Einkaufswelt.

Ich habe mein Theme gekauft und nich selbst erstellt, daher weiß ich nicht genau wo oder wie ich die richtige Stelle im CSS finde oder wie die Anweisung genau heißt.

Gibt es hierzu vielleicht eine halbwegs leicht verständliche Anleitung wo ich mich einlesen kann? Oder kannst du mir vielleicht sagen wo ich was eintragen muss?

Vielen Dank mal schon für deine Rückmeldung.

Du kannst ein eigenes von dem gekauften Theme „abgeleitetes“ neues Theme erstellen. Alternativ gehst Du in das Pluginverzeichnis des Kaufthemes und fügst  die folgende  Änderung ganz am Ende in die emotions.less Datei ein. Das würde im Standardtheme funktionieren. Eventuell gibt es diese Datei nicht, dann nimm eine andere Less-Datei. Die sollten immer die Endung .less haben. Wo die sich im Plugin-Verzeichnis genau befinden, musst Du selber nachsehen. Sobald Du ein Update des Themes über den Pluginmanager durchführst, könnte die Änderung überschrieben werden. Du musst diese vorab sichern und ggf. wieder neu einpflegen. Das dürfte die „pragmatischste“, billigste und schnellste Lösung für Dich sein.

.emotion--category-teaser .category-teaser--link { background-size: contain}

Außerdem könnte es sein, dass das Theme an dieser Position bereits Änderungen vornimmt. Dies musst Du  unbedingt vor dem produktiven Einsatz testen. Kaputt machen kannst Du bei dem Test nichts, spiel einfach wieder die vorher gesicherte Originaldatei auf, falls etwas nicht funktioniert. 

Du musst immer den Theme-Cache im Backend leeren, nachdem Du eine Änderung vorgenommen hast. 

Eine Anleitung zur Erstellung eines eigenen Themes gibt es in der Developer-Dokumentation. Ganz ohne Vorkenntnisse wird es jedoch schwierig, diese zu verstehen.

Persönlich würde ich dir raten, dass Kautheme in ein eigenes Theme zu übertragen und dann dort Änderungen vorzunehmen. Das System ist von der Vererbungsreihenfolge einfacher zu überblicken. Allerdings wäre es dann nicht über den Pluginmanager aktualisierbar und mögliche Backendkonfigurationen des Themes würden nicht funktionieren. 

Damit wäre meine Bereitschaft kostenlos Support für Konkurrenten zu leisten allerdings erschöpft. Vielleicht ist es sinnvoller für dich zuerst den Theme-Verkäufer zu kontaktieren als selber zu experimentieren.

13

Also bezüglich der Bilder in Einkaufswelten habe ich mir angewöhnt:

ich mach ein Bild z.B. im Adobe Photoshop, dann ein Hintergrund mit bestimmten Pixelabmessungen mit weissem Hintergrund. Dann ziehe ich mein eigentliches Bild in dieses Bild hinein. Rundherum sind dann mindestens 30 pixel weiss. somit kann shopware abschneiden was es will. das eigentliche Bild ist immer sichtbar.

ist zwar keine profilösung, aber es klappt…

gruss und nen guten rutsch

matthias

1 „Gefällt mir“
14

Vielen Dank ich wünsch ebenfalls ein Gutes, Erfolgreiches und vor allem Gesundes neues Jahr!

… vielen Dank für eure Antworten. Ich habe gestern noch versucht der Anleitung von hth zu folgen … war jedoch nicht gerade von Erfolg gekrönt. Ich habe da leider zu wenig Kenntnis als das ich diesen Lösungsvorschlag umsetzen könnte. Vielen herzlichen Dank trotzdem für deine ausführliche Beschreibung hierzu.

Vielen Dank malzfons für deine Variante hierzu … ist zwar sicherlich keine Profilösung, aber wenn es klappt, dann werde ich das auch so versuchen :-)!

Vielen Dank nochmal und Grüße
Mathias

15

Hat das schon jemand ab Shopware 5.2, also auch 5.3 bzw. 5.4 umsetzen können?

16

Ich kämpfe auch aktuell damit.

Wie kann man Banner auf einer Startseite z.B. einbinden ohne das immer etwas abgeschnitten oder sie total verschoben angezeigt werden => gar nicht.

Shopware hat hier schlichtweg nichts vorgesehen das man einen Banner mit Textcontent oder klaren Elementen einbinden kann.

Noch dazu müsste man für sowas dann für Mobile, Tablet und Desktop getrennte Einkaufswelten erstellen die unabhängig vom Gerät aber alle geladen werden von Shopware was massiven Traffic für den User bedeutet da die alle per Display None kommen und dann nur aus/eingeblendet werden.

Einige Banner sind aber auch so gestaltet das man es selbst mit viel Mühe nicht hinbekommt die mit dem Digital Publishing “zusammen zu bauen”.

Am besten merkt man das mit Bannern bei Rastergrößen von 4x1 oder 2x1

Selbst mit einer Einkaufswelt und dann jeweils in den Sprungmarken ausgeblendeten Elementen hat man beim Einsatz von z.B. der 3 der oben genannten Elemente mindestens 3 verschiedene Bannergrößen und bei 3 zu beachtenden Sprungmarken dann in Summe 9 Bilder die geladen werden müssten.

Das ist nicht Mobile First, das ist mobile worst case…

Baut man die Banner so das sie im Mobile lesbaren nicht abgeschnittenen Text haben, bedeutet das im Desktop Modus massiven white Space drumherum wo nur “Hintergrund” vom Banner zu sehen sein darf.

 

17

Hmm, was genau funktioniert denn bei euch nicht?

Man muss nur folgendes JavaScript und CSS in einem Code-Element einfügen:

1382×1044 38.8 KB

$(‚.ew-nocrop‘).each(function(){
  $(this).find(„.banner–content“).css(‚background-image‘, ‚url(‘ + $(this).find(‚img‘).attr(‚src‘) + ‚)‘);
 });


.ew-nocrop .banner--content{
width: 100% !important;
height: 100% !important;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.ew-nocrop img{
display: none;
}

Danach kann man bei jedem Banner, welches man nicht beschneiden möchte, die CSS-Klasse „ew-nocrop“ einfügen.

Danach dürfte der Banner eigentlich nicht mehr beschnitten werden.

Ansonsten mal eine URL der nicht funktionierenden Einkaufswelt Posten.

1 „Gefällt mir“
18

Vielen Dank für die Info

Funktioniert auch mit Shopware 5.7.7 noch einwandfrei. Wichtig beim Kopieren des Scripts gehen einige Werte verloren also besser das Script vom Bild abschreiben.