Das Problem scheint gelöst zu sein, die Bilder werden angezeigt.
Allerdings viel zu groß. Für die Sonsporen-Seite kann dieser CSS-Code helfen:
.page-id-31023 .mg-card-box img {
max-width: 290px;
height: auto;
width: 100%;
}
Wenn das Problem gelöst ist, setze bitte den Thread dann auf gelöst (rechte Seitenleiste, Status) => Begründung.
————————–
CSS-Code kann man
1.) Wenn kein Child-Theme vorhanden ist
im WordPress-Backend >> Design >> Customizer >> zusätzliches CSS (ganz ans Ende in einer neuen Zeile) einfügen.
Abgekürzter Weg -> (dein-domainname.de/wp-admin/customize.php), also:
/wp-admin/customize.php an deine Domain anhängen >>, aufrufen und dann auf zusätzliches CSS klicken, das funktioniert auch (noch?), wenn du unter dem Menüpunkt Design kein „Customizer“ mehr findest.
2.) Wenn du ein Child-Theme verwendest,
dann trage stattdessen den CSS-Code in die Datei style.css ganz ans Ende in einer neuen Zeile ein.
Nach dem Abspeichern musst du den Browsercache leeren, drücke dafür CTRL (STRG) + SHIFT + Entf gleichzeitig, dadurch wird in den gängigen Browsern ein Fenster zum Löschen geöffnet (weitere Hilfe dazu). Auf einem Smartphone musst du natürlich den Browser-Cache anders entfernen.
Solltest du ein Cache-Plugin installiert haben, leere auch diesen Cache. Nun teste auf der Seite, ob du eine Änderung siehst.
Dass die Bilder in deiner Seite nicht angezeigt wurden, hängt mit einem zeitweisen Ausfall der Bereitstellung der Bilder durch das von dir genutzte Plugin Jetpack zusammen. Dieses lädt die Bilder über einen von Jetpack bereitgestellten CDN-Server, der heute etwa zu der Zeit als du das geschrieben hattest ausgefallen war. Ich finde mehrere weitere Meldungen dazu im englischsprachigen Netz. Bereits kurz danach scheint es jedoch wieder in Ordnung zu sein.
Ich würde dir jedoch empfehlen auf Jetpack zu verzichten. Dessen Verwendung ist mit dem deutschen Datenschutz nicht vereinbar. Im schlimmsten Fall drohen dir Abmahnungen. Deaktiviere und lösche das Plugin um auf Nummer sicher zu gehen. Damit löst du gleichzeitig auch das Problem, dass deine Bilder aktuell von woanders ausgeliefert werden, was zu eben diesem Ausfall geführt hat.
Das ist jedoch nicht dein einziges Datenschutzproblem. Das von dir genutzte Theme Newsup bindet ebenso GoogleFonts von einem Google-Server aus in deiner Website ein. Auch das ist nach deutschem Datenschutz nicht zulässig. Die Lösung wäre diese Schriftdateien lokal in deinem Hosting abzulegen. Ich habe mir kurz das Theme angeschaut und sehe keine Option, die dafür dort eingebaut ist. Somit hast du diesbezüglich 3 Lösungsmöglichkeiten:
Die oben schon genannten vergrößerten Bilder, tauchen übrigens nur in Chrome-basierten Browsern auf. Im Firefox ist alles normal. Grund dafür ist diese Styleangaben in deinem Projekt:
img:is([sizes=auto i],[sizes^="auto," i]){contain-intrinsic-size:3000px 1500px}
Dieses wird durch WordPress seit Version 6.9 erzeugt (im Core übrigens an der Stelle hier) und dein Theme scheint nicht damit kompatibel zu sein da es die Bilder fehlerhaft ausgibt. Ohne das Theme zu wechseln, kannst du das mit einem Hook lösen:
add_filter( 'wp_img_tag_add_auto_sizes', '__return_false' );
Den müsstest du in der functions.php eines Child-Themes oder per Code Snippet Plugin einfügen.
Gutes deep dive
„Im Firefox ist alles normal“ war mir nicht aufgefallen, ich hatte es nur im Chrome angeschaut.
Der Code in der media.php img:is([sizes=auto i],[sizes^="auto," i]){contain-intrinsic-size:3000px 1500px} soll ja eigentlich Fehler beheben, die auftreten wenn (moderne) Browser keine Platzhaltergröße erhalten, um das Layout korrekt zu berechnen. Fehlt die Platzhaltergröße, werden die Bilder oft mit 0px oder 300px dargestellt.
Mit dem Hook/Filter add_filter( 'wp_img_tag_add_auto_sizes', '__return_false' ); wird der Code aus der media.php wieder aufgehoben/ungültig. Kann problemlos funktionieren, birgt aber auch die Gefahr, dass eben genau der Fehler (0 oder 300px) auftritt.
Hier ist ein Ticket dazu: https://core.trac.wordpress.org/ticket/62413
Die übergroßen Bilder treten in Chrome und allen Chrome-basierten Browsern auf, auch in Edge.
Nachfolgend ein CSS-Code (speziell für die Sponsoren-Seite), der nur in diesen Browsern greift, in Firefox aber nicht:
@supports (not (-moz-appearance:button)) and (contain:paint) and (-webkit-appearance:none) {
.page-id-31023 .mg-card-box img {
max-width: 219px;
height: auto;
width: 100%;
}
}
Wenn der Hook/Filter add_filter( 'wp_img_tag_add_auto_sizes', '__return_false' ); keine Probleme bereitet, würde ich diesen jedoch dem CSS-Code vorziehen, wenn ein Fix auf allen Seiten erforderlich ist.
Da seit einiger Zeit keine Rückmeldung mehr vom TE (Thread-Ersteller) kam, wird der Thread aus administrativen Gründen auf gelöst gesetzt, damit die ungelösten Threads, in denen noch Hilfe benötigt wird, leichter auffindbar sind.
Der Status „gelöst“ kann vom TE jederzeit geändert und der Thread kann mit Nachfragen oder einem Feedback ergänzt werden.
Lösung gefunden? In einem User-helfen-User-Forum wie diesem hier ist das Posten der Lösung für andere User immer hilfreich, danke.
