How to Embed Images from Google Photos into your Website

-

Google Photos is the best service for backing up your digital photos to the cloud. They have no storage restrictions, you can upload images as well as videos, and the built-in visual search engine helps you find photos by faces or objects in the picture. There’s one feature though that’s still missing in Google Photos.

You can easily share your photos with anyone using a simple link but Google Photos offers no option for you to embed an existing image into a website. That is, if you have already uploaded an image onto Google Photos, you can’t directly embed it into your website through Google Photos.

Google Photos as an Image Host

Embed Google Photos is a new web app that, as the name suggests, makes it extremely easy for you to pick any image hosted on Google Photos and place it on a web page using simple HTML code.

Here’re the steps involved:

  • Go to photos.google.com and open any image that you wish to embed in your website.
  • Tap the Share Icon (video tutorial) and then click the Get Link button to generate a shareable link of that image.
  • Go to j.mp/EmbedGooglePhotos, paste that link and it will instantly generate the embed code for your selected picture.

That’s it. Open your website template, paste the generated code and save (see sample). The image will now serve directly from your Google Photos account. This technique can also be used for embedding images in HTML Mail without having to use an external image hosting service.

Embed Google Photos

Embed Google Photos - How it works?

When you share any single photo in Google Photos, it creates an unlisted link that is accessible to anyone including those who are not logged into their Google Accounts. Internally, the embed app downloads the page behind this link and extracts the Open Graph tags to determine the direct link of the image and the underlying photo album.

Change Height and Width of the Image

All images hosted inside Google Photos have a URL in a particular format:

https://lh3.googleusercontent.com/xyz=w2400

The w2400 in the URL indicates that the maximum width of the image will be 2400 pixels. However, if you have a higher resolution image, you can change the width parameter to something like w8000 meaning 8000 px wide. The height will be adjusted automatically to preserve the original aspect ratio.

You can also specify the height and width values in the URL and Google Photos will fit the image to the specified size.

https://lh3.googleusercontent.com/xyz=w1415-h944

The embed app only works for single images and not albums. One more thing. I am not aware of any bandwidth limitations for images shared via Google Photos.

Also see: Google Photos - The Good Parts



source:https://ift.tt/2xezvit

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