Neu Bilder in Chrome zerquetscht angezeigt..

[Jma]

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.

 

[AndiMaO]

Bei mir dasselbe. Wer hat denn da nun den Ball?

 

[css-umsetzung]

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]

Bei mir dasselbe. Wer hat denn da nun den Ball?

Hallo Andi, ich habe gestern auch ein Supportticket eröffnet. Hoffentlich löst JTL dies bald.

 

[Jma]

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]

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?

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

 

[Jma]

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?

.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]

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?

 

[Jma]

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?

Unendlich vielen Dank. Das hat geklappt. Nun werden die Bilder auch im Chrome wieder richtig angezeigt. Einen ganz schönen Rest-Sonntag wünscht: Daniel

 

[AndiMaO]

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]

Ja, da gehst du im Plugin vom salepix Templater auf Experten Einstellung -> SCSS und trägst das im child_custom_crit.scss ein.

 

[Backhaus.digital]

Wir haben das Problem seit gestern auch bei 2 von uns betreuten Shops - ggf. eine Bibliothek vom verwendeten Slider die dazwischen funkt?

 

[AndiMaO]

Ja, da gehst du im Plugin vom salepix Templater auf Experten Einstellung -> SCSS und trägst das im child_custom_crit.scss ein.

Danke, die Vorschaubilder sind etwas höher geworden, aber nicht wie sie angelegt sind. Aber nun sind die Bilder in der Artikeldetailseite auch so deformiert. Hab es wieder rückgängig gemacht.

 

[css-umsetzung]

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:

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

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

 

[Jma]

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.

 

[css-umsetzung]

das was ich hier gepostet habe hilft auch bei dir

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

 

[Jma]

das was ich hier gepostet habe hilft auch bei dir

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

Danke, ja habe es vorhin probiert und nun ist es korrekt. Schönen Tag Dir.