Blog: Spectrum - a Multifaceted Photo
While riding my bike the other evening, I noticed some new lights along a wall in the downtown Reno corridor. These lights caught my attention because they were configured to be lit-up in a spectrum of colors, which I thought was cool.
As I stopped to take a closer look, I pulled out my camera to capture a few shots, one of which is displayed above with a person walking in front of the lights that created a silhouette of their legs. To me, this moment—the specific light configuration with a person's silhouette—represented a reminder of how people are multifaceted. Whether it's in day-to-day life interactions or, for instance, creating digital products, someone's
multifacetedness is something for all of us to keep-in-mind to help guide us in trying to better understand one another in lieu of jumping to potentially harmful conclusions of others.
Statically displaying a dynamic photo
For the curious, the photo above is actually pulled-in to this page dynamically from Unsplash's API. In combination with Next.js'
getStaticProps, I am able to fetch this particular picture alongside its dynamic attributes, like how many times the picture has been viewed, downloaded, starred, etc., all while deploying and bundling this markdown page in production in a statically generated manner to help with performance load.
Sample snippet of code on how to fetch a specific Unsplash image using their API
The following is a snippet of how to instantiate the Unsplash API and make a photo request.
Once the photo is successfully fetched from Unsplash on the server-side, I can pass this along to the client-side and render the photo along with any other provided attributes returned (e.g. view count) just like any other, standard image on the Web using common HTML elements, like the
img tag, however, in my particular case, I leverage custom React components I've built for my site over time.
Any who, hope you enjoy both the picture and the method for how to pull-in any of your photos from Unsplash to share it on your website (or wherever you fancy). In 2019, I created a similar demo on my
Next.js with Theme UI Starter Kit that allows one to perform a fuzzy search to find a picture on Unsplash with keywords. Check it out, especially if you're curious on how to implement something similar or very different!
- My Product Philosophy
- Migrating Site to Next.js
- My Photography on Unsplash
- Unsplash Fuzzy Search Demo
- The State of Frontend (UI/X) à la React Hooks
I operate from a place of compassion, possibility and imagination. My work and efforts share a common goal: create a better, sustainable and equitable world by building inclusive communities, products & experiences.