WordPress 4.4 Responsive image code “breaks” mixed HTTPS sites WooCommerce

WordPress 4.4 Responsive image code “breaks” mixed HTTPS sites WooCommerce

If you are running a WooCommerce store, it makes sense to have just the shop pages and admin area use HTTPS, and the rest of the site use HTTP, because the HTTPS port can be slow to respond and also HTTPS bypasses caching quite often. With the release of 4.4 we’re now seeing problems with this arrangement. The WooCommerce admin area images are all broken due to the new responsive images feature added in WordPress 4.4. Responsive images are a fantastic addition, but when the standard site URL setting in the wordpress install isn’t set to HTTPS because a plugin like WordPress SSL is doing the HTTPS heavy lifting, the srcset function pulls http image URLs even though the admin area has been force set to HTTPS. And thus, we get broken images in the admin area. I found this band-aid code, but I hope either WordPress or WooCommerce (well, they’re one and the same now, aren’t they? Maybe we’ll get a fast fix…) figures out the issue and resolves it. I’m about to have a lot of client emails! Here’s the fix via WordPress forums, it needs to be placed in the theme functions file:


/*
* 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' );

No Comments

Leave a Reply