none
[PHP][Web Apps] Problem with responsive images in Scalable WordPress 4.4+ installs RRS feed

  • Question

  • WordPress 4.4 creates automatic responsive image handling via the srcset attribute of the img tag. This attribute is automatically added any time one inserts media into a post or page from the WordPress dashboard.

    You can read about this change here: https://make.wordpress.org/core/2015/11/10/responsive-images-in-wordpress-4-4/

    The rendered HTML should look like this:

    <img width="900" height="600" src="http://xxx.blob.core.windows.net/wp-media/2016/01/43144-fatal-photo-900x600.jpg" class="attachment-large size-large wp-post-image" alt="Maine State Police continue to investigate a crash on I-295 in Gardiner in which Ian Carter, 27, of Gardiner was found dead on Saturday." srcset="http://xxx.blob.core.windows.net/wp-media/2016/01/43144-fatal-photo-450x300.jpg 450w, http://xxx.blob.core.windows.net/wp-media/2016/01/43144-fatal-photo-900x600.jpg 900w, http://xxx.blob.core.windows.net/wp-media/2016/01/43144-fatal-photo.jpg 999w" sizes="(max-width: 900px) 100vw, 900px">

    Note that all the URLs in the srcset attribute's value point to http://xxx.blob.core.windows.net/wp-media/

    However, the Azure Storage plugin does not correctly build these srcset URLs. Instead, it renders the URLs as an incorrect mix of file and HTTP paths to the site's wp-content folder, like this:

    <img width="900" height="600" src="http://xxx.blob.core.windows.net/wp-media/2016/01/43144-fatal-photo-900x600.jpg" class="attachment-large size-large wp-post-image" alt="Maine State Police continue to investigate a crash on I-295 in Gardiner in which Ian Carter, 27, of Gardiner was found dead on Saturday." srcset="http://yyy.azurewebsites.net/wp-content/uploads/D:homesitewwwroot/wp-content/uploads/2016/01/43144-fatal-photo-450x300.jpg 450w, http:/yyy.azurewebsites.net/wp-content/uploads/D:homesitewwwroot/wp-content/uploads/2016/01/43144-fatal-photo-900x600.jpg 900w, http://yyy.azurewebsites.net/wp-content/uploads/D:homesitewwwroot/wp-content/uploads/2016/01/43144-fatal-photo.jpg 999w" sizes="(max-width: 900px) 100vw, 900px">

    It would be nice if the Azure team would fix the Azure Storage plugin to correctly create these URLs.

    Until then, this can be fixed by filtering wp_calculate_image_srcset in your functions.php file:

    function azure_fix_invalid_srcset_path( $sources ) {
    	$storageHost = "xxx.blob.core.windows.net"; // change me to be your storage domain
    	$webHost = "yyy.azurewebsites.net"; // change this to be your website domain
    	$container = "wp-media"; // change this to be the name of your storage container
    	
    	$newpath = str_replace( $webHost, $storageHost, $sources['url'] );
    	return str_replace( "wp-content/uploads/D:homesitewwwroot/wp-content/uploads", $container, $newpath );
    }
    
    add_filter( 'wp_calculate_image_srcset', 'azure_fix_invalid_srcset_path' );

    Hope this helps. Microsoft: Please consider this a bug report for the Azure Scalable WordPress storage plugin.




    Monday, January 4, 2016 8:09 PM

Answers

  • hi Doug,

    Thanks for your kindly sharing the solution with our community member and tell us this issue. I am glad to hear that you find the workaround to fix this issue. Meanwhile, I recommend you can refer to this Patrick's blog about fix for Azure Storage Plugin in WP4.4 (http://projectnami.org/fix-for-azure-storage-plugin-and-wp-4-4/ ).  Also you can submit the question on the WP plugin at this page(https://wordpress.org/support/plugin/windows-azure-storage ). On backend, I will report this issue.

    Thank you.

    Any concerns, please let me know.

    Regards,

    Will


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    • Proposed as answer by Syed Irfan Hussain Tuesday, January 12, 2016 10:16 AM
    • Marked as answer by Doug V Sunday, January 17, 2016 2:27 AM
    Tuesday, January 5, 2016 2:28 PM
    Moderator

All replies

  • Hi,

    Thank you for your patience. I had reported this issue and we will get back to you later as soon as we can.
    Appreciate your understanding.

    Best Regards,
    Gary Liu


    Tuesday, January 5, 2016 2:57 AM
    Moderator
  • hi Doug,

    Thanks for your kindly sharing the solution with our community member and tell us this issue. I am glad to hear that you find the workaround to fix this issue. Meanwhile, I recommend you can refer to this Patrick's blog about fix for Azure Storage Plugin in WP4.4 (http://projectnami.org/fix-for-azure-storage-plugin-and-wp-4-4/ ).  Also you can submit the question on the WP plugin at this page(https://wordpress.org/support/plugin/windows-azure-storage ). On backend, I will report this issue.

    Thank you.

    Any concerns, please let me know.

    Regards,

    Will


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    • Proposed as answer by Syed Irfan Hussain Tuesday, January 12, 2016 10:16 AM
    • Marked as answer by Doug V Sunday, January 17, 2016 2:27 AM
    Tuesday, January 5, 2016 2:28 PM
    Moderator