When we are making a new website or preparing a test functionality, we often need to work with test images to see how it looks.
What we usually do is take any image from the internet and waste time preparing some images that we are going to replace later, that is:
We waste time 😠 👎
If this story sounds familiar to you, you're going to love today's tutorial 😄
Just as there is proof text, the typical Lorem Ipsum, they have also created test images, what can we call quickly.
For example, a random 700×400 pixel image should appear below (if you reload the page you will see a different photo):
How I did it?
simply adding the following code:
<img alt="imagen aleatoria" src="https://picsum.photos/700/400?random">
Now I'm going to explain it to you calmly, but don't you think it's wonderful? To me yes 😉
Here is the video tutorial:
Subscribe to my channel:
The service we are using is picsum.photos and although it has a very good help here I am going to explain how it works:
Call an image of a specific size
To do so, we just have to put the url of your website and add the size of the image at the end, for example 700/400 if what we want is an image 700px wide by 400px high:
https://picsum.photos/200/300
Add the image in WordPress
The easiest way is to go to Add Object inside our input:
We click on "Insert from URL" and that's it:
Another way to do it is by code with a bit of html, it's very simple and you'll do it faster.
Make sure you have the HTML editor and simply add the following:
<img alt="imagen aleatoria" src="https://picsum.photos/700/400?random">
Call an image grayscale
We simply add the parameter "g", here you can see how:
<img alt="imagen aleatoria" src="https://picsum.photos/g/700/400">
Result:
Call a noisy image
We add to the end of the url »?blur»
<img alt="imagen aleatoria" src="https://picsum.photos/700/400/?blur">
Result:
I have incorporated this tool into my daily work, I hope it will be useful to you too 😉