How do I display images from Google Drive on a website

Question

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 in a web page  but it appears that this is simply the instructions for displaying the contents in a web page  which it already does   My question is  how do I display the contents directly on the client s web page   Thanks

User · Accepted Answer

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  then 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 ans embed your images as well

User · Answer

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

User · Answer

1 - Create a folder in your google drive  2 - Make this folder public  on share property  3 - use something like this as your image src  https   drive google com thumbnail id   imageId  amp sz w  width    200 -h  height    200

User · Answer

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  lt img src  https   drive google com uc export view amp amp id 1OCx6mUEMbWcwCQbDePA5PeeOh   gt

User · Answer

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  amp id   echo   pbpaste    cut -d     -f 6    Output    https   drive google com uc export view amp 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

User · Answer

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 amp 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   lt    f   fopen   http   www example com f   r   echo  f    gt    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

User · Answer

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

User · Answer

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

User · Answer

lt img src  https   drive google com uc export view amp id Your Image ID  alt    gt    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

User · Answer

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

User · Answer

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  lt img gt  tag   And now it should work

User · Answer

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    lt  DOCTYPE html gt   lt html gt       lt head gt           lt meta charset  utf-8  gt           lt title gt Example image from Google Drive lt  title gt       lt  head gt       lt body gt           lt h1 gt Example image from Google Drive lt  h1 gt            lt img src  https   www googledrive com host  doc id   alt  whatever  gt        lt  body gt   lt  html gt    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

User · Answer

I have found a way to do it without using external sites    lt img src  https   drive google com uc export view amp id XXX  gt    https   gist github com evansims f23e2f49e3d4be793038   lt a href  https   drive google com uc export view amp id XXX  gt       lt img src  https   drive google com uc export view amp id XXX      style  width  500px  max-width  100   height  auto      title  Click for the larger version     gt   lt  a gt    You ll need to grab the ID of the image  Click on    Open in new window    and get the ID from the URL

User · Answer

If the file is in a public folder  you can use Google Drive website hosting

User · Answer

List View   lt iframe src  https   drive google com embeddedfolderview id YOURID list      width  700  height  500  frameborder  0  gt  lt  iframe gt   Grid View   lt iframe src  https   drive google com embeddedfolderview id YOURID grid      width  700  height  500  frameborder  0  gt  lt  iframe gt   Read More at  https   thomas vanhoutte be miniblog embed-add-google-drive-folder-file-website

User · Answer

Use the  Get Link  option in Google Drive to get the URL   Use  lt img gt  tag in HTML and paste the link in there   Change Open  in the URL to uc

User · Answer

Example of Embedding a Google Drive Image  Original URL  https   drive google com file d 0B6wwyazyzml-OGQ3VUo0Z2thdmc view    Photo by Paula Borowska   x000D   x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   x000D   lt head gt  x000D       lt meta charset  utf-8    gt  x000D       lt meta http-equiv  X-UA-Compatible  content  IE edge  gt  x000D       lt title gt Google Drive lt  title gt  x000D       lt meta name  viewport  content  width device-width  initial-scale 1  gt  x000D   lt  head gt  x000D   x000D   lt body gt  x000D       lt img src  https   drive google com uc export view amp id 0B6wwyazyzml-OGQ3VUo0Z2thdmc  gt  x000D   lt  body gt  x000D   x000D   lt  html gt  x000D   x000D   x000D    Thank You https   codepen io jackplug pen OPmMJB

[google-drive-api] How do I display images from Google Drive on a website?

Examples related to google-drive-api