Neu Bilder in Chrome zerquetscht angezeigt..

Jma

Aktives Mitglied
5. Dezember 2014
89
5
Zürich
Hallo liebe JTL- Shop-Nutzer,
Heute habe ich bemerkt, dass in unserem Shop die Vorschaubilder der Artikel innerhalb von Warengruppen (Listen- und Galeriedarstellung) flach gequetscht dargestellt werden. Beispiel unten.
Dieses Problem tritt nur bei meinem Desktop in Chrome auf. In Firefox und Edge und wohl auf anderen PC's mit Chrome scheint die Darstellung korrekt.
Die Bilder haben eine falsche Aspect ratio. Es sollten Quadratische Felder mit (in diesem Beispiel) länglichen Bildern von Buchcovern sein. Ich vermute, das hat was mit dem Webp-Format zu tun..
Weiss jemand Bescheid, weshalb es hier (hoffentlich nur bei mir) diese Bilder so falsch darstellt...?

Vielen Dank für Eure Hilfe. Gruss, Daniel

Falsche Darstellung, korrekte Darstellung und Bildinfo..

Update 27.1.24 11:29h: Es wird auf allen Geräten mit CHROME falsch angezeigt. Aber bisherige Chrome-Version zeigte es noch korrekt an. Die neuste Version von Chrome (121.0.6167.86 (Offizieller Build) (64-Bit)) verursacht den Fehler....!!
Update 28.1.24 10:42h: Das webp wird nicht falsch erzeugt, sondern nur falsch dargestellt. Denn wenn ich aus Firefox und aus Chrome ein bestimmtes Webp downloade und öffne, sehen beide gleich (korrekt) aus. Es ist also definitiv eine Darstellungsfrage in Chrome (Container...)..
Update 28.1.24 11:20h: Bei Umschaltung auf NOVA Standard werden die Bilder korrekt dargestellt. Das Problem liegt also im Child-Template, das wir aber weiter verwenden wollen und an dem wir an den Bilder-Ratios nichts geändert haben.
 

Anhänge

  • Bilder_falsche_Ratio.jpg
    Bilder_falsche_Ratio.jpg
    134,7 KB · Aufrufe: 15
  • Bilder_korrekte_Ratio.jpg
    Bilder_korrekte_Ratio.jpg
    221,1 KB · Aufrufe: 15
  • Bilder_falsches_Rendering.jpg
    Bilder_falsches_Rendering.jpg
    243,8 KB · Aufrufe: 15
Zuletzt bearbeitet:

css-umsetzung

Offizieller Servicepartner
SPBanner
6. Juli 2011
6.682
1.609
Berlin
Das sieht sehr eigenartig aus und sehe ich auch bei dir.
Ich kann aber vom css und vom HTML her auf die schnelle keine Unterschiede zu meinen Projekte, wo alles noch OK ist, feststellen.

ist das ein Child Template (sieht irgendwie nicht danach aus)
wenn ja schau wie es im unmodifiziertem NOVA aussieht.
 

Jma

Aktives Mitglied
5. Dezember 2014
89
5
Zürich
Das sieht sehr eigenartig aus und sehe ich auch bei dir.
Ich kann aber vom css und vom HTML her auf die schnelle keine Unterschiede zu meinen Projekte, wo alles noch OK ist, feststellen.

ist das ein Child Template (sieht irgendwie nicht danach aus)
wenn ja schau wie es im unmodifiziertem NOVA aussieht.
Hallo, doch - es ist ein Child Nova Template. Habe mit dem NOVA in der Vorschau probiert: Dort werden diese Bilder richtig dargestellt...! Ich will jetzt aber nicht alles auf NOVA zurückstellen, denn wir haben über die Zeit etliche kleine Anpassungen vorgenommen...
 

css-umsetzung

Offizieller Servicepartner
SPBanner
6. Juli 2011
6.682
1.609
Berlin
trage mal das hier in deinen stylesheets ein, ich bin nicht sicher ob das die endgültige Lösung ist:
vermutlich hast du ein altes Nova Child und nach einem Update, das aktuelle css nicht richtig nachgezogen?


Code:
.square-image .inner img {
object-fit: fill !important;
width:100%;
height:100%;
}
 

Jma

Aktives Mitglied
5. Dezember 2014
89
5
Zürich
trage mal das hier in deinen stylesheets ein, ich bin nicht sicher ob das die endgültige Lösung ist:
vermutlich hast du ein altes Nova Child und nach einem Update, das aktuelle css nicht richtig nachgezogen?


Code:
.square-image .inner img {
object-fit: fill !important;
width:100%;
height:100%;
}
Vielen Dank schon mal. Bin nicht ganz so firm: Habe das in die custom.css aufgenommen...(?) - leider ändert sich das Problem nicht..
in der custom.css steht jetzt:
/*
* Platz für eigene Änderungen direkt als CSS
* Die hier gemachten Änderungen überschreiben ggfs. andere Styles, da diese Datei als letzte geladen wird.
*/
.container {
width:100%;
}
.square-image .inner img {
object-fit: fill !important;
width:100%;
height:100%;
}
 

css-umsetzung

