Kiedy tworzymy nową stronę internetową lub przygotowujemy funkcjonalność testową, często musimy popracować z obrazami testowymi, aby zobaczyć, jak to wygląda.
To, co zwykle robimy, to pobieramy dowolne zdjęcie z internetu i marnujemy czas na przygotowywanie zdjęć, które później zastąpimy, czyli:
Marnujemy czas 😠 👎
Jeśli ta historia brzmi znajomo, spodoba ci się dzisiejszy samouczek 😄
Tak jak istnieje tekst dowodowy, typowy Lorem Ipsum, stworzyli też obrazki testowe, co możemy szybko nazwać.
Na przykład losowy obraz o rozdzielczości 700×400 pikseli powinien pojawić się poniżej (jeśli ponownie załadujesz stronę, zobaczysz inne zdjęcie):
Jak to zrobiłem?
po prostu dodając następujący kod:
<img alt="imagen aleatoria" src="https://picsum.photos/700/400?random">
Teraz spokojnie ci to wyjaśnię, ale czy nie uważasz, że to cudowne? Dla mnie tak 😉
Oto samouczek wideo:
Suscríbete a mi kanał:
Usługa, z której korzystamy, to picsum.zdjecia i chociaż ma bardzo dobrą pomoc tutaj wyjaśnię, jak to działa:
Zadzwoń do obrazu o określonym rozmiarze
Aby to zrobić, wystarczy umieścić adres URL Twojej witryny i dodać rozmiar obrazu na końcu, na przykład 700/400, jeśli chcemy, aby był to obraz o szerokości 700px i wysokości 400px:
https://picsum.photos/200/300
Dodaj obraz w WordPress
Najprostszym sposobem jest przejście do Dodaj obiekt w naszym wejściu:
Klikamy „Wstaw z adresu URL” i gotowe:
Innym sposobem na to jest kod z odrobiną html, jest to bardzo proste i zrobisz to szybciej.
Upewnij się, że masz edytor HTML i po prostu dodaj następujące elementy:
<img alt="imagen aleatoria" src="https://picsum.photos/700/400?random">
Wywołaj obraz w skali szarości
Po prostu dodajemy parametr „g”, tutaj możesz zobaczyć, jak:
<img alt="imagen aleatoria" src="https://picsum.photos/g/700/400">
Wynik:
Zadzwoń do zaszumionego obrazu
Dodajemy na końcu adresu URL »?blur»
<img alt="imagen aleatoria" src="https://picsum.photos/700/400/?blur">
Wynik:
Włączyłem to narzędzie do swojej codziennej pracy, mam nadzieję, że Wam też się przyda 😉