Reputation: 10972

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?

Upvotes: 170

Answers (22)

Riccardo Volpe

Reputation: 1623

There are 4 alternative ways to access Google Drive images (until now, 2024.09.18), tested on CodePen. Here the url structure:

where YOUR_IMAGE_ID is the ID of your image shared publicly on Google Drive.

Upvotes: 3

Dinesh

Reputation: 1128

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

If you copy the command from here. Make sure to copy the Google Drive image URL again.

No need to change anything in the Step 2 command as it takes from clipboard. Make sure it is copied in right format. For example:

https://drive.google.com/file/d/XXXX/view?usp=sharing

Upvotes: 11

Karlo

Reputation: 282

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 this link and replace the ID: https://drive.google.com/thumbnail?id=1jNWSPr_BOSbm7iIJQTTbl7lXX06NH9_r

After the ID is replaced: https://drive.google.com/thumbnail?id=14hz3ySPn-zBd4Tu3NtY1F05LSGdFfWvp
Now insert the link to your <img> tag.

Upvotes: 18

Francisco Lozada

Reputation: 21

As this Spanish blog explains and provides a link convertor.

Upload your image to 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.

Upvotes: 0

Yayo Arellano

Reputation: 3866

Based in different answers I created a tool to help creating the HTML Embed Code or the direct link.

Copy the Google drive URL.

https://drive.google.com/file/d/18RX_EwpYdZsKU0QobLvNidmhvqJPEhrH/view?usp=sharing

Pass the URL to this tool (check screenshot) and click generate link, the result will be like this:

<a href="https://drive.google.com/uc?export=view&id=18RX_EwpYdZsKU0QobLvNidmhvqJPEhrH"> <img src="https://drive.google.com/uc?export=view&id=18RX_EwpYdZsKU0QobLvNidmhvqJPEhrH" width="100%"/></a>

How to use the tool: https://yayocode.com/post/DUt9Wf5e48AUEqzWSiyX
Link to the tool here: https://embed.yayocode.com/

Upvotes: 4

Aathi

Reputation: 3224

Example of Embedding a Google Drive Image

Original URL:

https://lh3.googleusercontent.com/d/0B6wwyazyzml-OGQ3VUo0Z2thdmc=w1000?authuser=1/view

Get the Id from the url(followed by the /d/)

https://drive.google.com/thumbnail?id=0B6wwyazyzml-OGQ3VUo0Z2thdmc&sz=w1000

The image below is embedded using this method:

HTML tag as used above:

<img src="https://drive.google.com/thumbnail?id=0B6wwyazyzml-OGQ3VUo0Z2thdmc&sz=w1000">

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/thumbnail?id=0B6wwyazyzml-OGQ3VUo0Z2thdmc&sz=w1000" alt="Page Image">
    <br>
</body>
</html>

Updated on: Jan/2024

Upvotes: 226

niutech

Reputation: 29922

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:

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.

Upvotes: 20

Hasan A Yousef

Reputation: 24908

Upload the image at a specic folder at dgrive.
Make this image as view for who is having the link.

copy the link, something like:

https://drive.google.com/file/d/IMAGE_ID/edit

Take the image ID from the link.

Use the image ID with th below link:

drive.google.com/uc?export=view&id=IMAGE_ID

This reference is very helpful for fixing HTML5 images at outlook:

https://www.emailonacid.com/blog/article/email-development/how-to-code-emails-for-outlook-2016/#images

Upvotes: 2

henry

Reputation: 965

import urllib.parse 

def transform_google_drive_link(original_link):
    parsed_url = urllib.parse.urlparse(original_link)
    query_params = urllib.parse.parse_qs(parsed_url.query)
    
    # The file ID should be in the 'd' path component
    file_id = parsed_url.path.split('/')[-2]
    
    # Construct the new URL for embedding the image
    embeddable_url = f"https://drive.google.com/uc?export=view&id={file_id}"
    
    return embeddable_url

Upvotes: 0

Kuhan

Reputation: 583

<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>

Upvotes: 0

Maicon Gilton

Reputation: 681

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.

Upvotes: 11

saurav Sinha

Reputation: 448

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'/>

Upvotes: 8

Alan Wells

Reputation: 31300

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.

Upvotes: 5

Dustin Michels

Reputation: 3226

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.

Upvotes: 0

Ryan Herter

Reputation: 41

<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

Upvotes: 4

Quitiweb

Reputation: 1090

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.

Click on “Open in new window”

Upvotes: 76

Vishal Chopra

Reputation: 346

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

Upvotes: 11

Watchmaker

Reputation: 5308

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

Upvotes: 10

user3586571

Reputation: 57

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

Upvotes: 0