CODEWITHSUNDEEP
phphtmlgoogle-drive-api
mando222
mando222

Reputation: 543

How to embed Google Drive images into a webpage?

I have a website that I am designing and I want to use a folder in a google drive to store the images. The issue is that I can't seem to find how to get the URL for these images. The actual use of this needs to be that anyone with permissions for the google folder can drop in an image and it will show up when you load the page.

I have the php looping figured out and I am just short the path for the <img src="" >.

At the moment even just getting one image statically from google drive would be a start.

Upvotes: 3

Views: 17949

Answers (2)

AL.
AL.

Reputation: 37768

If I understand what you are aiming for, it's pretty much hosting the images from the Google Drive. Looked around the community and found some stuff that I think is what you're looking for or at the very least, can help you have an idea on how to do it.

First, is from this answer. You just have to use this URL format:

https://drive.google.com/uc?export=view&id=<fileId>

-- providing the file ID. There is a note though, Note: this link seems to be subject to quotas. So not ideal for public/massive sharing. But this proves that you can retrieve the files (in your case, images) from the file drive.

Second, is the top answer from the same post as above. Simply states that it is very much possible, provided that you put the files in a public folder, then retrieve it using the following URL:

https://googledrive.com/host/<folderID>/<filename>

Lastly, is to follow the tutorial video. It's similar to the second answer where the image should also be shared publicly (haven't really tried to tweak around, try it out maybe it can also work if it's only shared selected users), get the shared link and use gdurl.com which will turn the shared link and turn it into a hosted link which will be a direct link to the image.

Upvotes: 10

rama-void
rama-void

Reputation: 83

Here is a simple example:

Problem: The image url that you get from sharing a google drive image will be something like this

Simple Solution:

(**a) https://drive.google.com/file/d/{this part will contain the image ID that we need}/view?usp=sharing

But to use image we need url something like this

(**b) https://drive.google.com/uc?id={this part will contain the image ID that we need}

So the simple thing we can do is manually copying that part of the image ID from (**a) url and pasting in the (**b) url.

Automating using JavaScript:

  let sharableLink = (**a); //paste the google drive image sharing link here
  let baseUrl = "https://drive.google.com/uc?id=";
  let imageId = sharableLink.substr(32, 33); //this will extract the image ID from the shared image link
  let url = baseUrl.concat(imageId); //this will put the extracted image id to end of base Url

Here 32 and 33 are the starting and ending position of the image ID to be extracted from the shared image link.

AddOn:

You can create a simple HTML to get the converted image Url from the sharable link.

HTML: sample.html

<!DOCTYPE html>
<html>
  <head>
    <body>
       </div>
      <!-- container for url and button to load it -->
      <div class="thumbnail-container">
        <input 
          type="text" 
          id="edt-thumbnail-url" 
          name="thumbnail-url"
          placeholder="Thumbnail Url">
        <div>
          <button class="btn btn-load-thumbnail" id="btn-load-thumbnail">Upload Thumbnail</button>
        </div>    
      </div> 
      <!-- script that runs the code for conversion -->
      <script src="/sample.js"></script>
    </body>
    <head>
</html>

now create a javascript file and paste this

sample.js

const productThumbnailUrl = document.getElementById("edt-thumbnail-url");
const btnUploadThumbnail = document.getElementById("btn-load-thumbnail");

btnUploadThumbnail.addEventListener("click", (e) => {
  e.preventDefault();
  let str = productThumbnailUrl.value;
  let baseUrl = "https://drive.google.com/uc?id=";
  let imageId = str.substr(32, 33);
  let url = baseUrl.concat(imageId);
  productThumbnailUrl.value = url; //this will put the converted url in the edit text box 
  console.log(url);
});

Upvotes: 0

Related Questions