Quando estamos criando um novo site ou preparando uma funcionalidade de teste, geralmente precisamos trabalhar com imagens de teste para ver como fica.
O que costumamos fazer é pegar qualquer imagem da internet e perder tempo preparando algumas imagens que vamos substituir depois, ou seja:
Perdemos tempo 😠 👎
Se esta história lhe parece familiar, você vai adorar o tutorial de hoje 😄
Assim como há texto de prova, o típico Lorem Ipsum, eles também criaram imagens de teste, o que podemos chamar rapidamente.
Por exemplo, uma imagem aleatória de 700×400 pixels deve aparecer abaixo (se você recarregar a página, verá uma foto diferente):
Como eu fiz isso?
simplesmente adicionando o seguinte código:
<img alt="imagen aleatoria" src="https://picsum.photos/700/400?random">
Agora vou explicar com calma, mas você não acha maravilhoso? Pra mim sim 😉
Aqui está o tutorial em vídeo:
Inscreva-se no meu canal:
O serviço que estamos usando é picsum.fotos e embora tenha uma ajuda muito boa aqui vou explicar como funciona:
Chamar uma imagem de um tamanho específico
Para isso, basta colocar a url do seu site e adicionar o tamanho da imagem no final, por exemplo 700/400 se o que queremos é uma imagem de 700px de largura por 400px de altura:
https://picsum.photos/200/300
Adicione a imagem no WordPress
A maneira mais fácil é ir para Add Object dentro de nossa entrada:
Clicamos em “Inserir do URL” e pronto:
Outra maneira de fazer isso é por código com um pouco de html, é muito simples e você fará isso mais rápido.
Certifique-se de ter o editor HTML e simplesmente adicione o seguinte:
<img alt="imagen aleatoria" src="https://picsum.photos/700/400?random">
Chamar uma imagem em tons de cinza
Simplesmente adicionamos o parâmetro "g", aqui você pode ver como:
<img alt="imagen aleatoria" src="https://picsum.photos/g/700/400">
resultado:
Chamar uma imagem barulhenta
Adicionamos ao final do URL »?blur»
<img alt="imagen aleatoria" src="https://picsum.photos/700/400/?blur">
resultado:
Incorporei esta ferramenta no meu trabalho diário, espero que seja útil para você também 😉