Offizieller Servicepartner
SPBanner
6. Juli 2011
6.682
1.609
Berlin
Ja hast du, denn es ist nicht zu sehen das du da etwas geändert hast.

hast du vorsichtshalber den cache im Backend vom Shop (template cache) gelöscht?
 
  • Gefällt mir
Reaktionen: Jma

AndiMaO

Aktives Mitglied
7. April 2021
33
3
Das klingt ja ganz gut, dass ihr es bei dir gelöst habt. Aber ich habe ein Fire Template und nix daran gemacht. Sollte ich da auch im CSS Änderungen vornehmen?
 

css-umsetzung

Offizieller Servicepartner
SPBanner
6. Juli 2011
6.682
1.609
Berlin
Schau mal auf FB bei Salepix,
der hat auch schon eine Lösung gepostet.

Ich habe das in einem AVIA, was ziemlich gleich sein sollte in dem Bereich, derzeit so eingebaut:

Code:
.square-image .inner img {
object-fit: fill !important;
width:100%;
height:100%;
}

.fullscreen #gallery .inner img {
    width:auto !important;
}
 

Jma

Aktives Mitglied
5. Dezember 2014
89
5
Zürich
Ja hast du, denn es ist nicht zu sehen das du da etwas geändert hast.

hast du vorsichtshalber den cache im Backend vom Shop (template cache) gelöscht?
Hallo CSS-Umsetzung, gerade hat sich gezeigt, dass das Problem doch noch nicht ganz gelöst ist. Und zwar werden die Artikelbilder in der Karrussell-Ansicht (also wenn man innerhalb des Artikels auf die Bilder klickt) auf die mögliche Seitenhöhe vergrössert, ABER UEBER DIE GANZE SEITENBREITE VERZOGEN, siehe Beispiel unten (Detailbild i.O., bei Anklicken auf Karrussell-Ansicht verzogen):

Wie müsste ich wohl die custom.css noch ergänzen, damit auch diese Ansicht wieder korrekt ist...? Betrifft vermutlich auch die anderen Nutzer mit diesem Problem.

edit 30.1.24 0850h: Habe es wohl geschafft (anhand des von Dir weiter oben empfohlenen zusätzl. Codes

.fullscreen #gallery .inner img {
width:auto !important;
}

Es zeigt die Bilder nun in der Karrussell-Ansicht wieder korrekt an.

Bilder_Karrussell_1.jpgBilder_Karrussell_2.jpg
 
Zuletzt bearbeitet:
Ähnliche Themen
Titel Forum Antworten Datum
Neu Automatische Sortierung der Bilder & Anzahl der Ebay Bilder eBay-Anbindung - Fehler und Bugs 0
Neu Es werden nur jpg Bilder angezeigt und keine webP Gelöste Themen in diesem Bereich 3
Neu Export CSV Datei inkl. Bilder Schnittstellen Import / Export 1
Neu beim Umstieg von unicorn auf SCX Bilder aktivieren Otto.de - Anbindung (SCX) 1
Neu Kategorie Bilder werden im Webshop nicht angezeigt User helfen Usern - Fragen zu JTL-Wawi 0
Neu Bilder von Merkmalen werden nicht angezeigt Gelöste Themen in diesem Bereich 5
Versuch Bilder aus Ebay für Kaufland zu übernehmen JTL-Wawi 1.8 0
Bilder Upload und Fehlermeldung WooCommerce-Connector 0
Neu Bilder werden Falsch im Shop angezeigt. WooCommerce-Connector 0
Neu Bilder öffnen sich in mobiler Version fehlerhaft. Allgemeine Fragen zu JTL-Shop 0
Neu Bilder für Kindartikel Gelöste Themen in diesem Bereich 4
Neu Bilder unter "Mehr dieser Waregruppe" und "Kunden, die diesen Artikel gekauft haben, kauften auch" fehlen eBay-Designvorlagen - Fehler und Bugs 0
Neu Amazon Lister übergibt nur das Hauptbild an Amazon, weiter Bilder werden nicht übertragen Amazon-Lister - Fehler und Bugs 0
Neu Wie kann ich Alt-Texte für Bilder an Shopify senden? Shopify-Connector 2
Neu Connector überträgt keine Bilder Shopify-Connector 1
Neu webp-Bilder werden nicht mehr generiert JTL-Shop - Fehler und Bugs 0
Neu Einstellung: "Bilder des Vaterartikels un der folgenden Variationswerte übernehmen" und der Shopware Server "explodiert" Shopware-Connector 10
Neu Bilder werden teilweise in verschiedenen Browser falsch dargestellt Gelöste Themen in diesem Bereich 3
Neu Neuer Verkauskanal: Bilder inaktiv User helfen Usern - Fragen zu JTL-Wawi 2
Neu Shop Bilder-Anzeige in Firefox fehlerhaft Allgemeine Fragen zu JTL-Shop 0
Neu Shop Bilder-Anzeige in Firefox fehlerhaft Allgemeine Fragen zu JTL-Shop 6
Neu Plattform als Darstellungsbedingungen für Bilder oder Text Druck-/ E-Mail-/ Exportvorlagen in JTL-Wawi 0
Custom css für Galerie-Bilder Einrichtung JTL-Shop5 3

Ähnliche Themen