Unsplash.it: Use Placeholder Photos From Unsplash.com

Unless you have been living under a stone for the last year or two, you’ll certainly know that you can find ten new freely usable photos on Unsplash.com every ten days. Now, the additional service Unsplash.it gives you the possibility to use these pictures as wildcards in web projects. This can be achieved in a convenient and simple way. The resolution of said wildcard photos is freely definable. Besides there are further useful functions that help this service appear interesting. Let’s take a look, shall we?

Simple Syntax for Individual Embedding

To be able to use one of the more than 700 currently available photos, entering a simple URL will do. When entering the URL without further parameters, the resolution of the picture will be chosen automatically.

https://unsplash.it/640/425

Sample Image

unsplash-it_beispiel
Image by Alejandro Escamilla on Unsplash

The example opens a particular photo from Unsplash.com and scales it to a size of 640 x 425 pixel. Pictures will be cut automatically when their aspect ratio differs from the original file. In the case of a square format, it’s sufficient just to define either value, width or height.

https://unsplash.it/640

With the aid of the parameter “gravity”, it’s possible to adjust which borders of the photo to cut. The term “east” ensures that a picture won’t be cut at its right edge for example. You can make use of all four cardinal directions and use them as parameters. Especially when the contentual focus is not on the middle of the picture the parameter is useful.

Photo Cut With and Without the Parameter „gravity.“

unsplash-it_beispiel_gravity
https://unsplash.it/640?gravity=east

If continuously switching photos is what you want, you could have the website display pictures randomly.

https://unsplash.it/640/425?random

Just add the parameter “random” to achieve that.

Choosing a Specific Image

While randomly switching pictures are not invariably aimed for; there is the possibility to link particular images. Unsplash.it has a list of all available photos with IDs, which you need to know to be able to target them. Said ID is delivered through the parameter “image”.

https://unsplash.it/640/425?image=40

The range of photos is impressive. You’ll find architecture, nature and lots of aspects of everyday life and the business world. Over all those pictures are generic enough to qualify as good placeholders.

Gray Scaling and Blurring

Unsplash.it also got two effects you could use to have the photos edited automatically. That way it is possible to constitute photos in grey shades or provide them with a blur. A picture with grey shades can be obtained by putting the letter “g” in front of the width and height inside the URL.

https://unsplash.it/g/640/425

You obtain the blur effect by adding the parameter “blur”.

https://unsplash.it/640/425?blur

Photo With and Without Effects

unsplash-it_effekte
Image by Pawel Kadysz on Unsplash

The different syntax of both effects is slightly inconsistent but simple in total. Even a combination of both effects is possible.

Photos as JSON List

The service also supplies all of the photos as a list in the form of a JSON object. This contains the name of the photographer and the resolution of the picture beside its URL. You could create your own script to get access to the list.

Conclusion

Unsplash.com lets you use its photos completely free of charge for whatever legal use case you want. As a result of that plain licence, one does not even have to worry about linking a wildcard. Which is why this service is both technically and legally easy to handle.

Banner Photo by Vladimir Kudinov on Pexels

(dpe)

AUTHOR
Denis works as a freelance web designer since 2005.

Send Comment:

Jotform Avatar
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Comments: