How to quickly generate a random gallery of images from an unsplash collection in javascript without using the API

There are a ton of free image placeholder services out there, but by and large they involve inserting useless cat gifs, or Nicolas Cage. If you need something a little more client friendly — I recently discovered that unsplash has the ability to generate random images from specific collections. Even better — it will return those images at your specified dimensions. Here’s how to create a random gallery with javascript:

First, find an unsplash collection you like, and make sure it has enough images to suit you. I wanted furniture, and found this collection:

https://unsplash.com/collections/1163637/furniture

You can see here that the collection ID is 1163637. In order to generate a random image in a square, 480x480 format, you would switch the url as follows:

https://source.unsplash.com/collection/1163637/480x480

Note that we are adding source before unsplash, changing collections to collection, and removing the gallery name (furniture), and adding our desired dimensions (480x480 ). In other words, your template is:

https://source.unsplash.com/collection/[collection_id]/[width]x[height]

Now, to get javascript to render your images:

You’ll need to figure out how many images you want to render, and you’ll need a template for your gallery items. I’ll leave the styling to you, and illustrate the simplest implementation:

const numItemsToGenerate = 20; //how many gallery items you want on the screen
const imageWidth = 480; //your desired image width in pixels
const imageHeight = 480; //desired image height in pixels
const collectionID = 1163637; //the collection ID from the original url
function renderGalleryItem(){
  fetch(`https://source.unsplash.com/collection/${collectionID}/${imageWidth}x${imageHeight}/`).then((response)=> {    
    let galleryItem = document.createElement('div');
    galleryItem.classList.add('gallery-item');
    galleryItem.innerHTML = `
      <img class="gallery-image" src="${response.url}" alt="gallery image"/>
    `
    document.body.appendChild(galleryItem);
  }) 
}
for(let i=0;i<numItemsToGenerate;i++){
  renderGalleryItem();
}

The code above specifies how many random items you want to generate, what width and height you want them generated at, and which collection you want to pull from. Learn Vue.js online from the best Vue.js tutorials recommended by the programming community.

Given those variables, it loops through the number of items you want to generate, and calls a function to create a div containing the random unsplash image, and appends each div to the body of your html. But there’s a problem — all the images are the same random image.

To solve that, you’ll need to tell unsplash the index of the image to choose, and to do that, you’ll need to note how many images are in the collection. At the time of writing, my collection had 242 photos. So I need to set a variable for that:

const numImagesAvailable = 242;

But in order to keep things random, you need a way to randomly assign one of those 242 images:

let randomImageIndex = Math.floor(Math.random() * numImagesAvailable);

Then we need to pass that image index to our renderGalleryItem function, so we’ll modify that functon as follows:

function renderGalleryItem(randomNumber){
  fetch(`https://source.unsplash.com/collection/${collectionID}/${imageWidth}x${imageHeight}/?sig=${randomNumber}`) .then((response)=> {    
    let galleryItem = document.createElement('div');
    galleryItem.classList.add('gallery-item');
    galleryItem.innerHTML = `
      <img class="gallery-image" src="${response.url}" alt="gallery image"/>
    `
    document.body.appendChild(galleryItem);
  })
}

Here’ we’ve added the parameter randomNumber to the renderGalleryItem function. And in our fetch call, we’re passing the randomNumber to a url parameter that unsplash gives us, called sig . So in this case ?sig=${randomNumber}.

So the entire code is now as follows:

const numItemsToGenerate = 20; //how many gallery items you want on the screen
const numImagesAvailable = 242; //how many total images are in the collection you are pulling from
const imageWidth = 480; //your desired image width in pixels
const imageHeight = 480; //desired image height in pixels
const collectionID = 1163637; //the collection ID from the original url
function renderGalleryItem(randomNumber){
   fetch(`https://source.unsplash.com/collection/${collectionID}/${imageWidth}x${imageHeight}/?sig=${randomNumber}`) 
  .then((response)=> {    
    let galleryItem = document.createElement('div');
    galleryItem.classList.add('gallery-item');
    galleryItem.innerHTML = `
      <img class="gallery-image" src="${response.url}" alt="gallery image"/>
    `
    document.body.appendChild(galleryItem);
  })
}
for(let i=0;i<numItemsToGenerate;i++){
  let randomImageIndex = Math.floor(Math.random() * numImagesAvailable);
  renderGalleryItem(randomImageIndex);
}

Do this, and you should end up with a bunch of random images on your page. Now all that’s left is to lay them out the way you want.

Here’s a codepen if you need it: