Google Photos Serverless

Based on on publicalbum.orgs google photos embed, this python serverless function lets you embed your google photos public albums in your website seamlessly by returning a json payload ready for whatever you can dream up.

What it does

Parses the HTML page returned from a public google photos album and returns the images as JSON. This allows you to manage you entire gallery within google photos (add/remove, order, etc...) and embed the gallery or use it within any application easily that supports a JSON payload.

You could do something similar using google API's, but the setup required seemed more than the 20 lines of code to do this, plus can embed this directly in HTML!

Service Response

This function, when provided a valid Google photos alibum ID, will return a json payload that contains an array of images from the album with their height/width.

  {
    "images": [
      {
        "src":"https://lh3.googleusercontent.com/-Z4_GTK5gw2ke5d9pH1H48SBA6DWp4FaGx1wYNap1U23A34CgNtc2mcw75MAJ3lP1R3w00nU_ftdurj7akXmhqYg7z6tMrepLj2N3tJc93fHUG5rfD6mqKaBGJ3ur17o6TvBHMII9Q=h988",
        "w":1500,
        "h":988
      },
      {
        "src":"https://lh3.googleusercontent.com/dwdOyD2zpcpfdV9QWvDt1i83LvOfEx0GE1jzy0TVHWqU9fq8FSW70YXykguDmeRWJW9ophqA8bcnYxBr68yS3fjHFp-8Vx6HSS-NQjq_FcZUCP__GiukzcJVhg44VWthiylleWEtMw=h800",
        "w":1400,
        "h":800
      }
    ]
  }

For my project I use this with react-stack-grid - https://github.com/tsuyoshiwada/react-stack-grid), which creates a modern scrolling gallery (see https://www.dragonflyoib.com/gallery fpr example)

PreRequisites

• VS Code with Azure Tools extension
• Azure Subscription
• Public Google Photos Album
• The ID for your album (e.g. https://photos.app.goo.gl/Srz7Y8XxxZDm2cfM6 where Srz7Y8XxxZDm2cfM6 is the ID)

If you haven't ever deployed a function before to Azure, reccomend reading https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azurefunctions before you do this.

Getting Running

For the fastest setup, don’t checkout via command line. Instead, open VS Code and follow the following steps.

• Clone directly in VS Code
  • Click on “Source Control” in the left column
    
  • Get the link to clone this repo
    
  • Then, click "Clone Repository" and paste the clone url for this repo in entered box
• Next, select python 3 environment when it pops up at the top of your screen
  
• Finally, you’ll see a dialog in the bottom corner saying VS “detected Azure Function Project”, click “Yes” on it
  

Running locally

• Click on the run/debug icon in the left navigation. You'll see the "RUN AND DEBUG" panel open to the right, click on the green play button.
  
• Grab the URL from the terminal window (bottom of IDE)
  
• In your browser you will need the URL plus the google photos id we created in the last section.
  • Example: http://localhost:7071/api/GooglePhotosGallery?id=Srz7Y8XxxZDm2cfM6

If you’re building the app you want to embed this in locally, now is the time to start playing with it.

Deploying

• Open azure panel by clicking on Azure icon in left nav
  
• Expand "Local Project" under "Functions" and then expand "Functions"
  
• Click on the cloud icon to deploy
  
• Click "Create new Function App in Azure" (not the advanced version)
  
• Enter name for the function and then hit enter
  
• Choose the runtime stack (3.9)
  
• Choose region
  

This will take a few

Using Live Function

• Open the Azure panel again
  
• Expand “Azure Subscription”, expand the function name (e.g. GooglePhotosGallery), and finally expand "Functions" under it.
  
• Finally click “Copy Function URL” for the live URL
  

Honestly, it took me longer to write the README then to develop/deploy the function, but if you're like me and get bored with the standard "Hello World" apps or actually (like me) need this functionality why not :)