If you notice images don’t load after upgrading to WordPress 4.4 and you use SSL on the frontend, you’re not alone. In a thread on the WordPress.org support forum, Brokkr explains the crux of the problem:
I recently switched my WordPress site to https after getting certificates from Let’s Encrypt. Using 4.3.1 all content was https.
After upgrading to 4.4 images no longer load and the browser complains about mixed content. Instead of an image,I get a filename printed out. Inspecting the filename-element in Chrome or Firefox gets me this
<img width="984" height="615" src="https://brokkr.net/wp-content/uploads/2015/11/22100041369_591b31367d_b_enigma1-984x615.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="22100041369_591b31367d_b_enigma1" srcset="http://brokkr.net/wp-content/uploads/2015/11/22100041369_591b31367d_b_enigma1-300x188.jpg 300w, http://brokkr.net/wp-content/uploads/2015/11/22100041369_591b31367d_b_enigma1.jpg 1024w, http://brokkr.net/wp-content/uploads/2015/11/22100041369_591b31367d_b_enigma1-984x615.jpg 984w" sizes="(max-width: 984px) 100vw, 984px">As you can see, the image’s src is correctly set to https, whereas the srcset attribute is un-encrypted.
Chris Cree who experienced the same problem discovered that the WP_SITEURL and WP_HOME constants in the wp-config.php file were configured to structure URLs with http instead of https. Cree suggests users check their settings to see which URL type is configured. If both the WordPress address and Site URLs don’t show https, it’s likely causing issues with responsive images in WordPress 4.4.
Joe McGill, who helped lead the effort to get responsive images into WordPress, also responded in the forum thread and confirms Cree’s suggestion is correct, “If you’re running HTTPS on the front end, you should change the URLS for your home and site URL in Settings > General so they use the HTTPS scheme,” he said.
McGill confirms that the issue is related to a bug in the way WordPress builds URLs. Even though the solution in the trac ticket is one line of code, McGill says it will break a lot of site configurations. If changing the settings doesn’t work or you don’t have access to the settings page, you can add this snippet of code to the functions.php file or add it as a separate plugin.
/*
* Force URLs in srcset attributes into HTTPS scheme.
* This is particularly useful when you're running a Flexible SSL frontend like Cloudflare
*/
function ssl_srcset( $sources ) {
foreach ( $sources as &$source ) {
$source['url'] = set_url_scheme( $source['url'], 'https' );
}
return $sources;
}
add_filter( 'wp_calculate_image_srcset', 'ssl_srcset' );
The solutions described above should work for most people serving content over SSL unless you’re using CloudFlare. If you still encounter problems with images not loading after applying the fix, I encourage you to create your own thread in the WordPress support forum.
The Problem I am having with 4.4 and WP Engine is:
One the setting are copied over to the staging server and the staging server doesn’t have the certificate so it give you a warning. Which you can override and then you hit another error in a redirect loop which results in an error.
So this had rendered my staging server for my online store inoperable.
(Yes WP Engine I am contacting support)
But oh my this is a bit of problem for those who like to test stuff before they update.