Google Drive

Return Google Image Search Results in HTML using PHP

I know how we can use the Google API to return image results in AJAX, but I want to be able to return images for a specific query and then output them in to HTML on my page. For example: http://ajax.googleapis.com/ajax/services/search/images?v=1.0&q=sausages Returns results with infomation and images about the top 10 results for the keyword sausages. How can I query this url to output the images and titles of the images on my page using PHP in HTML. I am using the following at the top of the function to return the title:

$json = get_url_contents('http://ajax.googleapis.com/ajax/services/search/images?v=1.0&q='.$tit.''); 

This returns a JSON string. Paste it here and you will see the result: chris.photobooks.com/json/default.htm Read about JSON.

4 Answers 4

function get_url_contents($url) < $crl = curl_init(); curl_setopt($crl, CURLOPT_USERAGENT, 'Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; .NET CLR 1.1.4322)'); curl_setopt($crl, CURLOPT_URL, $url); curl_setopt($crl, CURLOPT_RETURNTRANSFER, 1); curl_setopt($crl, CURLOPT_CONNECTTIMEOUT, 5); $ret = curl_exec($crl); curl_close($crl); return $ret; >$json = get_url_contents('http://ajax.googleapis.com/ajax/services/search/images?v=1.0&q=sausages'); $data = json_decode($json); foreach ($data->responseData->results as $result) < $results[] = array('url' =>$result->url, 'alt' => $result->title); > print_r($results); 

Array ( [0] => Array ( [url] => http://upload.wikimedia.org/wikipedia/commons/thumb/c/c4/Salchicha_oaxaque%25C3%25B1a.png/220px-Salchicha_oaxaque%25C3%25B1a.png [alt] => Sausage - Wikipedia, the free encyclopedia ) [1] => Array ( [url] => http://upload.wikimedia.org/wikipedia/commons/c/c1/Reunion_sausages_dsc07796.jpg [alt] => File:Reunion sausages dsc07796.jpg - Wikimedia Commons ) [2] => Array ( [url] => http://1.bp.blogspot.com/-zDyoLPoM1Zg/ULXDPba_2iI/AAAAAAAAAAs/QzfNNmDFmzc/s1600/shop_sausages.jpg [alt] => Maik's Yummy German Sausage ) [3] => Array ( [url] => http://sparseuropeansausage.com/images/sausage-web/sausagesBiggrilling2.jpg [alt] => Spar's European Sausage Shop ) ) 

Showing the images:

Edit after comments:

$url = 'http://ajax.googleapis.com/ajax/services/search/images?v=1.0&q=' . get_the_title(); $json = get_url_contents($url); 

Источник

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?

Google Drive Hosting is now deprecated. It stopped working August 31, 2016. Hosting Deprecation Schedule

TL;DR : Use the «Get Link» option in Google Drive to get the URL and change /open? to /uc? (eg: https://drive.google.com/open?id=xyz to https://drive.google.com/uc?id=xyz ). CREDITS: @Richard who gave the answer below

21 Answers 21

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:

          
 Download  

Aathi, It does not work for me. Even in codepen if I use my drive link, It does not display the image. Is there any setting that we need to provide in the drive for the file?

@Aakriti.G Are you sure you are using the right id?. I manage to copy past the folder id not the image id for a while. You need to open the image in a new tab to get the ID in the URL.

This works really well. Make sure its a public folder in gDrive and get the shareable link. I am using a spreadsheet where I paste the gDrive generated shareable link into a cell, then use this formula to adapt it to the purposes described herein: Replace([Img gDrive URL],1,33,»drive.google.com/uc?export=view&id=»)

Perfect :+1: worked for me! Also needed to work out how to add custom HTML to gmail signature, but managed it all in the end and this works like a charm, thank you!

Use the ‘Get Link’ option in Google Drive to get the URL.

Use tag in HTML and paste the link in there.

Change Open? in the URL to uc? .

Brilliant, thank you. This has been killing me all day — where did you learn this little gem for a «trick» (uc) and why the heck isn’t more widely known. Now to get back to making awesomeness with Fusion Tables.

Hmmm, the usual incantation is uc?export=view&id=. but seems the export=view is the default! (export=download to trigger the save dialog can come handy too)

you can use the link provided in @quitiweb’s answer: and replace the XXX with the ID that’s in the URL you get when you go to ‘Get Link’ :^)

I have found a way to do it without using external sites.

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:

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.

Folder ids are more than 28 characters, which is how long GDrives is expecting the id to be. It works for files, but it seems to be broken with folders now.

Exactly: gdriv.es is totally irrelevant now. I couldn’t access my public images through my embedded code on my homepage on sites.google.com.

I have the same problem right now but this article helps me. Updates for the year 2020!

These are the steps from the article:

1. Upload your image to google drive.
2. Share your image from the sharing option.
3. Copy your sharing link (Sample: https://drive.google.com/file/d/14hz3ySPn-zBd4Tu3NtY1F05LSGdFfWvp/view?usp=sharing)
4. Copy the id from your link, in the above link, the id is: 14hz3ySPn-zBd4Tu3NtY1F05LSGdFfWvp
5. Have a look at the below link and replace the ID. https://drive.google.com/thumbnail?id=1jNWSPr_BOSbm7iIJQTTbl7lXX06NH9_r

1. Now insert the link to your tag.

Unfortunately this method only gives you a small 200px wide version of your image (a thumbnail). But if you visit the /thumbnail. URL, you’ll be redirected to a new URL that has a number at the end which you can modify to get any size image you want. Amazing!

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

1. Open Drive at drive.google.com and select a file.
2. Click the Share button at the top of the page.
3. Click Advanced in the bottom right corner of the sharing box.
4. Click Change.
5. Choose On — Public on the web and click Save.
6. 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.
7. 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.

If you want to see your image in a website embed the link to pic in your html as usually:

      
Example image from Google Drive
   

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 Google Drive Image URL

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

echo https://drive.google.com/uc\?export\=view\&id\=`echo $(pbpaste) | cut -d '/' -f 6` 

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

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

1. upload the image on google drive
2. click on image and share with public

This method allows you to embed the image at whatever size or resolution you need:

1. Create a folder in your Google Drive
2. Make the folder (or image itself) public via the «Share» button
3. Copy the URL and extract the ID. It should look like
   https://drive.google.com/file/d/ID-HERE/view?usp=sharing
4. Use something like this as your image src:
   https://drive.google.com/thumbnail?id=$&sz=w$-h$ 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.

Google Drive Hosting is now deprecated. It stopped working from August 31, 2016.

I have removed the explanation of how to previously host an image on Google Drive.

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:

1. Upload the image at a specic folder at dgrive
2. Make this image as view foe who is having the link
3. copy the link, something like: https://drive.google.com/file/d/IMAGE_ID/edit
4. Take the ide from the link
5. 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:

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

What you are looking for is the individual images inside the source code of this page

then using php get the source code with

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.

Источник