How to use Google Drive as a CDN
Don’t worry, its really not hard to use Google Drive as a CDN. You see I have broken it down to 16 steps but in truth its only half a dozen. I broke it into such small bites just to make it perfectly clear and transparent. It will only take a couple of minutes in realtime. You only have to do it once. There after you just add whatever you need to this one folder. So let’s get started
Google Drive as a CDN
- Login into your Google account. If you use the google chrome browser you may already be logged in.
- Now access Google drive.
- At the top left of the window you will see a “+New” button. Create a new folder.
- Once created, right click on it, from the list of options select Share.
- A Dialog Box will appear. Click on Advanced.
- (Another Dialog Box Will Appear).
- Click on Change in front of Private – Only you can access.
- (Another Dialog Box Will Appear).
- Select First Option On-Public on the web and hit Save Button.
- Now your new folder is effectively a CDN folder and it can accessible without login.
- Upload your files to your new “CDN” folder.
- To use or share files out of google drive you need File ID or shareable link of each file.
- Go to each required selected file (inside the folder)and click on Share (a Dialog Box will Appear).
- Here you can see File ID & sharing link.
- Just Copy That and Use it Wherever you want.
Now I have the shareable file link, how do I use it?
Show images on your website from google drive.
Here is the full shareable link for an image (google drive icon) I have in Drive.
https://drive.google.com/file/d/13g8OJmkTStwJ-oU-0VB-0yvL2BebVE1Z/view?usp=sharing
Currently if i used it this way it would just open in a browser window to view.
We will only keep the FILE ID (in blue) from the original shareable link, not whole link.
I want it to appear in my website as an image in a post or page,
So I have to change the link.
First you have to remember when you add media to a post or page, WordPress takes you to your Media Gallery to select an image to display. WordPress then inserts a link in the post or page to the Image stored in your media gallery. You visually see the image in the post but its not really or physically IN the post.
We are going to do the same but replace the link with one to an external location. (Google Drive)
It needs to look like this.
(you can use the following code as a template just replacing the asterisks with your file name)
<img src=“https://drive.google.com/uc?export=view&id=13g8OJmkTStwJ-oU-0VB-0yvL2BebVE1Z“alt=image from google drive> |
<img src=……”alt=…> |
is the code in wordpress to identify the image source. the <and the> at the start and finish are the opening and closing indicators for the complete action action. Everything including the following address, the file name and the action will fall between these. |
“https://drive.google.com/uc?export=view | is the address at Google Drive to export and view. The opening double quotation marks is important – defines that everything following is part of the address |
&id= | identifies which file. The = sign precedes the file name |
**** asterisks | replace with the file name. In this case 13g8OJmkTStwJ-oU-0VB-0yvL2BebVE1Z |
alt=image from google drive> | Tells browsers the text after the = sign is the name for the image. So in this case I would replace only the text “image from google drive“ with google drive icon |
Write the post or page. Switch from Visual to the Text tab in your editor. Locate the insertion point where you want the image. Paste the link. Save your work as a draft then use the preview screen to check the image displays.
As you see, here is my image.
Now you have Google Drive as a CDN…….
There are Plugins that can connect Google Drive to your WordPress in a slightly different way. Some make a link to Drive that allows you to navigate drive for media the same way you navigate your WordPress Media library.
But for many that may be overkill. If you just want to leverage Google Drive as a pseudo CDN, for media files to gain a bit more load speed.
Thanks for reading, I hope you found something of benefit.
August 20, 2019
[…] One way is outlined in the upcoming post Use Google Drive as a CDN […]