Eines der großen neuen Features von WordPress 4.4 sind die Responsive Images. Dank dieser Funktion werden alle Bilder nun automatisch angepasst an das Endgerät des Nutzers angezeigt, was insbesondere für Mobilgeräte von Vorteile ist.
Doch in Verbindung mit SSL (also https) funktioniert dieses Feature noch nicht so richtig, wie ich heute beim Veröffentlichen eines neuen Beitrags feststellen musste. Das Einbetten der Bilder klappt zwar im Beitragseditor ganz normal, doch bei der Ansicht im Blog fehlen dann die Bilder, weil sie über den http-Pfad eingebunden werden (also unverschlüsselt).
So sieht das Problem aus:
Lösung 1: Plugin
Um es dir so einfach wie möglich zu gestalten, habe ich die Lösung in ein kleines Plugin gesteckt. Du kannst es hier herunterladen oder direkt über die Plugin-Suche in WordPress installieren.
Lösung 2: Füge selbst einen Code-Schnipsel ein
In meinem Fall konnte ich das Problem mit einem Code-Schnipsel lösen, den ich auf Stackexchange gefunden habe:
add_filter( 'wp_calculate_image_srcset', function( $sources )
{
foreach( $sources as &$source )
{
if( isset( $source['url'] ) )
$source['url'] = set_url_scheme( $source['url'], 'https' );
}
return $sources;
}, PHP_INT_MAX );Dieser PHP-Code muss in WordPress global eingefügt werden. Korrekt wäre ein eigenes Plugin dafür. Nicht ganz sauber, aber einfacher: Den Code in die functions.php des Themes einfügen, i.d.R. ganz am Ende. Manche Themes bieten ein entsprechendes Feld auch in den Theme Options an.
Wenn du Unterstützung dabei brauchst, schreib mir gern!
Achtung: Bearbeite niemals PHP-Dateien über den Editor in WordPress (unter Plugins > Editor bzw. Design > Editor), wenn du keinen FTP-Zugriff auf die Website hast!
Danke 🙂
Habe das Schnippsel genommen. Die Bilder werden geladen, aber der gesamte Inhalt ist wohl gemischt, die Bilder werden unverschlüsselt angezeigt, wobei der Inhalt augenscheinlich weiterhin verschlüsselt ist, stellt dies irgendein Sicherheitsproblem dar, da der Inhalt gemischt ist?
Hallo Axel,
es ist kein Sicherheitsproblem, aber kann sich negativ in Rankings auswirken und zu Warnmeldungen in manchen Browsern führen.
Der Code-Schnipsel führt aber eigentlich genau dazu, dass die Bilder über https eingebunden werden. Bist du sicher, dass der Code ausgeführt wird?
Hallo wir haben auf unserer Seite wp 4.5.1
Leider greift das Plugin nicht. Ich werde später mal die Variante 2 über ftp versuchen. Ich hoffe diese Variante geht. ????
LG
Lukas
Hallo Lukas,
was meinst du denn mit „greift nicht“? Es kann durchaus sein, dass in der neuen WordPress-Version das hier beschriebene Problem gelöst wurde oder sich verändert hat.
Schönen Gruß
Michelle
Bei mir hilft das Plugin unter 4.51 leider auch nicht. Hatte mich schon gefreut direkt so eine schnelle Lösung zu finden 😉
Hi Manuela,
schade. Schick mir gern per E-Mail Details zu deiner Seite und den Stellen, wo die Bilder nicht funktionieren.
Schade, bei mir hilft es auch nicht mehr 🙁
Ist ja aufgrund der Version auch nicht mehr ganz aktuell. Wenn wir uns deinen Fall mal ansehen sollen, schreib uns gerne eine E-Mail.
Hallo Michelle,
danke erstmal für den Artikel. Hilft dein Plugin auch bei solchen Problemen: smartphone-mania.de/umstieg-von-android-auf-ios-erste-schritte-kontakte-ubertragen-und-einrichtung/
Das Bild wird plötzlich einfach nicht mehr geladen. Habe dein Plugin installiert. Muss ich jetzt noch irgendwas machen?
Grüße
Patrick
Hallo Patrick,
in deinem Fall ist das Bild einfach nicht mehr vorhanden – siehe https://smartphone-mania.de/wp-content/uploads/2012/11/Synchronisieren-Kontakte-iPhone-1024×721.png. Du kannst es erneut über den Beitrag einbinden.
Hallo Michelle,
hm. Wenn ich es anklicke, öffnet sich aber die Lightbox mit dem korrekten Bild :-O
Mir ist leider bewusst, dass ich solche Bilder neu einbinden muss bzw. die Größe ändern muss. Wir haben allerdings 1.600 Artikel. Kennst du eine Möglichkeit (oder Plugin), um das Problem schneller und massenweise zu lösen?
Du könntest es mit Regenerate Thumbnails versuchen, wenn sie die Bildgrößen im Theme nicht geändert haben. Oder mit Broken Link Checker die Bilder ausfindig machen und dann per Hand ersetzen. Ansonsten ist mir kein passendes Plugin bekannt.
Mit der Aktualisierung des Jetpack-Plug-ins hat das Problem sich gelöst.
Liebe Michelle,
ich erstelle gerade meine Seite auf WordPress und einige Fotos werden mir zwar auf allen Browsern auf dem Laptop angezeigt, aber mobil, fehlen viele Fotos! Habe die Fotos bereits neu hochgeladen und eingebunden, die Dateiberechtigungen gecheckt, das Plugin von oben installiert, den Schnipsel in functions.php eingefügt, aber es tut sich gar nichts!
Hast du eine Idee, wo das Problem liegen könnte?
Alles Liebe,
Jelena
Hallo Jelena,
das liegt an den Umlauten im Dateienamen, z.B. hier: http://schnabularasa.com/2017/02/17/ofengemuese-mit-pistazienpesto/ (geht auf iPhone und Desktop nicht)
Nicht alle Server sind so konfiguriert, dass Umlaute in Bildern funktionieren. Auf mobilen Geräten funktionieren diese meistens unabhängig davon gar nicht.
Schönen Gruß
Michelle
Hey Michelle,
leider hat das Plugin auf meinem Blog auch nicht geholfen. Bilder werden zwar im HTML mit Link angezeigt, aber leider nicht im Beitrag angezeigt. 🙁
Lediglich das Beitragsbild, das separat bei wordpress eingestellt wird, wird im Beitrag angezeigt. Zum Beispiel hier: https://blog.daydreamer-kev.de/2017/01/oslo.html
Beste Grüße
Kevin
Hast du es mittlerweile lösen können oder um welches Bild geht es? Schreib uns gern direkt eine E-Mail dazu.