Read all of the other posts in our series on Creating Azure (hosted) WordPress Websites without knowing php or MySql!
- This is a 3 Part excerpt from our soon-to-be-released book, “Build Secure WordPress Websites in Azure – without knowing PHP or MySql“.
- Part 1: Using Azure Blob Storage to Store and Deliver WordPress Media and Uploads: We outline the pros and cons of using either direct access to Azure Storage or installing the ‘Windows Azure Storage for WordPress’ plugin that accesses Blob Storage.
- Part 2: Setup Azure Blob Storage to work with WordPress: We show how to set up the Azure Blob Storage and access the images and uploads with hyperlinks generated by Microsoft Azure Storage Explorer
Now, we look at the second Azure Blob Storage option discussed – uploading and accessing images stored in Azure Storage using the Windows Azure Storage for WordPress plugin.
1. Using a Windows Azure account and an Azure subscription, create a Windows Azure Storage account and a Blob container with its Access Policy set to ‘Blob’, which is a public, read-only container. Read how to do that here, steps 1 and 2.
2. Download the Windows Azure Storage for WordPress plugin for WordPress.
3. From the WordPress website’s Admin Dashboard > Plugins > Add New > Upload Plugin > Choose File > Install Now
4. From the Azure Storage Account’s Settings > Access Keys blade, copy the Storage Account name and an access key to paste into the Plugin Settings:
5. From the WordPress website’s Admin Dashboard > Settings > Windows Azure for the plugin’s Settings page (settings used described in Steps 6-9 below)
6. Paste in the Azure Credentials collected in step 4 > Save Changes.
7. After the Save and connection to the Azure account, choose the Default Storage Container, created in Step 1, from the drop down, or choose the option ‘Create New Container’. (The Create New Container option quickly creates a new blob container in the Azure Storage Account with the proper access policy applied that will be used by the website now to upload files to)
8. Select ‘Use Windows Azure Storage when uploading via WordPress’ upload tab.
9. We like to also check ‘Keep local files after uploading them to Azure Storage’ to be able to view the files in Windows File Explorer too. > Save Changes again.
Now that the plugin is installed and configured, we’ll look at how it works with Azure Blob Storage to upload and access images and other media.
10. Upload Media Into Blob Storage and Insert in Post:
In the WordPress Edit screen > Add Media button > Insert Media > Upload Files tab > Drag files or Select Files:
The img1.png file was selected to upload. Note in the screen shot below that this installation of WordPress added 6 more resolution versions when uploading via WordPress’ upload! Also, note that the images URL is now pointing to Azure Blob Storage, not the https://alvar1res.blob.core.windows.net/amnblog// folder of the website.
Verify the upload to Azure Storage via Browse Azure Storage in left navigation. Note that there are 7 versions of the uploaded file, saved to a directory that WordPress created in Azure Storage named 2017/06/ :
While having multiple resolutions of the same image available may be helpful at times, to me, this is one of the major limitations of doing uploads via WordPress’ uploader. I only need the image I uploaded for use in the blog post – and now all these other versions have been automatically created by WordPress and the installed theme. WordPress added 3 copies and the theme added 3. I can dig into the theme’s settings and turn this off – in WordPress, but I’d need to install another plugin to do that for me, without a working knowledge of php or MySql!
This multiple version automatic upload of each image IS easily circumvented by using Microsoft Azure Storage Explorer (MASE). Read more about using MASE here. It’s fast and easy to upload folders or images into Azure Storage directly, in a file structure of your own design. Then just use the Browse Azure Storage feature to choose an image to insert. Or – even faster – use the Copy URL feature of MASE and just paste in the hyperlink to the post!
In the screenshot below, in MASE, we created the SAS folder filled with files(blobs), and WordPress auto-generated the 2017 folder during the previous step of uploading img1.png:
I prefer creating my own directory structure to store images and other upload files, rather than using the auto-generated WordPress year/month organization folders.
- It makes it easier to find images for reuse, deletion or archiving
- The date the images were uploaded may not be the date that the post/page is published
- If the website is moved, or pages reused elsewhere, filing by topic or title gives faster access to the files/blobs
11. Finally, verify that the images are being delivered by Azure Storage to the website front-end:
- On a website page in Chrome > R-Click on an image > Inspect > check the image address:
Part 1: Using Azure Blob Storage to Store and Deliver WordPress Media and Uploads
Part 2: Setup Azure Blob Storage to work with WordPress
Read all of the other posts in our series on Creating Azure (hosted) WordPress Websites without knowing php or MySql!