Over the last couple of days of social distancing I spent some time working on a photostream site for some of my travel photos.

Whilst I usually post them on mine and my wife’s Instagram page iwantthewindowseat I’ve not found myself having the motivation to select an image, think of a caption, find hashtags and post at the best time for visibility as much as I used to.

I also wanted somewhere where copyright ownership wasn’t an issue. Much like this site is an archive of my ramblings and things I’ve worked on, I thought it would be cool to hav something similar for my photos.

This project was also a great opportunity to look at some of the newer browser features like lazy loading and leverage them - as of writing Firefox 74 is out and native lazy loading is due in Firefox 75. Native lazy loading is in chrome, the project uses a polyfill to bring lazy loading to older browsers.

Photo Stream

The project itself can be seen at iwantthewindowseat.netlify.com.

The code repository can be forked and cloned over here.

Comment and share

Introduction

I recently build my first site with Jigsaw and deployed it on Netlify.

As part of that project I had to get some data from the Instagram API and present a feed of the latest 5 images on the site.

Rather than dealing with CORS errors in javascript I wondered what I could get away with in PHP during the build phase on a statically generated site.

Would I be able to:

  • Query some form of public json endpoint
  • Find the urls for the latest 5 images
  • Download them locally resize them for efficiency
  • Display them using Jigsaw
Continue reading
  • page 1 of 1
Author's picture

Talv Bansal

Full Stack Developer, Part Time Photographer


Head of Software Engineering


Remote