Using images from Google Photos

I’ve been working to clean up some of the photos used in the blog I wrote while in Antarctica. I had to re-figure out how to utilize inline photos, so here are my notes.

BACKGROUND

When I was in Antarctica, I tried to take a lot of pictures. Unfortunately for everyone I’m not a very good photographer. But also unfortunate is the fact that there isn’t a very good internet connection from down there so I had to upload most of my images as low resolution files. At the time I was using Picasa but, as with most useful tools from Google, it has since been retired.

Somehow, some of my image links miraculously worked, but when the site was being built, Netlify continued to nag remind me that my old pages had “Insecure mixed content detected.”

Finally, I figured I’d use this as an opportunity to upload larger, better (in size…not content) pictures to the current online image repository from Google. As of this writing, that is Google Photos. So I uploaded them all, attempted to organize them into albums, etc. It was exhausting and I gave up a few times.

CHALLENGE

When I went to update my old blog posts with the newly uploaded and painstakingly organize images, I simply could NOT figure out how to make my Hugo site display them. I couldn’t tell if it was Hugo, or the theme I was using (Academic), or if it was the permissions.

It seemed that nothing I attempted was allowing me to embed a photo inline in a blog post.

SOLUTION

Come to find out:

You have been using Google Photos to backup your photos to the cloud but Google offers no option for you to embed the uploaded pictures on to your website.

I don’t know if I was looking for the wrong thing or what, but I only found this information on one single site. I’ve been using this site which:

is running on Google Cloud Run. It uses Google Puppeteer to download the photos page, extracts the meta tags and converts the URL into an HTML tag.

The images are not saved anywhere.

that last part seems unnecessary to say and so the fact that it is stated sort of makes me doubt it. But I want these pictures seen on my blog so if the are saved or used elsewhere, I’m not sure I really care…

So my process is now (for every old blog post with an image):

1. find and open the used image in Google Photos

2. click the Share button

3. click Get Link (to create a shareable link of that image)

4. switch to the Embed Google Photos page

5. paste the Google Photos link in the box on the awesome Embed Google Photos page

6. verify that I’m not a robot (sometimes requiring choosing grainy images)

7. click the Generate the HTML embed code with one-click

8. use that new URL in a figure shortcode in the blog post:

SIDE NOTES

• this is taking forever so I am not done yet…

WHAT I LEARNED

• it is not trivial to drag along old content every time I think I want to start a blog again.

REFERENCE

• Hugo static site generator
• Academic theme github repository
• Netlify free generation
• Picasa’s headstone
• Google Photos
• Embed Google Photos
• Hugo figure shortcode