How to Embed Your Unsplash Photos in WordPress
Published 3 years ago
Wouldn’t it be neat to embed your Unsplash photography on your WordPress site? Unfortunately, there’s no WordPress plugin available. If you’re not familiar, Unsplash is a huge library of photographs for commercial and noncommercial purposes. It’s an awesome resource for designers, prototypers, and developers alike.
So yeah, I figured it would be cool to add a showcase of my Unsplash photos on my website. Upon closer inspection of the Composer wrapper, it looked like it was overkill for my use. But if you’re gonna make a WordPress plugin using Unsplash, you’ll want to use it.
So I began here — first I made a quick blueprint on how I wanted this to go down:
Just a simple page, and a two column grid layout of my photos.
Next, I took a looked through the Unsplash API docs again. Created an application, and received my Application ID. Very important step. The docs even had an example for listing a user’s photos. Hell yeah 😎
Seems easy yeah? Next, I went to check out what kind of HTTP Response I get from the API with hurl.it and everything is looking hunky-dory so far.
So at this point I realized a few things:
- I need to make a simple HTTP request
- Decode the JSON
- Loop through the array and echo the goodies
I decided on making a simple snippet below:
If you leave line 19 uncommented, you can see the full array and figure out what you want to use from the HTTP request. You can copy/paste that snippet in any template or PHP file and it should work. NOTE: make sure to replace my username and swap YOUR_APPLICATION_ID for your actual App ID from Unsplash.
After a few layers of paint my Photography page now looks like this:
It’s quick and dirty, but at least I won’t have to upload my Unsplash photos to my website manually anymore. It’s all programmatic baby! I’m really happy how this turned out. I tried to make this as simple as possible and under 15 lines of code I think this rocks. But I hope someone else finds this useful!
Let me know how if you have any feedback, improvement or philosophy on this implementation in the comments below. 🙂