Amateur radio, programming, electronics and other musings

Archive for January, 2016

Today I noticed two WordPress sites I maintain had some broken images. I keep all of my images in Azure Blob Storage so I jumped into Cloudberry Explorer and looked at the files contained in the blob container. I found my images were there. I looked at the source of the page and noticed that the markup has changed for some images.

Since WP4.4 it appears that responsive images have been implemented. The markup for an image now looked like…

<img class="alignright size-medium wp-image-8931" src="http://m1dst.blob.core.windows.net/blog-media/2014/09/lipo-dist-clean-angled-300x300.jpg" sizes="(max-width: 300px) 100vw, 300px" srcset="https://m1dst.blob.core.windows.net/blog-media/2014/09/lipo-dist-clean-angled-150x150.jpg 150w, https://m1dst.blob.core.windows.net/blog-media/2014/09/lipo-dist-clean-angled-300x300.jpg 300w, https://m1dst.blob.core.windows.net/blog-media/2014/09/lipo-dist-clean-angled-1024x1024.jpg 1024w, https://m1dst.blob.core.windows.net/blog-media/2014/09/lipo-dist-clean-angled-144x144.jpg 144w, https://m1dst.blob.core.windows.net/blog-media/2014/09/lipo-dist-clean-angled-480x480.jpg 480w, https://m1dst.blob.core.windows.net/blog-media/2014/09/lipo-dist-clean-angled-900x900.jpg 900w, https://m1dst.blob.core.windows.net/blog-media/2014/09/lipo-dist-clean-angled-924x924.jpg 924w" alt="lipo-dist-clean-angled" width="300" height="300" />

The code above is the fixed markup not the code that was failing. Having looked in Developer Tools I noticed I was getting a 404 on an image load. Looking at where the image was coming from showed it wasn’t from Azure. This meant that the Azure Storage plugin didn’t yet know about the new SRCSET property. Some searching online found a number of people experiencing the issue and various fixes. http://projectnami.org/fix-for-azure-storage-plugin-and-wp-4-4/ is the blog post that helped me fix my problem.

Hopefully Microsoft will release an official plugin update soon.  UPDATE: The plugin has been updated and this fix is no longer required.

Further Reading