Helykitöltő képek készítése pár mozdulattal, fejlesztéshez, tördeléshez

Valószínűleg mindenki hallott már a lorem ipsum helykitöltő szövegekről, amelyeket előszeretettel alkalmaznak akár a DTP, akár a webfejlesztés területén, ha átmenetileg kell némi szövegfolyam, a készülő oldalak és felületek elrendezésének teszteléséhez. Van belőle minden nyelven, generáltathatunk tetszőleges hosszúságút belőle, sőt, akadnak jópofa variációi is az eredetinek. Nos, ma valami nagyon hasonlót mutatunk, csak éppen nem szöveget, hanem képeket generálunk. Az ilyen helykitöltő képek készítése igencsak megkönnyítheti a dolgunkat, hiszen nem kell Pixabay vagy egyéb forrásból átmeneti képeket letölteni, méretezni, vagdosni – mondjuk egy weblap vagy magazin oldal tervezésekor -, hanem pont a megfelelő méretben állnak rendelkezésünkre az adott helyet elfoglaló képek.

Helykitöltő képek készítése pár mozdulattal

Két megoldást is mutatunk a feladat elvégzéséhez. Már csak azért is, mert kicsit másként működnek, így mindenki eldöntheti, melyik számára a szimpatikusabb megközelítés.

Nevében némi Lorem Ipsum utánérzést kelt a Lorem Picsum, amelynek használata rendkívül egyszerű: az oldal linkje (https://picsum.photos) után kell írnunk, hogy mekkora képre van szükségünk, a következő módon:

https://picsum.photos/320/240

A fenti link megnyitása után a böngészőnkben megjelenik egy véletlenszerű fotó, 320×240 pixeles méretben, amelyet lementhetünk és használhatjuk kedvünkre a készülő anyagban. Ha négyzetes képre van szükség, elég így megadni:

https://picsum.photos/320

Ennek eredménye egy 320×320 pixeles kép lesz. A két témája amúgy véletlenszerű, az oldal saját gyűjteményéből, amelyet itt átnézhetünk. Ezen a gyűjtőoldalon látni minden kép egyedi azonosítóját, amelynek segítségével hivatkozhatunk is rájuk a megfelelő méret generálásakor, az alábbi módon:

https://picsum.photos/id/1/200/300

Ennél egyszerűbben már szinte nem is lehetne megoldani ezt a dolgot. Tényleg villámgyorsan generáltathatunk magunknak helykitöltő fotót vele.

Másik megoldás lehet az ImgPlaceholder, amely kissé összetettebb darab. Itt az oldalon látható opciók kitöltésével tudjuk testreszabni a készülő képet. Itt nem fotót, hanem ikonokat, vagy az adott kép pontot méretét (tetszőleges betűtípussal írva) helyezhetjük el a helykitöltő képen. Egy halom kategorizált ikon közül választhatunk, vagy beállíthatjuk a méret megjelenítését is. Módosíthatjuk a háttér és az ikon/szöveg színét, illetve ha kell, áttetsző háttérrel is kreálhatunk képet.

Ha elkészültünk, letölthetjük a kész képet, vagy ha az kényelmesebb, használhatjuk a rendszer által generált HTML, BB, vagy markdown kódokat.

Bármelyiket is válasszuk e két ingyenes szolgáltatás közül, valószínűleg sok időt megtakaríthatunk a használatukkal. Webfejlesztők számára kifejezetten előnyös darabok, érdemes őket kipróbálni.

Ne maradjon le erről sem!

Mint a legtöbb weboldal, mi is használunk sütiket az oldalon. Elfogadom Adatkezelési tájékoztató