How do I display images from Google Drive on a website?
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?
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?.
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>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Google Drive</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<img src="https://drive.google.com/uc?export=view&id=0B6wwyazyzml-OGQ3VUo0Z2thdmc">
</body>
</html>Thank You https://codepen.io/jackplug/pen/OPmMJB
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.