holder.js - placeholder for images

January 13, 2016 30 egor

holder.js is a library for automatic image rendering in a browser on the set parameters. Often you need to add images to the layout template to see the end result. It could be done in several ways. The first way is to create image in graphics editor. The second one is using library holder.js.

Simple example of usage

You must include holder.js:

<script src="/path/to/holder.js">

And display the image:

<img src="holder.js/WIDTHxHEIGHT">

"WIDTH" and "HEIGHT" replace to your actual sizes. As example, display the image size of 200 in width and 100 pixels in height:

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

Additional parameters

Displaying square image (for example, the width and height are 200 pixels):

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

Displaying an image with the size as a percentage:

<img src="holder.js/100%x50%">

You can also combine the image size in pixels and percentage:

<img src="holder.js/100%x100">

Automatic image resizing:

<img src="holder.js/200x200/auto">

To avoid errors in console you can use data-src instead of src:

<img data-src="holder.js/200x100">

Themes for images

holder.js has 6 themes: sky, vine, lava, gray, industrial, social

An example of using "sky" theme:

<img src="holder.js/200x300/sky">

Also you can use a random theme:

<img data-src="holder.js/300x200/random">

Text on image

You can use any text with the operator "text":

<img data-src="holder.js/200x200/text:devreadwrite.com">

holder.js automatically adds a line break. To control a line break, use \n:

<img data-src="holder.js/200x200/text:my site \n devreadwrite.com">

Setting font for the text:

<img data-src="holder.js/200x200/text:my site \n devreadwrite.com/font:Helvetica">

Color of the text and (or) background

Example of image with black background and white text:

<img data-src="holder.js/100x200/#000:#fff">

More info: https://github.com/imsky/holder