CODEWITHSUNDEEP
htmlgoogle-drive-apimodx
Benjamin Morrison
Benjamin Morrison

Reputation: 791

Display Images from Google Drive folder

I am trying to find an example on how to use JS on a webpage to call a list of renderable image links from a specific Google Drive folder. This is for the creation of a slideshow for digital signage on a Raspberry Pi via Modx and the ModMore Digital Signage plugin.

Upvotes: 0

Views: 3044

Answers (3)

Shabbah Atha
Shabbah Atha

Reputation: 1

if use tag use this thumbnail url, u can adjust width and height like this:

https://drive.google.com/thumbnail?id={fileId}&sz=w{width}-h{height}

example:

<img src="https://drive.google.com/thumbnail?id={fileId}&sz=w500-h500">

Upvotes: 0

Ahmed Bilal
Ahmed Bilal

Reputation: 1

Directly viewing it in the browser could be beneficial for you all; it certainly proved helpful for me. place it in html image tag 

<img src= "https://lh3.googleusercontent.com/d/{img-google-id}">

Upvotes: 0

Wartile
Wartile

Reputation: 33

By render-able image links, I assume you mean images that just render in as opposed to just an image link. (kind of got confused a bit by the wording)

If you want to grab an image from google drive and display it on your site, there is a method you have to undergo to do so.

METHOD What you want to do is find the image in your google drive and right-click it and press the, 'Share' button and once you've accessed that menu, open up 'Advanced', which should be in the bottom right corner of the pop-up. From here you should see a share link similar to the one listed below.

https://drive.google.com/file/d/<LONG-ID>/view?usp=sharing

Also on this pop-up, make sure to ensure that the Private image sharing is changed to, 'On - Anyone with the link'. Press 'Done' on that menu.

Next what you need to do is copy the following link:

https://drive.google.com/uc?id=

Then you need to copy the from the original link and paste it after 'id=' in the one listed above.

It should look something like this:

https://drive.google.com/uc?id=<LONG-ID>

And that's pretty much it to my knowledge. I've used this a couple of years back when I was creating a JS banner for a web-page and it worked fine but you have to keep in mind that it does not produce a .jpg or .png link, even so it will work in most cases. I don't think google will have changed their system too much, but if they have, give me a notification and I'll try to see if there's a more recent solution.

I would strongly recommend just downloading and embedding the images into the web-page or using a service such as Imgur as the execution and process is so much simpler.

Have a nice day!

Upvotes: 1

Related Questions