Skip to content

arjungandhi/google-photos-yoinker

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

29 Commits
 
 
 
 
 
 
 
 

Repository files navigation

MIT License LinkedIn Website


Google Photos Yoinker

a auto-updating carousel for your website

View Demo · Report Bug · Request Feature

Table of Contents
  1. About The Project
  2. Getting Started
  3. TODO
  4. Contributing
  5. License
  6. Contact

About The Project

Google had no good way to embed google photos albums so I did it my self. To use this library you're gonna need to set up a proxy function to funnel the requests through I'll briefly cover the way I did it and include links to AWS's documentation. But as long as the proxy function passed into the script returns the right data it'll work.

Features

  • blur until load
  • dynamic resizing
  • load videos and photos
  • auto updates pictures and videos using the just the album id
  • grid and carousel display options
  • minimal css for easy editing

Built With

Getting Started

To use swiper on your own site you'll need to set up an api/lambda/proxy thing to make the google requests with. Google Photos has Same-Origin headers so we can't just make the requests directly from the browser. There's a hundred different ways to do this but I'll go through doing it the way I did which is with AWS and API gateway.

Prerequisites

  • AWS Gotta have one

How to Setup the AWS Proxy

  1. Create a new lambda function with python 3.8:
  2. Copy and paste/somehow upload this code into your created function (you can straight up do this through their editor)
  3. Setup a REST API through API gateway create a GET Method either under a resource or under the root.
  4. Setup a query string for the url and feed that into the lambda function. (The instructions are in the guide above)
  5. Enable CORS
  6. Deploy the API
  7. Copy the Invoke Url we will need that later (depending how you set it up you may need to add the resource name after your invoke url)
    • For example mine is {invokeurl}/proxy

Using the Library

  1. Add the CSS to your head tag.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/google-photos-yoinker@1.1.6/src/yoink.min.css">
  1. copy the following code into your body
<div id="photos-container"></div>
<script type="module">
    import embed_google_photos from "https://cdn.jsdelivr.net/npm/google-photos-yoinker@1.1.0/src/yoink.min.js"

    async function make_request(url){
        const proxy_url = '{{$invoke_url}}?url='

        var response = await fetch(`${proxy_url}${encodeURIComponent(url)}`)

        return response 
    }

    embed_google_photos("{{$your google photos id}}", "photos-container", "{{$type}}", make_request, 240)  //this last paramater is optional and is just the max-height when using grid layout  
</script>
  • {{$type}}: is either 'grid' or 'carousel': see a demo here
  • {{$your google photos id}} is the public id of your google photos album (its the last part of the sharable url)
  • {{$invoke_url}}: is your invoke url
  1. Run the page and you should see your album pop up :)

Other Useful Info

If you wanna do the proxy some other way go for it you as long as its an async function and returns the data as a json formatted as following

{
  "body": {
    "data": "the request data, <- the request data format (in this case its an html string)",
    "redirected": "Bool <- a boolean value based on whether the request was redirected (important for telling between pictures and videos)"
  }
}

TODO

  • make the it so setting up the AWS function is a single command using like a bash function/ cloud formation script or figure out a better way to do proxies so you just need to use the library and no aws at all.
  • comment my code better

Contributing

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.

  1. Fork the Project
  2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
  3. Commit your Changes (git commit -m 'Add some AmazingFeature')
  4. Push to the Branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

License

Distributed under the MIT License. See LICENSE for more information.

Contact

Arjun Gandhi - @arjungandhi06 - contact@arjungandhi.com

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published