About this Post

Statically displaying a dynamic photo using Unsplash's API


I noticed some new lights along a wall in the downtown Reno corridor the other evening while riding my bike. The lights caught my attention because they were configured to glow in a spectrum of colors.

# of views: 62,806

After stopping to take a closer look, I pulled out my camera to capture a few photos, one of which is displayed above with a silhouette of a person's legs created by the lights. I saw this moment—specifically, the light configuration that created a silhouette—as a reminder of how people are multifaceted. Whether it's in day-to-day life interactions or, even, for example, creating digital products, I feel it's important to take stock in someone's composite nature to help guide us in the pursuit of better understanding one another.

@ChiahauHu @vincentriemer Static site generation. What people mostly want is the data in one hop. SSR can do it, but from a distant origin. SSG can do it from an edge close to you.
Loading...

For the curious, the highlighted, image above is actually pulled-in using Unsplash's API.

  • Next.js' getStaticProps allows me to make a remote request of a specific picture along with its relevant metadata, e.g. how many times it has been viewed, downloaded, or starred.
  • Upon deploying to production, this markdown page is packaged statically to help reduce performance load.

The following is a TypeScript code snippet I've implemented on how to make a request to the Unsplash API for a particular photo.

// Some service library in your project, e.g. @/lib/unsplash.(js|ts) import { createApi } from 'unsplash-js'; export const fetchSingleUnsplashImage = async (id: string) => { let resultData; let resultError; try { const accessToken = process.env.UNSPLASH_ACCESS_TOKEN; if (!accessToken) throw new Error(`No Unsplash access token defined`); const unsplash = createApi({ accessKey: accessToken }); // @see https://github.com/unsplash/unsplash-js#response resultData = await unsplash.photos.get({ photoId: id }).then((result) => { if (result.errors) { // handle error here } else { // handle success here return result.response; } }); } catch (e) { ... // Handle catch } return { results: resultData, errors: resultError, }; };

  1. Create an app/project in Unsplash's Developer Dashboard to generate an access token.

  2. On the server/static-side, fetch the photo from Unsplash (using your access token and the photo's ID) and pass it to the page's props, e.g.

    // pages/index.tsx import { fetchSingleUnsplashImage } from '@/lib/unsplash'; type Props = { photo: UnsplashPhoto, }; export const getStaticProps = async () => { // https://unsplash.com/documentation#get-a-photo const { results } = await fetchSingleUnsplashImage('YourPicturesID'); return { props: { photo: results, }, }; }; //...
  3. Pass the response payload to the client-side where it can [be rendered][#demo-photo] along with any other metadata (e.g. view count, download links, etc.) using a React componentand and or HTML tags such as the img tag.

    // pages/index.tsx //... getStaticProps type Props = OtherPropTypes & { photo: UnsplashPhoto, }; const StaticUnsplash = ({ photo }: Props) => { return ( <div class="photo"> <img width={photo.width} height={photo.height} src={photo.urls.regular} alt={photo.alt_description} /> <p> <a download href={photo.links.download}> Download </a> </p> </div> ); }; export default StaticUnsplash;

I hope you enjoy the picture, my perspective on it, and the high-level method for sharing any of your Unsplash photos on your own website (or wherever you fancy).

Resources:

Related: