📜 ⬆️ ⬇️

Generating stub images

Today I threw a link to a cool service for quickly generating image stubs. May be useful for html-layout. In my opinion, this is convenient for those who already use stubs - it saves time during layout, because The plugs themselves are ready. You can select colors / sizes, changing only numbers / letters in the code, without being distracted by the image file itself - and immediately see the effect. And see the dimensions themselves written, if necessary, in order not to return to the code for verification. Or, instead of dimensions, you can add text to always know what this stub is for (like “Ban (n) er” or “Logo” or “Photography” there).

The service does not need registration - and in general you can not enter the site to use it. Write directly in your code, for example:
< img src = "http://placehold.it/350x50" / >
and get:


Update . Thanks to the efforts of k0rv1n , a variant of this service was found , only better :)
First, Cyrillic is supported there. Secondly, there are links to source codes for different languages.
The author of dummyimage.com is the same Russell Heimlich as in placehold.it . Placehold.it has one more author , but we will assume that he did the design (the design is really cooler there, but apparently just because of the Unicode font did not come out).
')
Examples (see under habrakat) I changed from placehold.it to dummyimage.com , since it is more functional ...
So, examples:

1. For a square stub one number is enough:
< img src = "http://dummyimage.com/ 120 " / >
< img src = "http://dummyimage.com/ 100 " / >
< img src = "http://dummyimage.com/ 80 " / >
Result:


2. Change the color (should always go after the size, otherwise it will not work):
< img src = "http://dummyimage.com/150x60/ c0c0c0 " / >
< img src = "http://dummyimage.com/150x60/ 00dd00 " / >
< img src = "http://dummyimage.com/150x60/ a6a6ff " / >
Result:


3. Change the format (add the extension to any part of the url; 3 formats are supported - gif, jpg / jpeg, png):
< img src = "http://dummyimage.com/150x60/99cccc .gif " / >
< img src = "http://dummyimage.com/150x60 .jpg / 99cccc" / >
< img src = "http://dummyimage.com/150x60/99cccc .jpeg " / >
< img src = "http://dummyimage.com/150x60 .png / 99cccc" / >
Result:


4. Add text (instead of a space - plus):
< img src = "http://dummyimage.com/150x60/99cccc.gif & text = The + image! " / >
< img src = "http://dummyimage.com/150x60/99cccc.jpg & text = The + image! " / >
< img src = "http://dummyimage.com/150x60.png/99cccc & text = The + image! " / >
< img src = "http://dummyimage.com/150x60.png/99cccc & text = Cyrillic " / >
Result:


5. Change the text color (it comes after the color of the stub itself):
< img src = "http://dummyimage.com/150x60/99cccc/ ffffff .gif & text = The + image!" / >
< img src = "http://dummyimage.com/150x60/99cccc.jpg/ 0b0b0b & text = The + image!" / >
< img src = "http://dummyimage.com/150x60.png/99cccc/aa00aa & text = The + image!" / >
Result:


PS Who can offer an adequate translation of the word " placeholder "? nooze suggested a " stub " :)

PPS The authors of the placehold.it service ( Brent and Russell ) write down there that they did it in order (as they hope) to save someone a little time.

Source: https://habr.com/ru/post/101346/


All Articles