Embedding Pictures from Google Photos

10/5/17 update: there is a new feature in WordPress that allows you to use your Google Photos. You must jump thru a couple of hoops to make it work. See WordPress and Google Photos

I am creating this post to test the ability of embedding photos that are hosted on Google Photos. You see, back when we had Picasa Web Albums, you could select a photo and then there was an option in the sidebar to “Embed” that photo into another website. As I recall, even back with Picasa Web Albums, I did not use that method. I would use the right-cick / copy image address (or image URL) method that still exists today.  Here is a video on how I used that method to insert photos into Google’s My Maps. 329.Adding Pictures to Custom Maps

Here, in WordPress, I can add a picture from Google Photos by opening the photo with Google Photos, right-click and “Copy Image Address.”  Then in WordPress, click the Add Media button, select Insert from URL, and paste the address. Then I resized it by dragging a corner handle.

Image embedded from Google Photos
Image embedded from Google Photos with .jpg added at end

Unless you’re me, the picture above has disappeared. I still saw it for a while because I am the owner, but apparently after some period of time, the public nature of the embedded code expires and no one else can see it. After more time – overnight – even I can’t see it now.

I am going to try the suggestion posted in this thread by Tenley H. She says to take the code copied above and paste it into a converter at GETeach.com/staticstreet to get a true permalink URL for the photo. Here goes:

Image address from Google Photos, converted by GETeach then used with WordPress Insert from URL
Image address from Google Photos, converted by GETeach then used with WordPress Insert from URL

I notice that, even after conversion, the URL still does not end in .jpg or .png. AND … this is a pain. But, if it works, it’s still better than having to set up another image hosting service.

One more try

Even the picture URL converted by GetEach, expired above and is no longer visible to anyone but me. This try I will do exactly what Tenley specifies – that is to open the picture from Google Drive (not photos) and copy the shareable link. Use Geteach to convert that link to a useable URL, and then embed that here.

Google Drive link converted by geteach.com
Google Drive link converted by geteach.com

Using Microsoft OneDrive Embed code

While I’m at it, I’m going to use a photo uploaded to Microsoft’s Onedrive. Onedrive offers a specific Embed option for photo stored there. View the photo, click the 3-dot menu and choose Embed. Now you select a size (I chose small) and copy the URL code. Then I used the same Insert photo from URL option here in WordPress.

Inserted from OneDrive photos embed code
Inserted from OneDrive photos embed code

Using Google Drive, and Editing the URL

Today I ran across this set of instructions for embedding a Google Photo – via Google Drive. The key seems to be changing public in the url to uc ..?? Makes no sense to me, but here we go:

 

Using Google Drive Embed code!

Found it! This looks to me like an officially condoned way of embedding a Google Photo into a web page. First make sure your Google Photos are shown in Google Drive – its a setting in Drive – then

  • open the photo and click the 3-dot menu and Sharing – set to Public.
  • 3-dot menu, open photo in new tab
  • 3-dot menu EMBED THIS!
  • This gives you iframe code, just like OneDrive.  YAY!!!

Getting Link from Google Photos

Now I’m going to try the technique outlined in this forum post.

 

 

From album that has been shared with Get Link. View single photo. Right-Click copy image address. Edit code at end to specify width and delete remaining.

Getting Photo address from Blogger

I use Blogger for my personal blog (geeksontour.blogspot.com) Since it is a Google Product I can directly get photos from Google Photos. (insert image, from Google Album Archive or from Phone) When it is published, you can then right click on the photo and copy image address, then use that address here. It works. The photo below is taken from this Blogger post. If you wanted to use this method, you would need to make a Blogger blog just to be your host for photos, I think you’d need to make it public too.

Or … I received an email from Scott who adds a little twist to this:

The key is using a Blogger blog to write the post. You see, when you insert photos from Google Photos into Blogger, the photo is given an actual URL that ends in .jpg.

So, you start a new post in Blogger, then when you are finished with it, go to the HTML view and copy everything. You can then discard the Blogger post. Then go to the WordPress blog, start a new post, click on the text view and paste it in.

You now have your images from Google Photos linked to your blog without copying them to your media files. If you change an image, it will show up as changed in your blog.

Thanks Scott!

2 replies on “Embedding Pictures from Google Photos”

  1. I use Blogger for my blog. To insert a photo from Google Photos into the blog, I clicked on the insert image button then tried the right click/copy link method to add one of my Google Photos to my blog. I get message the link can’t be found. Any other ideas beyond downloading and using “GetEach”?

    • Blogger is easy – it integrates with Google Photos just fine. At least as far as I can tell. When you click the insert image button, you get “From Google Album Archive” – that is where all photos you ever put into albums will be found. If not there, then click on More, and From your Phone. That will be all photos auto-uploaded to your Google Photos account. You should be able to find your photos there and insert into your blog.

Comments are closed.