How to Embed Images from Google Drive on your Website

-

Looking for a place to host images so you can embed them on to your website? The most popular image hosting services are imgur.com and imgbb.com but did you know that you can also use Google Drive to host images.

It works something like this. You upload an image file to Google Drive and make that file public. Google Drive will now generate a high-resolution thumbnail image of the uploaded file that you can directly embed on your website or emails.

1. Share File

Go to Google Drive and upload the image that you wish to embed in your website. Next, right-click the image and choose Get link to get the shareable link of the uploaded file.

Get Link - Google Drive

2. Change Permissions

Inside the share dialog, choose the permissions drop-down and select Anyone with a link. This will make the file visible to anyone on the internet who has access to the share link. The file will be available to even users who do not have a Google account.

Click the Copy link button to copy the file’s link to your clipboard.

Make File Public

Next, open the Google Drive Embed page and paste the file link in the input text box. Click the Generate button to grab the direct link of the image that you can place in your website or emails.

Google Drive Image link

Internally, the tool takes the public link of the image on your Google Drive and grabs the Open Graph image from the HTML. It then changes the s parameter of the OG image to switch to a high resolution thumbnail. It is a similar technique that we use to get direct links for Google Drive photos.

Google Drive OG Image

Alternate Approach

If you prefer mangling URLs on your own, here’s an alternate approach that will help you generate direct links for your drive images.

Make the image file in your Google Drive public as described earlier and grab the file link of the public image. The URL will be something like this:

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

The part 13XE4Ah1aK5kSGniMbeard9DJ1iuroR_K in the Google Drive link is the unique ID of the file. Take that File ID and replace it in the URL below:

<img src="https://drive.google.com/uc?id=DRIVE_FILE_ID" alt="Google Drive Image" />

You can use this link to easily embed images into Google Sheets. The only downside of this approach is that you do not have control over the size of the image that is generated. In the previous example, you can easily change the width parameter to generate images of any specific size.

Also see: Google Drive URL Tricks



source:https://ift.tt/zsoUqRL

Comments

Post a Comment

Popular posts from this blog

The 101 Most Useful Websites

-
Image
Presenting the 101 most useful websites on the internet. These sites, well most of them, solve at least one problem really well and they all have simple web addresses (URLs) that you can memorize thus saving you a trip to Google. The Most Useful Websites and Web Apps ctrlq.org/screenshots  – for capturing  screenshots of web pages  on mobile and desktops. dictation.io  – online voice recognition in the browser itself. zerodollarmovies.com  – find full-length movies on YouTube. screenr.com  – record movies of your desktop and send them straight to YouTube. goo.gl  – shorten long URLs and convert URLs into  QR codes . unfurlr.come  – find the original URL that’s hiding behind a short URL. qClock  – find the local time of a city using a  Google Map . copypastecharacter.com  – copy special characters that aren’t on your keyboard. postpost.com  – a better search engine for twitter. lovelycharts.com  – c...
Read more

Compare MacBook Prices Worldwide with Google Sheets

-
Image
Looking to buy the new Macbook Pro with M3 chips? Wondering if it would be cheaper to purchase a Macbook in your local Apple store, or ask a friend who is travelling from Singapore or Japan to bring one for you? Here’s a Google Sheet that can help you compare prices of MacBooks in different countries. It takes the current prices of MacBooks from Apple online stores in different countries and converts them to a common currency (US Dollars). The exchange rates are fetched directly from Google Finance so the prices will update automatically when the exchange rates change. How the Macbook Price Comparison Sheet Works I have written a Node.js script that fetches the current prices of MacBooks from the Apple website and writes them to Google Sheets. Here’s the code that scrapes the Apple website and parses the HTML to extract the prices. Get Macbook Prices from Apple Website Apple uses JSON-LD to embed structured pricing data in their web pages that can be easily parsed using che...
Read more

Interesting Websites to Visit When You’re Bored

-
The 15 Interesting Websites Dear Photograph  – The website features photographs of people holding up old pictures that were taken at the exact spot several years ago. Some of the best photographs are now compiled in a  book  (dearphotograph.me). Textastrophe  – This website is a reminder of why you shouldn’t post your cell phone number on public websites. The creator starts a text conversation with random numbers found on Craigslist ads and publishes the transcript on the internet. The chats are funny and I hope its real because  screenshots can be faked  too (textastrophe.com). Stratocam  – This is like an online self-running slideshow showcasing some of the best satellite images found on Google Maps. Run the website in full-screen mode (Ctrl+Shift+F) and you may discover pretty and unexpected place on our beautiful earth (stratocam.com). Awkward Family Photos  – This is a place where people share embarrassing pictures of their loved ones i...
Read more