Pull to refresh

Генерирование изображений-заглушек

Reading time 3 min
Views 56K
Сегодня мне кинули ссылку на прикольный сервис для быстрого генерирования изображений-заглушек. Может пригодиться для html-верстки. На мой взгляд, это удобно тем, кто и так использует заглушки — экономит время при вёрстке, т.к. сами заглушки уже готовы. Можно цвета/размеры подбирать, меняя только числа/буквы в коде, не отвлекаясь на сам файл картинки — и сразу видеть эффект. И сами размеры видеть написанными, если нужно, чтоб к коду не возвращаться для проверки. Или вместо размеров можно текст добавить, чтоб всегда знать, для чего эта заглушка (типа «Бан(н)ер» или там «Лого», или «Фотография»).

На сервисе не нужна регистрация — и вообще на сайт можно не заходить, чтобы его использовать. Пишете сразу у себя в коде, например:
<img src="http://placehold.it/350x50" />
и получаете:


Update. Благодаря усилиям k0rv1n, найден вариант этого сервиса, только лучше :)
Во-первых, там поддерживается кириллица. Во-вторых, там даны ссылки на исходники для разных языков.
Автор dummyimage.com — тот же Russell Heimlich, что и у placehold.it. У placehold.it есть ещё один автор, но будем считать, что он делал дизайн (дизайн там правда круче, но видимо как раз из-за понтового шрифта Unicode и не выходил).

Примеры (см. под хабракатом) я поменял с placehold.it на dummyimage.com, раз уж он функциональнее…
Итак, примеры:

1. Для квадратной заглушки достаточно одного числа:
<img src="http://dummyimage.com/120" />
<img src="http://dummyimage.com/100" />
<img src="http://dummyimage.com/80" />
Результат:


2. Меняем цвет (всегда должен идти после размера, иначе не сработает):
<img src="http://dummyimage.com/150x60/c0c0c0" />
<img src="http://dummyimage.com/150x60/00dd00" />
<img src="http://dummyimage.com/150x60/a6a6ff" />
Результат:


3. Меняем формат (добавляем расширение к любой части url-а; поддерживается 3 формата — 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" />
Результат:


4. Добавляем текст (вместо пробела — плюс):
<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=Кириллица" />
Результат:


5. Меняем цвет текста (он идёт после цвета самой заглушки):
<img src="http:&#47&#47dummyimage.com/150x60/99cccc/ffffff.gif&text=The+image!" />
<img src="http:&#47&#47dummyimage.com/150x60/99cccc.jpg/0b0b0b&text=The+image!" />
<img src="http:&#47&#47dummyimage.com/150x60.png/99cccc/aa00aa&text=The+image!" />
Результат:


P.S. Кто может предложить адекватный перевод слова "плейсхолдер"? nooze предложил "заглушку" :)

P.P.S. Авторы сервиса placehold.it (Brent и Russell) пишут там внизу, что сделали его для того, чтобы (как они надеются) сэкономить кому-то немного времени.
Tags:
Hubs:
+265
Comments 119
Comments Comments 119

Articles