So for my class I have downloaded, and uploaded documentaries to gdrive I need to analyse. Though when I embed these google drive videos in notion.so (notion doesn't allow html type embeds, and only supports links without styling) the thumbnail will just be a random frame in the video. Is there any google apps script that can change the thumbnail to an image stored on my drive?
I am aware of this, but it is of no luck to me. (I do know that it is not a google as)
Thanks in advance!
In short,
No. At this moment in time the google drive api does not allow changing thumbnails of files, in which google drive provides its own thumbnail.
"If Drive can generate a thumbnail from the file, then it will use the generated one and ignore any you may have uploaded. If it can't generate a thumbnail, it will always use yours if you provided one." - Google Drive for Developers
Can I use images stored in Google Drive to be used in a website by the html,<img src="<webContentLink>" /> ?
Where <webContentLink> is returned after a file is uploaded and is in the format, 'https://drive.google.com/uc?id=<FILEID>&export=download'
I have a small website created for account users only. They can upload files to their google drive folder and this folder has permissions set to share with the accounts of the other users (specific people only). This is an ASP.NET MVC 5 website using the Google API Client Libraries for .NET.
In Chrome and Firefox the images display fine, in IE and Safari they don't show and return a 302 status code. Sometimes if you view the image directly in a new tab and then refresh the web page it shows. It might also show if the folder permission is set to 'anyone with the link', but this isn't ideal.
The documentation (https://developers.google.com/drive/v3/web/manage-downloads) says, 'If you want to allow a user to view a file directly in a web browser instead of through the API, use the webContentLink.' I understood this to be okay to use img src='' to display an image directly without the API, however it then goes on to say, 'You can either redirect a user to this URL, or offer it as a clickable link'.
So can Google please confirm if 'webContentLink' can be used in img src='', or not and why it works in some browsers and not others? I've read many posts on this, some old, some more recent. If it's not to be used in img src I think it should be made clear in the documentation.
Many thanks
Yes, you can definitely use webContentLink as your img src in your HTML page. I tried and this is what I got on my sample HTML page.
<img src = "https://drive.google.com/uc?id=0Bzgk4zncCwI7aDZCSHY4YU0zNUF&export=download">
webContentLink can be obtained using Files.list and place 'files' in the fields parameter.
Displaying an image from Google Drive can be done in 3 steps:
Retrieving your image ID
Right click on your image and select Share.
You'll see a link that you need to copy. You will extract the image's ID from the URL.
Here is what your sharing link should look like:
https://drive.google.com/open?id=YourFileId
Check your sharing settings
Your images will only be visible to people who have access to those files. To allow anyone access to your images, you need to set the sharing setting as Visible with the link.
Display your image
With your sharing settings properly configured and your image file IDs at hand, you can now specify how your images will be displayed using a prescribed format.
https://drive.google.com/thumbnail?id=YourFileID
More details can be found here
when I do this I just get a sign like an nonexistent image.
Why?
I just copy paste this line:
<img src = "https://drive.google.com/uc?id=0Bzgk4zncCwI7aDZCSHY4YU0zNUF&export=download">
JS Fiddle
How to access my google drive images from app script html file so that i can use those images in my img tags something like src= "https/googledrive/folderID/imagename.png"
I have not able to find any relevant answer.Please help!
you cant. ok you can but only for a few more months as google has deprecated "google drive hosting" (google that if you still want to use it)
instead you can use another free google hosting like a google site. put images in a file cabinet page and make the page public. like this image:
https://sites.google.com/a/plusfortrello.com/images/img/bubble-sprite.png which is the cabinet site plus plus the image name appended.
sites images have disadvantages like lack of caching and slow GET. you can greatly speed it up using a (paid) Google Cloud Storage bucket mentioned in this blog post of mine: http://zigmandel.blogspot.com/2015/09/how-i-crowd-translated-my-product-tour.html
A client of mine has uploaded some photos to their Google Drive and would like me to display their photos on their company website. I reviewed the documentation for displaying Google Drive content on a web page, but it appears that this is simply the instructions for displaying the contents on a web page, which it already does.
My question is, how do I display the contents directly on the client's web page?
Example of Embedding a Google Drive Image
Original URL: https://drive.google.com/file/d/0B6wwyazyzml-OGQ3VUo0Z2thdmc/view
You need to copy the ID from the original URL (the characters between the /d/ and /view), and use it in this URL:
https://drive.google.com/uc?export=view&id=0B6wwyazyzml-OGQ3VUo0Z2thdmc
The image below is embedded using this method:
Photo by Paula Borowska
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Drive</title>
</head>
<body>
<img src="https://drive.google.com/uc?export=view&id=0B6wwyazyzml-OGQ3VUo0Z2thdmc">
<br>
<a href="https://drive.google.com/uc?export=download&id=0B6wwyazyzml-OGQ3VUo0Z2thdmc" download>
Download
</a>
</body>
</html>
Thank You https://codepen.io/jackplug/pen/OPmMJB
Use the 'Get Link' option in Google Drive to get the URL.
Use <img> tag in HTML and paste the link in there.
Change Open? in the URL to uc?.
I have found a way to do it without using external sites.
<img src="https://drive.google.com/uc?export=view&id=XXX">
https://gist.github.com/evansims/f23e2f49e3d4be793038
<a href="https://drive.google.com/uc?export=view&id=XXX">
<img src="https://drive.google.com/uc?export=view&id=XXX"
style="width: 500px; max-width: 100%; height: auto"
title="Click for the larger version." />
</a>
You'll need to grab the ID of the image: Click on “Open in new window” and get the ID from the URL.
If you have some image files, just upload them to a public folder on your Google Drive, copy its folder ID from the address bar (e.g. 0B0Gi4v5omoZUVXhCT2kta1l0ZG8) and paste it into a form at GDrives to choose your own alias (e.g. myimgs) - and voila! You can access the images one by one using e.g. http://gdriv.es/myimgs/myimage.jpg.
If you want to embed a whole folder on your website (in a frame), you can use one of the following URLs, replacing [folderID] with your own ID:
http://gdriv.es/myimgs/
https://docs.google.com/folder/d/[folderID]/preview?rm=minimal
https://drive.google.com/folderview?id=[folderID]
If you prefer to get the file list in XML or JSON, you can use YQL.
Note: You can use Google + Photos to host and embed your images as well.
I have the same problem right now but this article helps me. Updates for the year 2020!
I got the solution from this article:
https://dev.to/imamcu07/embed-or-display-image-to-html-page-from-google-drive-3ign
These are the steps from the article:
Upload your image to google drive.
Share your image from the sharing option.
Copy your sharing link (Sample: https://drive.google.com/file/d/14hz3ySPn-zBd4Tu3NtY1F05LSGdFfWvp/view?usp=sharing)
Copy the id from your link, in the above link, the id is: 14hz3ySPn-zBd4Tu3NtY1F05LSGdFfWvp
Have a look at the below link and replace the ID.
https://drive.google.com/thumbnail?id=1jNWSPr_BOSbm7iIJQTTbl7lXX06NH9_r
After Replace ID: https://drive.google.com/thumbnail?id=14hz3ySPn-zBd4Tu3NtY1F05LSGdFfWvp
Now insert the link to your <img> tag.
And now it should work.
Update 18/02/2017
Google had depreciated free hosting feature on Google drive and now you cannot host your static website on Google drive for free.
But if you want to host your JavaScript and CSS and Images file on Google drive then you can still do so. You just need to obtain the permalink of the file. following updated tutorial (2017).
http://www.bloggerseolab.com/2017/02/host-images-javascript-and-css-on-google-drive.html
From google drive help pages:
To host a webpage with Drive:
Open Drive at drive.google.com and select a file.
Click the Share button at the top of the page.
Click Advanced in the bottom right corner of the sharing box.
Click Change....
Choose On - Public on the web and click Save.
Before closing the sharing box, copy the document ID from the URL in the field below "Link to share". The document ID is a string of
uppercase and lowercase letters and numbers between slashes in the
URL.
Share the URL that looks like "www.googledrive.com/host/[doc id] where [doc id] is replaced by the document ID you copied in step 6.
Anyone can now view your webpage.
If you want to see your image in a website embed the link to pic in your html as usually:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example image from Google Drive</title>
</head>
<body>
<h1>Example image from Google Drive</h1>
<img src="https://www.googledrive.com/host/[doc id]" alt="whatever">
</body>
</html>
Note:
Beginning August 31st, 2015, web hosting in Google Drive for users and developers will be deprecated. You can continue to use this feature for a period of one year until August 31st, 2016, when we will discontinue serving content via googledrive.com/host/[doc id]. More info
Extension of the above-mentioned answer. I wrote a UNIX command so I can easily do it in my workflow.
Copy the Google Drive photos URL which needs to be converted. E.g.
Copy Google Drive Image URL
https://drive.google.com/file/d/XXXX/view?usp=sharing
Open the terminal and execute this command.
Command:
echo https://drive.google.com/uc\?export\=view\&id\=`echo $(pbpaste) | cut -d '/' -f 6`
Output:
https://drive.google.com/uc?export=view&id=XXXX
P.S. If you copy the command from here. Make sure to copy the Google Drive image URL again. :P
No need to change anything in the Step 2 command as it takes from Clipboard.
Make sure it is copied in right format
E.g.
https://drive.google.com/file/d/XXXX/view?usp=sharing
if you want to embedded Google drive images in your blogger or any sites then just follow the instructions : -
Blogger
upload the image on google drive
click on image and share with public
<img src='https://drive.google.com/uc?export=view&id=1OCx6mUEMbWcwCQbDePA5PeeOh'/>
This method allows you to embed the image at whatever size or resolution you need:
Create a folder in your Google Drive
Make the folder (or image itself) public via the "Share" button
Copy the URL and extract the ID. It should look like
https://drive.google.com/file/d/ID-HERE/view?usp=sharing
Use something like this as your image src:
https://drive.google.com/thumbnail?id=${imageId}&sz=w${width || 200}-h${height || 200}
Example:
https://drive.google.com/thumbnail?id=ID-HERE&sz=w200-h200
You can modify the numbers after w and h to get whatever size you need. The image will be shrunk to fit inside those dimensions.
List View
<iframe src="https://drive.google.com/embeddedfolderview?id=YOURID#list" width="700" height="500" frameborder="0"></iframe>
Grid View
<iframe src="https://drive.google.com/embeddedfolderview?id=YOURID#grid" width="700" height="500" frameborder="0"></iframe>
Read More at:
https://thomas.vanhoutte.be/miniblog/embed-add-google-drive-folder-file-website/
Google Drive Hosting is now deprecated. It stopped working from August 31, 2016.
hosting on Google Drive - deprecation schedule
I have removed the explanation of how to previously host an image on Google Drive.
<img src="https://drive.google.com/uc?export=view&id=Your_Image_ID" alt="">
I use on my wordpress site as storing image files on local host takes up to much space and slows down my site
I use textmate as it is easy to edit multiple URLs at same time using the 'alt/option' button
Based in different answers I created a tool to help creating the HTML Embed Code or the direct link.
Steps 1: Copy the Google Drive Url.
https://drive.google.com/file/d/18RX_EwpYdZsKU0QobLvNidmhvqJPEhrH/view?usp=sharing
Step 2: Pase the URL in the tool (check screenshot) and click generate link, the result will be like this:
<img src="https://drive.google.com/uc?export=view&id=18RX_EwpYdZsKU0QobLvNidmhvqJPEhrH" width="100%"/>
How to use the tool -> Read the instructions
Link to the tool here -> Embed Google Drive Images
Upload the image at a specic folder at dgrive
Make this image as view foe who is having the link
copy the link, something like: https://drive.google.com/file/d/IMAGE_ID/edit
Take the ide from the link
Use the id with th ebelow link: drive.google.com/uc?export=view&id=IMAGE_ID
This reference if very helpful for fixing html5 images at outlook:
https://www.emailonacid.com/blog/article/email-development/how-to-code-emails-for-outlook-2016/#images
I don't know of a better way but you can datamine the page with php. For instance if you go to google and share a folder then go to that folder it will look something like
https://drive.google.com/folderview?id=0B8TT0olkjsdkfji9jekbFF4LWc&usp=sharing
^^^ not a real link
What you are looking for is the individual images inside the source code of this page
then using php get the source code with
<? $f = fopen ("http://www.example.com/f", r);
echo $f;
?>
now $f has the source and you can use other php commands to seperate only the URLS with the images you want. It will take a bit of work but highly doable.
once you have these image links showing the way you want just build them into a div or table structure to display on a gallery maybe even add a greybox element for effect
A couple interesting alternatives to publicly hosting an image on Drive (deprecated):
1. Google Photos
If you upload an image to Google Photos instead of Drive it gets a public web link.
This behavior is a little surprising to me, but the link is very long and random, so they are apparently practicing "privacy by obscurity."
2. Google Drawing
If you create an image using the "Google Drawing" program (built into Drive) you can press File > Publish to Web to get a public link.
Note: This could be a solution if you're trying to share an existing image-- paste the image into the editor and crop the canvas to your image (file > Page Setup)-- but it's a little cumbersome. If you need to do some basic image editing, though, or if you're trying create a simple icon/graphic, I think this is nifty.
As this Spanish blog explains and provides a link convertor.
Upload your image in your google drive.
Share it with anyone on the web.
Copy the sharing link.
Then you can use the converter that ClasicWebTools provides to use it on your web.
<p><iframe frameborder="0" height="1000px" src="https://drive.google.com/[folder address]/embeddedfolderview?id=[folder id]#grid" width="100%"></iframe></p>
you could easily get the folder id, just right mouse click on the folder, copy the share link and paste some text/Html file there you get the folder id
Example of Embed a Google Drive
<p><iframe frameborder="0" height="1000px" src="https://drive.google.com/a/esn.ac.lk/embeddedfolderview?id=19FWi2HI98Gim6VjZfHT391EBClO8Jxco#grid" width="100%"></iframe></p>
If the file is in a public folder, you can use Google Drive website hosting.
i supposed you uploaded your photo in your drive all what you need to do is while you are opening your google drive just open your dev tools in chrome and head to your img tag and copy the link beside the src attribute and use it
As title, I uploaded html file, it contained embedded image encoded by base64. I can correctly see all contents with safari web browser.
I want to convert this html file to Google Document, so I turned on "convert" flag to "YES", in GTLQueryDrive instance.
It seems that conversion is success, but when I try to open converted file, this is just progress control instead of image what should be there. I waited several minutes, but that progress control is never ended.
Also I manually try to convert html file to google document in google docs website using "Export to Google Document", but it didn't work.
Why google can't convert this file to their own format?
Following is html file what I uploaded:
<img src="data:image/jpg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4QBYRX....">
I think you're expecting too much from the API.
The API deals will upload a single blob of content. As an option (convert=yes) it will open that blob, parse it and convert it to a native Google Doc.
You seem to be expecting the server to realise that there is an embedded content tag, and the server should somehow reach down to the client, find it, and pull it up. That's never going to happen.
The steps you will need to go through are:-
1. Parse the HTML to find any embedded images
2. Upload each image to Drive and store the returned item
3. Grab the url from the item returned in (2)
4. Patch your HTML so the IMG SRC is that in (3)
5. Upload the HTML