Yeni bir web sitesi yaparken veya bir test işlevi hazırlarken, nasıl göründüğünü görmek için genellikle test görüntüleri ile çalışmamız gerekir.
Genelde yaptığımız şey, internetten herhangi bir görüntü almak ve daha sonra değiştireceğimiz bazı görüntüleri hazırlamakla zaman kaybetmek, yani:
Zaman kaybediyoruz 😠 👎
Bu hikaye size tanıdık geliyorsa, bugünün öğreticisini seveceksiniz 😄
Kanıt metni olduğu gibi, tipik Lorem Ipsum, test görselleri de oluşturmuşlar, hızlı ne diyebiliriz.
Örneğin, aşağıda rastgele bir 700×400 piksel görüntü görünmelidir (sayfayı yeniden yüklerseniz farklı bir fotoğraf göreceksiniz):
Nasıl yaptım?
sadece aşağıdaki kodu ekleyerek:
<img alt="imagen aleatoria" src="https://picsum.photos/700/400?random">
Şimdi sana sakince açıklayacağım ama sence de harika değil mi? Bana göre evet 😉
İşte video eğitimi:
Kanalıma abone ol:
Kullandığımız hizmet, picsum.fotoğraflar ve burada çok iyi bir yardımı olmasına rağmen, nasıl çalıştığını açıklayacağım:
Belirli bir boyuttaki bir resmi çağırın
Bunu yapmak için, web sitenizin URL'sini koymamız ve görüntünün boyutunu sonuna eklememiz gerekiyor, örneğin 700 piksel genişliğinde ve 400 piksel yüksekliğinde bir resim istediğimizde 700/400:
https://picsum.photos/200/300
Resmi WordPress'e ekleyin
En kolay yol, girdimizin içindeki Nesne Ekle'ye gitmektir:
"URL'den Ekle"ye tıklıyoruz ve işte bu kadar:
Bunu yapmanın başka bir yolu da biraz html içeren kod kullanmaktır, çok basit ve daha hızlı yapacaksınız.
HTML düzenleyiciye sahip olduğunuzdan emin olun ve aşağıdakileri ekleyin:
<img alt="imagen aleatoria" src="https://picsum.photos/700/400?random">
Bir görüntüyü gri tonlamalı olarak çağırın
Basitçe "g" parametresini ekliyoruz, burada nasıl olduğunu görebilirsiniz:
<img alt="imagen aleatoria" src="https://picsum.photos/g/700/400">
Sonuç:
Gürültülü bir görüntü çağırın
URL'nin sonuna »?blur» ekliyoruz
<img alt="imagen aleatoria" src="https://picsum.photos/700/400/?blur">
Sonuç:
Bu aracı günlük işlerime dahil ettim umarım size de faydalı olur 😉