Всем привет! Сегодня я хотел бы рассказать о javascript — библиотеке Holder.js. Она нужна для генерации изображений — заглушек.

Где это можно использовать?


Практически везде, где нужно посмотреть конечный результат без заполнения страницы контентом. Наглядный пример — человек делает макет сайта. Чтобы ему посмотреть результат, надо заполнить макет текстом и изображениями. В первом случае используют текст — рыбу (например, Lorem Ipsum). Во втором случае, нам нужен генератор изображений — заглушек. Мы также можем использовать онлайн — сервисы (Placehold или Dummy Image), или, специальные javascript — библиотеки, типа Holder.js.

Использование на странице


Переходим на страницу загрузки, нажимаем кнопку " Download Holder.js" и распаковываем файл holder.js на сайт. Теперь нам надо подключить скрипт. Для этого в коде пишем следущее:

<script src="Ссылка на файл holder.js"></script>


Чтобы проверить что всё работает правильно, поставим первую «заглушку». Делается это так:

<img src="holder.js/ШИРИНАxВЫСОТА">


То есть, если мы хотим получить изображение шириной в 200 пикселей, а высотой в 350, пишем следующее:

<img src="holder.js/200x350">


Скриншот того, что получится

Кстати, размер можно указывать в процентах.

Кастомизация заглушки



Вместе со скриптом вы получаете 6 тем: sky, vine, lava, gray, industrial и social. Чтобы их использовать, напишите её название после слеша:

<img src="holder.js/200x350/НАЗВАНИЕ ТЕМЫ">


А можно не использовать темы и задать цвета вручную:

<img src="holder.js/200x350/#FFF:#000">


Так мы получим чёрный текст на белом фоне (#FFF — цвет фона, #000 — цвет текста).

А теперь, давайте изменим текст:

<img src="holder.js/200x350/#FFF:#000/text:ВАШ ТЕКСТ">


На этом возможности данной библиотеки заканчиваются. Ссылка на пример.