Use Google Drive To Store Website Images For WordPress
Blogs of today must have medias like Images and videos. They make the content more engaging and keeps readers on your page longer. However, images and videos take up a lot of storage space. They also make your pages load slower if not optimized. Thankfully, if you use WordPress, you can now utilize Google Drive as your WordPress Media Storage.
Why would you want to use Google Drive to store website images and videos?
Yes, you can just use the default WordPress Media Library to store your images and videos. However doing so puts a certain amount of load on your server. If your media files are not optimized, then it will impact your blog’s performance.
By offloading your media files into third party storage locations off your server, you remove the load from your server. As such, you gain the following couple of benefits:
1. Less Webhosting Storage Requirements
Your server’s storage space is limited – either by size or by total number of files. This is true, even if your webhosting provider says you are on an unlimited hosting plan.
Google Drive gives you free storage for your images and videos. Yes, it’s free for images that are less than 2048 x 2048 in resolution and videos that are less than 15 minutes.
So, by using Google Drive, you can go for webhosting plans with smaller storage requirements.
2. Less Webhosting Bandwidth Requirement
Loading images and videos eats up your webhosting bandwidth. This is made even worse if other sites are also hot linking to your images and videos. Bandwidth is a commodity on the Internet.
By using Google Drive to store your media, you avoid this bandwidth limit issue. As of this writing, I have not been able to find any official documentation from Google about bandwidth limits on Google Drive.
How to Use Google Drive as WordPress Media Storage?
I’ve used Google Drive to store images for a number of my WordPress sites for a while now. In the early days, the steps I needed to take to use Google Drive for web images are as follows:
- Upload image to a publicly shared Google Drive Folder.
- Copy public link of image from Google Drive
- Insert link into WordPress post.
Yes, the procedure is not complicated. I needed at least two browser windows to achieve the above.
However, today, we can do all the above from within WordPress Admin backend. As a matter of fact, it’s now integrated into the WordPress Media Library.
How? Using the wonderful Google Drive WP Media plugin.
The Google Drive WP Media WordPress Plugin
I am totally loving this plugin created by Moch Amir.
Google Drive on WordPress Media Publishing. Direct access to your Google Drive, allows you to manage your files remotely from your WordPress blog. Upload and share your files directly from your WordPress blog to Google Drive.
Installation of the plugin is pretty much similar to how you would install any other WordPress plugins. Thus, I will not cover the installation steps in here.
Let’s just dive in directly to how to configure the plugin to work for your WordPress site, shall we?
Step 1 – Configure Google Drive API Settings
In order for the plugin to work, we need to provide it with a few Google Drive settings. Click over to WP Admin > Media > Google Drive WP Media and you should see the following image.
The data for this section comes from the Google API website. No worries. I’ll step you through it step by step.
Now, head on over to Google Developers Console at https://console.developers.google.com.
Your screen may not look exactly like above since you probably have never created a Google Developer Project before. Just click on the “Create Project” button. You will be prompted with a popup whereyou can enter a name for your project.
Give your project a name. The way I do it is by using the website’s name. You can then easily monitor the stats for your sites. You can probably just use one single project for all your sites. However, should something bad (I have no idea what can happen) happen to your project, all your sites are affected.
Once your project is created, you will need to enable the Drive API for your project.
On the Menu Bar at the right, handside, click on APIs & auth > APIs. Scroll until you can find Drive API and turn it on.
Next, you need to create a credential to be used by the Google Drive WP Media plugin.
Make sure that you click on the “Service Account” option when creating your Client ID.
You will then be presented with your private key file which you should download into your local hard drive.
Remember the location of the drive and folder where you’ve downloaded this file into. You’ll need to upload it into Google Drive in the next few steps.
If you’ve got multiple sites like I do, create a special folder in your local disk. Something like “GoogleAPIProjectPrivateKeys”. Save your private keys in this folder.
You now have the credential details as needed by the Google Drive WP Media plugin.
Open up notepad and copy paste “Client ID” and “Email Address” settings as presented. You can now close the Google Developer browse tab.
Remember that Private Key file you downloaded earlier? Now, you are going to upload it into a shared folder in Google Drive.
Open up Google Drive in your Browser. In Google Drive, you will be creating a folder to upload the private key file. The folder will be shared to the public so that the Google Drive WP Media plugin is able to access the key file.
Note: I am using the old version of Google Drive web interface in my screen captures. So, if your Google Drive interface looks different, that means you are using the new version. You can switch back to the older version temporarily.
You can always revert back to the new version as and when you wish. At the moment, there are a few feature sets that is not available yet in the new version. That is why I still use the older version.
Ok, so, if you have switched back to the older version of Google Drive, then we can continue with our guide. Lets create a folder in Google Drive.
I named the folder “Google Code Keys”. This is the folder where all my Google Developer keys are uploaded into. You can name your folders according to your preferences.
Once you’ve created the folder, you will have to share the folder with a “Public on the web” setting. The following set of images will guide you in achieving this.
Your folder is now available for viewing over the web. You can now upload your private key file into this folder.
You can upload files into Google Drive by drag and drop. Just drag and drop the private key file into the Google Drive folder area and it will be uploaded. Otherwise, you can also click on the “Upload” button and select the files to be uploaded.
The selected file will be “Uploaded and shared” according to the folder’s access permissions. When the file has been uploaded, you need to obtain the public internet path to the file. The Google Drive WP Media plugin needs this to access your key to Google Drive.
The public Internet path to the folder can be seen in the folder’s Details and Activity slide out.
When the Details and Activity slides out, click on the link you see under the Hosting label. That link will open up a new tab containing the contents of the folder.
Right Click on the file name and copy the link to the file. Paste it into the notepad that contains the other details on Google API you’ve copied earlier.
You now have all the details required to configure Google Drive WP Media plugin. It is now time to enter these details into the plugin itself.
Open up the Google Drive WP Media configuration page from Media > Google Drive WP Media in the WordPress Admin backend. Copy paste the field entries as follows:
- Google eMail: Your Google account email address
- Client ID: CLIENT ID data you copied into Notepad
- Service Account Name: EMAIL ADDRESS data you copied into Notepad
- Private Key URL path: The URL you copied into Notepad
Don’t forget to click the “Save” button.
Step 2 – Create WPMedia folder in Google Drive for use by plugin.
If all the settings are correct, you are now ready to use the Google Drive WP Media plugin. The first thing to do is to create a folder for your WP Media storage in Google Drive.
This folder will be created in your Google Drive account. Give the folder a name like “YourDomain WPMedia”. This allows you to identify the website this folder belongs to in your Google Drive (if you have multiple websites accessing the same Google Drive account).
Over at Google Drive, the folder just created will appear under the “Shared with me“.
All media files you upload using the Google Drive WP Media plugin will be saved into this folder.
You can organize your media files in different folders if you prefer. Just create more folders using the Google Drive WP Media plugin and select which folder to use when uploading files.
You are now all set and ready to use Google Drive as the Media Storage for your WordPress media.
To upload files, just:
- Click over to Media > Google Drive WP Media > Upload
- Browse for the files you want to upload
- Give the file a Description like “Kitty Air Dunk” (as in the image above)
- Select the “Add to Media Library“
- Click “Upload to Google Drive“
The file will be uploaded into Google Drive and also appear in your WordPress Media Library.
You can also access the Upload screen while editing a post. Just click on the “Add Media” button in your Post Editor.
You can set Google Drive as your default Media Location. By doing so, all your media uploads will automatically be saved into Google Drive.
With this setting turned on, you can upload files using WP Media as usual. You don’t need to use the Google Drive WP Media tool. All uploads automagically gets saved into the Google Drive folder you’ve specified in the configuration setting.
Note that this setting is currently still experimental. It works, however, it is displaying an error message. So, if you are not comfortable using an experimental feature, do not turn this on. Just use the other two methods of uploading media files into Google Drive.
No Thumbnails Generation In Google Drive WP Media
When you upload images using default WordPress’ Media Library, image thumbnails are generated automatically. WordPress creates about three thumbnail versions of your image file that you can use when displaying the image using WordPress Media Library. This is not the case when using Google Drive WP Media plugin.
The plugin does not create thumbnails of your images. As a result, you only have 1 size of the image to use in your content – the original size.
If you plan on using thumbnails in your posts that loads up larger versions of your image when clicked, it’s best to manually generate the images in their respective sizes and upload them both.
Otherwise, just upload and display the full size of the image. Which is what I am doing in this post. no thumbnail version of images. Only the full size images are used.
