How to Automate Pulling in Random Images from Unsplash for Prototypes

Just because something is a quick prototype for a web application doesn't mean we don't want it to look good, right?  I often use Unsplash images in prototypes and CodePen pens since I'm never disappointed by the image quality.  I even have some of my own images up there just for fun.  I always want each Unsplash image pulled into a prototype to be unique (no duplicates, please!). For a single image, I just use https://source.unsplash.com/random as the image URL and I'm set!  Here I'll cover the method I use when I need more than one image, which uses JavaScript.

A quick note up front: this method uses source.unsplash.com to source images, which is designed for low-volume traffic.  For production work, Unsplash recommends using their API instead.

Pick an Unsplash Collection

The first step is to pick a collection of Unsplash photos to use for your prototype.  You can browse all of the collections on the Unsplash collections page.  Clicking to view any collection will give you the collection's unique ID that you'll need for later, shown as part of the page URL. For example, for the collection at https://unsplash.com/collections/466697/minimal, the collection ID is 466697.  You'll also want to note how many images are available in the collection, which is shown at the top of the collection's page.

Write a Random Number Generator

Here's where we start digging into the code! In order to pick a random image from the chosen Unsplash image collection, we need a way to generate a random number in the collection. For the collection above, this would mean we want a random number from 0 to 206.  For more on generating random numbers in a given range in JavaScript, see MDN. Using JavaScript, we can use a function to get a random number between 0 and 206 (note that I'm using ES2015 JavaScript, also known as ES6, in this post), like this:

const getRandomNum = () => Math.floor(Math.random() * 206)

We got to leave out the part of the calculation using min here since our minimum value is just 0. Yay for simplicity.

Write a Background Image Setter

Next, we just need a JavaScript function that will actually use our random number generator function to display random images.  In this example, we're setting the images as background images, but you could modify this example to set the images with actual <img> tags by having it modify image src attributes.  To get the random images as background images, we first need to find a reference to where the background images should go in the DOM.  For this case, I want a background image set for each element that has a class of cube since my HTML markup looks like this:

<div class="grid">
  <div class="cube">h</div>
  <div class="cube">e</div>
  <div class="cube">l</div>
  <div class="cube">l</div>
  <div class="cube">o</div>
</div>

We can get a reference to those elements using:

const cubes = document.getElementsByClassName('cube');

To set background images for can use a function like this which uses an ES6 for-of loop, which is very handy for looping over NodeLists like this list of DOM matches for a given CSS class:

for (let item of cubes) {
  const bgImage = `url('https://source.unsplash.com/collection/466697/${getRandomNum()}')`
  item.style.backgroundImage = `linear-gradient(
    rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)), ${bgImage}`
  item.style.opacity = 1
}

This sets a background image in JavaScript by setting it as a CSS property.  At the same time it sets a linear gradient, since in this case I want to make the image slightly darker to ensure better readability for text that sits on top of the image.

This function uses ES6 template literals to tell JavaScript to evaluate the entire URL as an expression.  That's why there are backticks (“) and an expression (${}) included in our setting of bgImage.  Template literals are very powerful once you get familiar with them and start playing with them a bit.

And that does it! For a sample prototype using this technique, see this CodePen pen.

See the Pen My First CSS Grid by Sheelah Brennan (@sheelah) on CodePen.