Hosting images on Google Drive

January 31, 2021
image

Making the permissions public of an image on Google Drive gives you a link https://drive.google.com/file/d/1sqnSpR_o1SKGGQeX8K6SnmYgI8ONfhMD, letting you share the file/image with anyone. But how to embed it in a blog for instance?

Explanations

From the link you get once you make your image "public" ("anyone with the link can view your image"), only retrieve the ID.

  1. https://drive.google.com/file/d/1sqnSpR_o1SKGGQeX8K6SnmYgI8ONfhMD/view?usp=sharing
  2. Remove the beginning https://drive.google.com/file/d/ and the end part /view?usp=sharing
  3. Here is your ID: 1sqnSpR_o1SKGGQeX8K6SnmYgI8ONfhMD
  4. https://drive.google.com/uc?id= + ID = https://drive.google.com/uc?id=1sqnSpR_o1SKGGQeX8K6SnmYgI8ONfhMD

This link will redirect you to another long url, but do not care about it. Just use the crafted link to embed or share the image without the Google layout around it.

Automation

Instead of copy-paste, and maybe do a mistake in the URL crafting process, browser bookmarks allow a javascript code instead of a URL. 

javascript:(async()=>{const url = await navigator.clipboard.readText();alert("https://drive.google.com/uc?id="+url.split("/")[5]);})()

Creating a bookmark in your favorite browser (firefox, chrome, ...) and using this code as a link will craft the URL from a link you copied.

  1. Copy or click on the "copy link" button from google drive to share your file.
  2. Click on the bookmark.
  3. You should see an alert with the new URL.

Thoughts

Google Drive is definitely not the best for this kind of purpose, and the method explained is pretty tricky. Instead, I would advise using a proper image sharing service. Dropbox lets you share an image with a link based on the image name. Pretty convenient!

However, the javascript as a bookmark is a really interesting small automation tool!

Back to Blog