How to use Unsplash in your projects?

Intro

Recently I've explored for yourself great photo stock service Unsplash.com.

The internet’s source of freely useable images. Powered by creators everywhere

Service has tons of high quality photos grouped by collections and categories. So you can find photo about everything literally.

So in this post I want to share one pretty interesting thing which I've done with this service. But I believe you could already noticed it on the main page of this blog.

Dynamic background image

For a long time the main page of this blog has mono color grey background. It was bored and depressed. So I thought to change it on photo image or something similar. But couldn't to decide to which actually one. Hard choice. Agree? :) And it was great to explore for myself unsplash.com. I think it would be great to make background image dynamically changing. First I've went to licence for unsplash:

All photos published on Unsplash can be used for free. You can use them for commercial and noncommercial purposes. You do not need to ask permission from or provide credit to the photographer or Unsplash, although it is appreciated when possible. More precisely, Unsplash grants you an irrevocable, nonexclusive, worldwide copyright license to download, copy, modify, distribute, perform, and use photos from Unsplash for free, including for commercial purposes, without permission from or attributing the photographer or Unsplash. This license does not include the right to compile photos from Unsplash to replicate a similar or competing service.

Great! That means that I can use all photos from this service for free for my use.

After that check the Unpslash source. This is awesome powerful service which allows you to embed Unsplash photos wherever you want. In my case I've done it with one CSS string:

background: url(https://source.unsplash.com/1600x900/?seattle,sunrise) no-repeat center;

That's it! No any Javascript code at all ;)

This string gets random photo from unsplash with size 1600x900px and tags including seattle and sunrise. The result how it works you can find on the main page of this blog.

And you can play with parameters in this form:

See the Pen Unsplash dynamic background by Alex Filatov (@greybax) on CodePen.

For a more advanced integration, see Unsplash API.

More ideas how to use it

Using powerful API you can get photos based on a lot of parameters which is actually represents as a tags on the unsplash service.

For example, you can show photos for group of people based on their geoposition or time of the day. You can show images from specific collections or setup daily or weekly update for the image (not on each request).

Happy unsplashing! ✌🏼