Unsplash without API key

⚠️ Please note this version is outdated, for the new API see my other article: https://allegra9.medium.com/how-to-use-unsplash-api-to-get-images-8653af6ec0ac

Let's generate random images from unsplash from your chosen collections.

Step 1: find an Unsplash collection you like.

I chose Beach & Coastal here:

https://unsplash.com/collections/928423/beach-coastal

So here my collection ID is 928423

In order to generate a random image in, let’s say a square format 480x480, we would switch the url to:

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

What’s different?

• We are adding source before unsplash
• collections become collection !!!
• no gallery name
• width x height at the end

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

Step 2: get the images.

The only html you will need here is:

<div class="gallery-container"></div>

Then JS:

const numImagesAvailable = 988  //how many photos are total in the collection
const numItemsToGenerate = 20; //how many photos you want to display
const imageWidth = 480;    //image width in pixels
const imageHeight = 480;   //image height in pixels
const collectionID = 928423  //Beach & Coastal, the collection ID from the original url
const galleryContainer = document.querySelector('.gallery-container')
function renderGalleryItem(randomNumber){
  fetch(`https://source.unsplash.com/collection/${collectionID}/${imageWidth}x${imageHeight}/?sig=${randomNumber}`)
    .then((response) => {
      let galleryItem = document.createElement('span');
      galleryItem.classList.add('gallery-item');
      galleryItem.innerHTML = `
        <img class="gallery-image" src="${response.url}" alt="gallery image"/>
        `
      galleryContainer.append(galleryItem);
  })
}
for(let i=0; i < numItemsToGenerate; i++){
    let randomImageIndex = Math.floor(Math.random() * numImagesAvailable);
renderGalleryItem(randomImageIndex);
}

So what happens in the code above (and below) is that our renderGalleryItem function is being called numItemsToGenerate times (which is 20 in my case), and for each call we fetch one image from the url with a random number as an argument.

index.js

So here we select somewhat random (or not so random) images.

It can look like this:

If you put this CSS in your style sheet:

body {
  margin: 0;
  padding: 0;
  background-color: #f6f6f6;
}
* {
  box-sizing: border-box;
}
img {
  width: 100%;
  height: auto;
}
.gallery-container {
  width: 100vw;
  height: 100vh;
  position: relative;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 10px;
}
.gallery-item {
  width: 240px;
  height: 240px;
  padding: 10px;
  background-color: white;
  box-shadow: 3px 3px 0px 0px rgba(0, 0, 0, 0.1);
  margin: 10px;
}

Or style how ever you like! It would also be cool to be able to click on an image and make it bigger.

Which could be sort of done with this code:

galleryItem.addEventListener('click', function(e){
        galleryItem.classList.remove('gallery-item');
        e.target.style.width = "600px";
        e.target.style.height = "600px";
        e.target.style.marginLeft = "15%"
        e.target.style.marginRight = "15%"
        e.target.style.padding = "10px"
        e.target.style.backgroundColor = "white"
        e.target.style.boxShadow = "3px 3px 0px 0px rgba(0, 0, 0, 0.1)"
      })

You would need to add it after this line

galleryContainer.append(galleryItem);

in renderGalleryItem(randomNumber) function.

It’s not perfect but things don't have to be perfect to be beautiful. Feel free to play around with it and make it fun.

How you see the world is not how other people see it, keep it unique.

One background picture

I also want to use the same trick and pick one huge background picture.

We can twist the code above to give us one random picture and make it as a background image to body.

background image

const numImagesAvailable = 982  //how many photos are total in the collection
const numItemsToGenerate = 1; //how many photos you want to display
const collectionID = 928423   //the collection ID from the original url
const galleryContainer = document.querySelector('.gallery-container')
function renderGalleryItem(randomNumber){
  fetch(`https://source.unsplash.com/collection/${collectionID}/?sig=${randomNumber}`)
    .then((response) => {
      console.log(response.url)
      document.body.style.backgroundImage = `url(${response.url})`;
      document.body.style.backgroundRepeat = "no-repeat"
      document.body.style.backgroundPosition = "top center"
      document.body.style.backgroundSize = "cover"
    })
  }
for(let i=0; i < numItemsToGenerate; i++){
    let randomImageIndex = Math.floor(Math.random() * numImagesAvailable);
renderGalleryItem(randomImageIndex);
  }

So here we lost the size parameters and set our image as a background covering the whole page.

And that’s it ! Thanks for reading 😊 Go build stuff!